Menu
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.

Responsive Web Design for Desktop, Notebook, Tablet and Mobile Phone

What it looks like:

meta for viewport

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

responsive web design screen resolutions

/* 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 */
}

Nisarg Mehta Nisarg Mehta

Nisarg Mehta, CEO & Chairman of Techtic Solutions, is the vision of the company. Nisarg is active in operations in his daily routine as he is one of the key decision makers in terms of technological advancements of the company. He is a friendly leader with hardworking, motivating, visionary and passionate personality.

Join over 10,000 people who
love best articles, and tips.

Relevant Blog

UI VS UX: SIMILARITIES & DISSIMILARITIES?
Nisarg Mehta

UI VS UX: SIMILARITIES & DISSIMILARITIES?

Published on Dec 30, 2014 by Nisarg Mehta

The simple definition of UI (User Interface) is that it is a part of the product which is being seen by the user when he looks into the site, where as the UX (User Experience) is what they feel when they see the site. UX is a term which has its meaning in a much broader way than that of the UI. In a nutshell we will focus on UI Vs UX during the entire article. Better UX is just as having smooth operating and it gives the user a feeling of ease while visiting the site. Whereas, the good UI is the materialistic approach of making the visit on the site look good. Overall, the complete package is what that makes good UX and the good UI is obviously an important inner element of it. As per the experts, UX and UI are some of the very confusing and misused terms in this field. Without UX, UI is just like a painter painting the canvas without any thought in minds, whereas the UX without UI is just like a sculpture framed without any paper Mache. For an amazing product experience UX an UI are equally important.

Read More
Start A Project

Let's Start With Discovery Session!

Please share your contact information, for us to connect with you and offer you a free discovery session about your digital product.