Responsive Layout

17 October 2013

Responsive Layout

In the good old days of website development, when WAP was the only mobile website, things were simpler. You didnt have to worry about screen resolutions or whether the phone's memory would be able to deal with complex pages.

Then a few years ago, the smartphones with embedded browsers started appearing on the screen. To make a mobile site then, you needed to make pages that conformed to a small number of screen resolutions. 

As the new generation of pocket computers and tablet computers came along, the number of possible screen resolutions quickly became untenable, and mobile devices which could render full fat webpages became the norm. Many people then started to build websites which could be rendered on multiple platforms without requiring a separate build. 

One way of doing this is by using Responsive Layouts. Responsive layout means building a website that adapts automatically to the device it is viewed on, without using separate content for mobile devices. The key to this is using responsive stylesheets based on media queries. For example, with the site is viewed on a normal browser, one set of stylesheets are used to render layout and font sizes, and when a smaller browser is used, a different set of CSS rules are used. Both versions of the site can inherit the same base rules and be overriden with others.

Some responsive layout systems also use jQuery to rewrite certain elements in the browser, for example, Bootstrap contains quite a few clever tricks to rewrite menus into dropdowns and restyle layouts based on browser width.