Components required for responsive web designing

Responsive web design (RWD) is a web design approach aimed at making websites change itself to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

That means make your website to adjust itself as per viewer's screen resolution or device such as mobile or desktop. In this way you can increasing user experience of your website. In this discussion we are going to take look at components that requires to build responsive website.

1)View port

2)css media queries

View port

View port is very important component for your responsive Website. Without it your website can not show phenomena of responsiveness on mobile devices.

View port actual reads width of device and ask browser to do responsive things. View port lies between head tags of your html code.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Css3 Media queries

Css3 media queries are introduced to targeting different sizes of devices or view port. Basically this gives you to build css to target specific width's devices. Means you can write style separately for mobile devices, tablets and desktops. In this way website fits to that specific device perfectly. But you should design your website differently for each set of devices.

You can include media queries in three ways to your webpage.

1)In the head tag of html you can import different style sheets for different widths of devices, like this

<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

2)Or you can import external style sheet inside your existing style sheet

@import url(styles.css) all and (max-width: 1024px) {...}

3)Or you can write rules for different media queries inside your single style sheet

@media all and (max-width: 1024px) {...}

Most experts recommend the 3rd one that means write media queries in side your one single css style sheet. Because importing external style sheets may increase your page request, which may cause slowdown your page to load.

Each media query may include a media type. Common media types include all, screen, print, tv, and braille. The HTML5 specification includes new media types, even including 3d-glasses.Screen is default media type if not specified. Way to write media type is

@media only screen {}

@media only print {}

Style you want to apply for screen media (like desktop, mobile etc) go inside '{}' and same for print media.

For responsive website it is necessary to write different styles for different width of screen. So media query gives you that option. You can write it like this

@media only screen and (min-width : 320px) and (max-width : 480px) { /* Styles */ }

The style written in this media query will apply for screen with width between 320px to 480px.

We can also write in this manner given below

@media only screen and (min-width : 320px){ /* Styles */ }

This will apply style only for screen with above 320px. Here we are not restricting max screen width.

@media only screen and (max-width : 320px) { /* Styles */ }

This will apply style for screen with below 320px. That means this will never apply for screen width above 320px

Now like this you can write style for specific conditions you need. You can add as many media queries in style sheet you want.

I hope this will help many beginners in responsive web designing.

I next session I am going to discus recommended breakpoints or screen sizes for media queries.