The term Responsive Design has very quickly become part of the web design conversation and as more high profile sites move from offering separate mobile and desktop sites to embracing the responsive method, it is set to redefine how sites are designed and managed.
Responsive Design was first mentioned by Ethan Marcotte writing for AListApart In considering the problem of how to design for a multitude of devices, he looked back to the foundations of web design and some key ideas that had largely been discarded in favour of fixed grids and printed page-like layouts.
Responsive Design was originally described to have three core ingredients: a fluid grid layout, flexible images and media queries. Since then the idea has been expanded to include grids that have a number of fixed sizes under a more expanded term of Adaptive Design. The core idea is the same but it generally accepted that only designers look at a site and then shrink the viewing area to see if it’s responsive and having a smooth fluid transition isn’t necessary.
There are a number of excellent grid systems that predefine flexible grid dimensions. Media queries are supported by most smartphones and all modern desktop browsers with JavaScript polyfills available for older versions of internet Explorer. Flexible images have proved to be a harder problem. It’s easy to scale down an image for mobile devices, however current network speeds and data plans make this a painful proposition where the image takes multiple seconds to download. The ideal solution of being able to define a picture as having multiple images optimised to various media queries could be years away in passing through the W3C standards process or being adopted by the various browsers. Currently most attempts at a solution are highly dependent on JavaScript, involve some less than ideal non-standard HTML and are potentially unmanageable in the current content management systems available. As mobile network speeds increase it will be less of an issue, but for now requires special consideration when developing a responsive site.
