By Matty Collins
November 01, 2011
Web Design,Technical
We now have more devices and input modes then we have ever had to consider before. We need to think about how our websites will respond to desktops, smart phones, iPads, kindles, netbooks and fridges with computers built in them. Don’t laugh, you know you want one.
The future of refrigeration, and your website.
Responsive web designs are future proof. This is because responsive web design is built on fluid grid systems that adapt to the user’s device. It uses media queries to pull on different style sheets dependent on the user’s window style and resolution. Design should responsively react and switch resolution, screen size and orientation.
When do we start?
Ideally, I think on January 9 2007, when the first iPhone was announced would have been a nice time to start building with responsive web design.
The idea of building all websites moving forward using fluid grids, flexible images and media queries is all fantastic, but most of our sites were not. All in good time.
In the meanwhile adaptive web design is about adopting already existing websites for specific devices. It’s not as fluid or flexible, but we can make media queries smarter and increase our usability this way.
picture from www.css-tricks.com
Herein lays the difference between adaptive web design and responsive web design. Adaptive is about working with your desktop optimised website to allow it to work on other devices. Responsive has no home, it will work on any resolution and screen, and optimise for each.
Why are we doing this?
The stats are all saying that by 2013, if not sooner, mobile phone use will outstrip desktop web use1. Users are accessing the web via iPads on their couch more before getting up to grab the laptop, or god forbid move altogether to the desktop.
Flexible grid systems make no assumptions about browser widths, in this lay their beauty. Column widths adapt to available screen space. It’s a build-once have multiple-access kinda philosophy that was first coined by Ethan Macotte. He first wrote a blog about it in May 2010, and since produced a book on the same topic.
The basis of it all is in the flexible grids: they adapt to all screen resolution, keep proportions, use percentages instead of fixed units and allow you to easily test by resizing your browser. Really, they sell themselves.
Marcotte was the first to start using the word responsive, but there are some important linkages here to the mobile-first and content-first lines of thought. By designing your mobile site first you’re forced to really think about what the user will be doing and what the main goals are.
Similarly, by focussing on responsive web design it forces you to prioritise content, potentially cull and get to the guts of your key goals faster. The most important data and actions will come to the surface, and are more often than not a good place to start. And after all, good user experience is good for business.
How?
So, how to get your site from this:
To any of these:
You can view a gallery showcasing a range of responsive web designs here.
As said by the man who got this whole responsive web design ball rolling, the three areas to look at:
- Fluid grids
- Flexible images
- Media queries
I’ve already spoken about the merits of flexible grids. There are now some very handy online fluid grid calculators online. You give the calculator the number of columns you want your grid system to have, how wide you want one of those columns to be and, finally, how wide you want the gaps between each column (gutters) to be. The script then gives you a full stylesheet which you can download.
Flexible images and media queries are a large part of the design process, the aim being to produce dramatically different image sizes at varied resolutions depending on your device.
To get you started, here are some bloggers who are happily passing along their hard worked on code:
- You can read a great tutorial blog from the Filament Group on context-aware image sizing here. The code will allow developers to start with a mobile optimised image in their html and specify a larger size to use for other devices and screen sizes – without uploading both.
- Retaining aspect ratio by using percentages instead of fixed pixel widths is also a neat fix, pixel acres provides some simple code here using a padding bottom.
- And Ethan Marcotte, aka the Unstoppable Ninja has some code for when smaller images render smaller then they should be.
Last thoughts
This really is about future proofing. The idea that you may need two websites, one optimised for the desktop and one for smart phones, is well over. It’s not an overnight transition, but having websites that respond to their environment, instead of being built as the environment develops, makes a lot of sense, and for a much more usable design.
References
- Gartner: Mobile To Outpace Desktop Web By 2013, Mark Walsh, Online Media Daily http://www.mediapost.com/publications/article/120590/
Further reading: