Responsive design is a tricky, mischievous beast that will bow to no one (unless you try super hard!). Faced with an ever-expanding array of media, devices and tools with which to engage end users through websites, apps and social media, we are no longer simply making sites look pretty on desktop computers. Companies need to understand that, these days, a website is just one means by which a full story is communicated to the people. We (nerds that is) must, therefore, stay attuned to how story translates and is experienced across all media and on all devices.
Just as a storyteller has to adjust a story depending on whether they are speaking or writing, whether they are addressing children or adults and whether their time is finite or unlimited, we need to adapt our digital story experience to a multitude of considerations, such as the medium (digital, print), and the audience (demographics, desktop or mobile). The concept of responsive design was developed to make websites adjust to various devices and screen resolutions.
My personal take on this subject is that the main element of responsive storytelling is cross-channel experience design, which is the process of designing for all touch points that a person has with a business, regardless of the channel. You have to design and develop a site-chameleon, which transforms across all platforms and browsers. The most important thing is that access to the necessary information will be easy and the overall involvement enjoyable. Why bother? Because customers do think about your company across time, touch points and experiences. The goal is not to design for the screen, technology or channel, but rather to design for a positive user experience.
That’s great and all, but exactly HOW do we achieve that result? You have to remember that responsive design is NOT a single piece of technology, but rather a collection of techniques and ideas that work until something better comes along.
The first key idea behind responsive design is the usage of what’s known as a fluid grid. Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another. When one considers the huge number of screen resolutions present in today’s market, the benefit of liquid layouts is far too great to ignore.
The second part of responsive design is CSS3 media queries, which currently has decent support across many modern browsers (IE is of course the outsider). If you’re not familiar with CSS3 media queries, they simply allow you to gather data about the site visitor and use it to conditionally apply CSS styles, depending on a browser, device screen resolution, orientation of the device etc. For this entry, we’re primarily interested in the min-width media feature, which allows for specification of CSS styles if the browser window drops below a particular width.
Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I usually try to utilize are as follows:
These are just recommended, and should serve as a starting point. In an ideal world, you would have to adjust your layout to perfectly match every single device width, which is seemingly impossible (or at the very least would take a lot of time).
I’ll leave it at that, but at the end I just would like to point out a very helpful tool for testing responsive sites fast! A simple bookmarklet that does wonders!