Before the advent of smartphones and tablets, web browsers were typically of the same size, give or take a few inches. This meant that most webpages had generic layouts to classify information into several sections: the table of contents, the central article and accompanying images, any information or quotes that needed highlighting and so on. All these sections would then span the entire width of the browser, with information being organised horizontally to minimise scrolling.
But the market is no longer ruled by PCs. Research firm Gartner predicts for the first time this year, smartphones and tablets shipments are expected to overtake PCs. This means that the web browser is no more a one-size-fits-all game. It is now available in a staggering variety of sizes, calling for a change in the old approach to designing webpages.
In the initial days of the smartphone, web designers were usually asked to design a webpage for a PC web browser and then create several clone webpages with slightly different designs for mobile browsers. It was not uncommon, for example, to be asked to design an iPhone website and a website for PCs.
Responsive designing
This approach is now changing, and the buzzword in the web design arena is ‘responsive designing’. The concept first proposed by Ethan Marcotte in 2010 in one of his articles for ‘A list apart’, is inspired by responsive architecture, a discipline that is trying to research the possibility of having “physical spaces respond to the presence of people passing though them” rather than creating “immutable, unchanging spaces”.
Responsive design essentially creates a webpage that responds to the size of the device that is trying to display it, and accordingly presents itself in a manner that allows the viewer to have a pleasant browsing experience.
All webpages are composed of two things: HTML and CSS. While the former is used to define the content of a webpage, the CSS defines the design-related features for a webpage. The HTML is always loaded completely irrespective of the device you are using or the type of design. Responsive design just uses the right CSS to make the content more accessible to the reader by reducing the need to constantly zoom in and out of the page and by minimising the necessity to continuously scroll up and down the webpage.
Graceful degradation
The traditional approach to creating webpages for multiple device sizes, also known as ‘graceful degradation’, starts with the web designer creating the webpage for the large screen by arranging elements horizontally to span the entire size of the browser. Subsequently, important elements are siphoned off to create slimmer and leaner websites that only accommodate the sections of focus for smaller devices.
Kaustav Das Modak, a web designer with Codebinders, explains that the old approach requires a lot of server side polling with servers often asking the web browser ‘Who are you?’
This essentially means that the server has to first recognise the kind of device that is trying to access the data and when it has received this information, it provides a device specific design.
Responsive design, also called ‘mobile first approach’, starts of with the website design for smaller devices and through a technique called progressive enhancement builds the larger website by adding more elements, usually vertically. Das Modak explains that here the server asks the requesting browser, ‘What can you do?’ and renders the appropriate and optimal CSS accordingly.
Responsive design uses several frameworks and technologies to achieve the grid fluidity. These are CSS3 media queries and frameworks that make it easy to provide grid design and compatibility across different browsers. Media queries help you to decide when a certain CSS rule should be applied. Frameworks such as Foundation and Twitter Bootstrap help designers build a responsive grid very quickly and this helps the designers to focus on specific styles and other design and content requirements for the webpage instead of the responsive aspect.
Compatibility issues
Browser compatibility is one major issue when it comes to responsive design as older browsers cannot render certain CSS very well but this does not take away anything from the conceptual brilliance of this particular design approach. With the plethora of devices equipped with a web browser in the market, this is one concept that is here to stay.
