Responsive Web Design: What WHY & HOW

The question is: How does it understand which device is it on and once it understands the device how does it resize automatically? Understanding this would be really helpful to code or rather transform any normal website into responsive website.

The Viewport Meta Tag

To convert any website into responsive; enter the viewport meta tag, introduced by Apple, which was then adopted by all the others in the industry.

What it looks like:

content=”width=device-width” makes the website flexible and scale the website to the width of the device you enter. Content=”intial-scale=1” This will allow the display of the layout in the proportion of 1:1 scale. No zooming will be applied. One can also make sure that no further zooming can be applied by makiing it maximum-scale=1.

In a nutshell the viewport defines the view of the website, scalability and zoom level for any website. This needs to be defined as a first step on the way to transforming any website to responsive.

Media Queries

CSS Media Queries is one of the most important aspect for making the website responsive. Zooming and Viewport has been setup but the website wont work on smart phones unless the CSS for a particular smartphone is defined to make website understand and act as per the CSS. CSS3 can specify when certain CSS rules should be applied on a particular device width. This allows you to apply a special CSS for mobile devices such as smartphones or tablets. CSS Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on most modern smartphones and other screen-based devices.

Here is how it works. The CSS is defined for each viewport and the corresponding stylesheet or rather css rules will apply only when a media query is true. The stylesheet for each viewport’s corresponding media query is also given in the example. Needless to say that the media query must be linked in the page to function properly.

Screen resolution and dimensions

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* STYLES GO HERE */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* STYLES GO HERE */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}

/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}