Responsive web design (RWD) is a hot topic at the moment and with some justification. In a nutshell, it’s the ability of a site layout to adapt to the device in which it is being viewed. The creation of RWD and then its related success is down to developers, such as Ethan Marcotte, who led the way with the pioneering Boston Globe site. It is the ability of RWD to provide a robust yet bespoke layout solution to the ever increasing number of devices such as phones, tablets, e-readers, games consoles and even TV’s, that is a reason for its appeal and success.To some degree RWD is a device agnostic approach when providing a user with a view of the website - it is the width of the screen that is key. However, despite its inherent flexibility; it is not a panacea for all future website development. Many websites do and should have mobile specific sites and there are other difficulties, such as creating responsive ecommerce sites, dashboard type apps and image sprites.
The basic technique is to use a fluid grid, in combination with media queries in your CSS, to define the breakpoints in your design; thus allowing creation of different layouts. Where those breakpoints should fall and what the layout should look like at each one is a discussion the stakeholders should have. We also have to make the media elements responsive. The basic idea of this is to set the image width to 100% so it will fill but be constrained by the container it is held within. This is good to a point, in that the image will always fit - but often this approach can be overkill. For example, if we are viewing on a small screen device; we are going to have to pull a large bandwidth hungry image over the network to then force less powerful (than desktop) processors to resize the image to fit in the container. There are various workarounds for this. One of the first solutions came from the Filament Group but as yet not one of them really addresses all the issues. The developer Chris Coyier has put together a spreadsheet on the latest ways to do this.
The technique that seems to cover most bases, has good caching and does not alter the html is the Matt Wilcox 'Adaptive Images' technique. It is also easy to implement, which is always a bonus. The technique obeys the sound principle of mobile first and then uses progressive enhancement as required. This is a good default action - unless you can prove that you are on a large display you should be served a small image. 'Adaptive Images' uses a small amount of javascript to determine monitor resolution, which is then set in a cookie. If cookies are disabled, it will use the secondary technique of checking the user agent string for device details. Using php; it then utilises the monitor resolution value to determine the size of image to produce. Dealing with video is similar and a little simpler than with images. The image resizing issue may decline in importance slightly as the use of SVG images increase.
Another difficult issue is bandwidth detection; currently there is no real way of correlating this with the device width. An issue that must be resolved for RWD to truly be a success. There is also no media query support in earlier versions of Internet Explorer - which will come as no surprise. However, there are JavaScript polyfills out there to deal with it, such as respond.js by Scott Jehl.When it comes to testing our designs we can use the various emulators available, but nothing can beat testing on the actual product. One of the benefits of being a full design agency like ourselves is to have access to a full test suite of available devices. An invaluable resource that simplifies an otherwise challenging proposition. Another issue is deploying the correct content strategy. A mobile user is just that and generally they want a website weighted towards information that is based upon their location, as opposed to a desktop user. Taking these variables into account; a good platform to start from is to design all breakpoints for standard users, which will help flush out scenarios where a different implementation is needed.
So when will responsive images be incorporated within web standards? This is a question that has yet to be decided due to the current heated community discussion over which html element should be responsible for dealing with this. Developers are favouring the <picture> tag, whereas browser manufacturers prefer adding an option to the <img> tag.
It can be seen from the above that there is still a lot of scope and potential left in RWD and further ideas to be considered are; responsive typography, i.e. hiding/rewording content for smaller devices and how advertising can be handled responsively. However, RWD is a fantastic concept and provides a design solution to the multitude of gadgets on which we view the web. The difficulty in creating these sites correctly is that it will require somewhat of a sea change in a web agency's workflow.