Developing a Responsive Web Design (RWD) layout

With the number of mobile devices and varied screen resolutions, there is a great need for a layout for mobile devices. Responsive web design (RWD) is a web design approach aimed to develop websites that provide different and optimal views of a website on different devices such as tablets, mobile phones and Desktop/laptops. RWD provides easy reading and navigation with a minimum of re-sizing, panning, and scrolling across these devices. In short, RWD uses “CSS3 media queries” to figure out what resolution of device a website is being served on and changes layout of the website for optimal viewing.

A site designed with RWD uses CSS3 media queries using the @media rule, to adapt the layout of the viewing environment in a fluid grid manner. W3C created media queries as part of the CSS3 specification, which allows us to target not just device classes, but to use physical characteristics of the device like screen resolution. For example, in a current project i am using RWD targeted for iPhone 4 & 5. Both of which have a device width of 640px. To change layout for these devices i am using a CSS3 media query based on device width.

According to fluid grid concept standards:
1. Page element sizing should be in relative units like percentages or ems, unlike absolute units like pixels or points.
2. Flexible images are sized in relative units using percentage rather than pixels so as to prevent them from displaying outside their containing element during resize of the screen.
3. You can also display block/none for certain div elements depending on device. For e.g. you may have a different
navigation UI for mobile and desktop.

Let’s see a quick example to create a RWD for a website.

Create a CSS file with the following code.

    @media screen and (max-width: 640px) {
        .display-none-mobile{
            display: none;
        }
    }
    @media screen and (min-width: 641px) {
        .display-none-desktop{
            display: none;
        }
    }

The above code queries the device width and if it is 640px or less (just like iPhone which has 640px width), it will set a rule for the class display-none-mobile to display none. Similarly for a device width more than 640 it sets a rule for class display-none-desktop to display none.

Now, create a webpage with the following code.

<html>
    <head>
        <title>
	    Responsive Design Example
	</title>
    </head>
    <body>
        <div class="display-none-mobile">         
            Goes away when screen size is less than or equal to 640 px
        </div>
        <div class="display-none-desktop">        
            Goes away when screen size is more than 640 px
        </div>
    </body>	
</html>

The above code creates two div blocks. These two blocks will be visible one at a time depending on the device width.

WindowsVJ.com also turned into a RWD supporting website last month. If you’re viewing this article on a desktop browser, try making your browser window smaller. The images and content column will shrink, then the sidebar will disappear.

Check out some cool RWD examples at DesignModo

There is a chrome extension that can set different resolution for browser. This extension can be quickly used to change browser size. Try width 640, 768 etc. Chrome Extension

Also, sometimes Responsive design may be referred as Adaptive design as well.

Image from: Mashable And, yes they also called 2013 the Year of Responsive Web Design.