Responsive Web Design - in a nutshell

These days, businesses are leaning more towards making their website "responsive" so as to capture the growing Mobile audience, but what does "Responsive web design" really mean?

When you are viewing a regular web page on a tiny screen the text size is unreadable, navigation is cluttered and most web pages are too wide to view. Wouldn't it be nice to have a single web page which is rich in features on a desktop device yet also renders beautifully on a tiny mobile screen; it "responds" to the device? 

With Responsive Web Design, a single page will sense the size of the screen and change column widths and the number of items displayed for every user. Some elements will explode to fill the entire width of the screen (for example a Submit button on an iPhone) while other elements will shrink away to be almost hidden from view (for example a complex menu compacting into a tiny square "hamburger" button).

On a small screen the menu can simply disappears and is replaced with a hamburger button.

Something exciting happens with Images tagged as Responsive. They shrink and grow in front of your eyes as you rotate your phone from portrait to landscape rather than being a fixed sized blob.

HOW DOES IT WORK?

Every device uses a "browser" to view a web page. Modern browsers use an advanced styling system. Not only does this styling system tell the browser the style, size and colour of the fonts but it can also change settings based on the size of the screen you are viewing. On an iPhone the screen is tiny and on a desktop it can be 8 times larger. So the designer simply tells the browser for one width of screen, they want it to appear one style and for another width appear larger/smaller/hidden.

WHAT'S THE TREND?

The trend is to make general fonts mid-sized so as to be easily readable on a mobile phone as well as being comfortable on a desktop. Bootstrap is a popular system for making this happen. Headings have increased in size. Images are large and zoomable. 

WHAT IS BOOTSTRAP?

Bootstrap was designed by Twitter to render a page beautifully on both desktop and mobile devices. The ease of which designers can alter a design became so popular that many web pages were redesigned using Bootstrap. Even Microsoft uses Bootstrap in its default web application to allow developers to instantly have a stylish, responsive design out-of-the-box.

Bootstrap has a really powerful feature for rendering columns. By simply placing a simple code on any item, it will display a different number of items across the page. This changes for every device. For example, lets say you have 24 products to display to a user. If the user has a desktop PC, you could easily display these items 6 items wide. However, on your iPhone's tiny screen, you would only display one or two items wide and allow the user to scroll down through your products. 

In fact, Bootstrap has 4 levels of screen size. Large, Medium, Small and Extra small to cover all desktop and mobile devices.

There's more. Bootstrap even allows you to "hide" elements on some screen. Think of the power of being able to simply not display an element (e.g. menu, banner ad) on an already cluttered screen.

A medium tablet will display 2 categories wide - turn it sideways and it displays 3 categories.

WHAT ARE THE DISADVANTAGES?

It takes longer to design a page which can accommodate 4 different screen sizes.
Every element must be considered as to its importance.
Elements that are hidden (e.g. large images) are downloaded regardless. They are simply not displayed. This consumes valuable bandwidth but has no visual benefit.

SUMMARY

It takes a little longer to design a mobile responsive site but the extra time and extra thought outweighs the alternative of building two sites.