As we discussed previously, responsive web design has emerged as an answer to the problem posed by the huge proliferation of new platforms, devices, and screen resolutions. Focused on disconnected, device and browser-specific site design, designers found themselves unable to keep up with this trend. Drawing inspiration from responsive architecture, responsive web design revolves around certain rules and principles that enable designs to function in any user context. In this way, design becomes a responsive discourse between users and environment.
So how do we put these principles into practice?
We finished the last article by briefly touching upon the example of icon scaling in Android. This isn’t related directly to web design, but it serves as a good starting point for explaining responsive web design solutions. Google requires all Android 5.1 icons to be available in five different sizes. This is so that they can effectively scale for the variety of display densities supported by the app launcher. To fit displays with lower densities, icons will automatically scale from the smallest ‘baseline’ icon.
They might be giving designers extra work, but what Google is doing with these rules is demanding that designers create adaptable, versatile icon sets for all possible devices available within Android. This significantly frees up developers to focus on providing the best content possible, without having to worry about compatibility or spread.
This is essentially what responsive web design attempts to accomplish. A carry over of print media, websites used to be designed in terms of a fixed-unit pixel-based resolution. Responsive websites, however, “are built with relative units like percentages, rather than fixed units like pixels”.
In his article on multi-device layout patterns, Luke Wroblewski catalogues the most popular ‘patterns’ that responsive page layouts have taken. He separates these into categories, some of which we’ll explore now:
‘Mostly fluid’ – seemingly the most popular pattern, the Mostly Fluid layout uses larger margins on larger screens and relies heavily on fluid grids and visual elements in order to scale for different devices. What makes it ‘mostly’ fluid is that the page layout doesn’t change until it is used on the smallest screen.
‘Column drop’ – at the largest screen size, these sites use a multi-column layout. As they scale down, the columns ‘stack’ on top of one another until, at the smallest size, you have a single column webpage.
‘Layout shifter’ – this uses different layouts depending on screen size, and as Wroblewski argues, “does the most to adapt across different screen sizes”.
‘Off canvas’ – this uses ‘off-screen’ space to allow for a large layout. In this way, the device becomes a sort of magnifying glass on a landscape, and different elements of the page are revealed as the user interacts with their device. This has been put to great (or poor, depending on your perspective) use in the Windows Phone OS, where it applies not just to webpages, but also to the entire user interface.
It’s clear that there is no single web design solution. The beauty of it is that, given the right structural framework, designers are given much more room to innovate and respond to new and varied challenges. The new language of web design is now founded in concepts like relativity, speed, interaction, and fluidity; it is no longer a case of creating prescriptive and programmatic designs within fixed boundaries, which only serves to restrict both users and designers. Sites now work for their users, and that’s the way it should be.
Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…