The multi-resolution philosophy is back. Thanks in large part, if not all of it, to smartphones. Everywhere you turn today talk about the web from every discipline seems to start and end with the mobile experience. I suppose it’s only natural then, with mobile internet use on the rise (and you can get those stats anywhere), that businesses and institutions are asking their sites to be mobile-ready. The ebook Responsive Web Design, by Ethan Marcotte, explores the making of a responsive site, or a site that adapts automatically to every screen size using CSS coding, in which media queries play a big role.
Overall thoughts
We design for the web, first and foremost. So in spite of the multitude of resolutions, and now more than ever the differences are tremendous, we must face the constraints head-on. The web is about multiple screens. Our designs should therefore cater to a multiplicity of views.
For those who can remember, back before 2000 we were struggling to fit websites into resolutions of 640×480, 800×600, 1024×768, and on a rare occasion 1280×960. Navigators played by their own rules, which required tons of extra code, sometimes comprimising performance, just to avoid «the white space problem» that clients disliked so much. But you could adapt the site to each screen. By properly aligning your tables using percentages, everything was possible, and above all everything was responsive!
Then sometime after 2000, web designers forced their hand, probably out of financial necessity (or laziness depending on your perspective), and started optimising for 1024. Just 1024. The dwinding percentage of 800×600 users justified in designing for the larger screen, and above all with a fixed width (972 pixels, if memory serves me well). For those who came from a paper world, it was a triumph. We could dictate what the canvas was, and too bad if you didn’t have the latest screen. And if you had a larger resolution, we just centered the baby, and added a nifty background. Problem solved!
Now over the last few years, all of sudden we’re back to multiple screens, and designers (some of them in any case) are in perpetual angst to once again fit it all in nice and neat, whatever the resolution. CSS3 responsive design is more advanced than your html 4.1 tables, granted. The question is, with the designs we do, because of responsive design, are we setting up a different type of canvas where the constraints are more subtle, but nevertheless, do impact our choices on layout?
The jury is still out, but if you don’t want to necessarily choose a responsive behavior, you still need to adapt the site to mobile one way or another. Which may not necessarily mean more templates, but the database has to be adaptive from the beginning. This entails redundant fields to express titles or chapters or even bodies of text differently according to the device. We call it Optimise Everywhere Everytime (OEE).
Back to Ethan, he says that «responsive web design is [one] possible solution, a way to more fully design for the web’s inherent flexibility.» It’s the «inherent flexibility» that we must understand, and it’s why having a multi-resolution philosophy with everything we do on the web is crucial. Because that is what the web is about. Print is dead. Let’s embrace diversity in our canvases.
Of course, it is very much about layout. Ethan though again puts it in perspective where «a flexible layout is better prepared for devices that haven’t yet launched» and we should therefore «step back from targeting individual resolutions, and better prepare our designs for devices that haven’t even been imagined yet.»
What does it all mean
OEE or being able to optimise a website to any given device, including those that do not yet exist, is a noble ambition indeed. But as we’ve experimented with responsive and adaptive creations, we come to realise (or rather confirm) more and more that content should be dictating the appropiate layout at all times. Once we understand the strategy behind a given project, we can make the right choices and not only ensure OEE, but also ensure powerful designs based on user driven objectives.
Publishing info
Title of book: Responsive Web Design
Author: Ethan Marcotte
Date of initial publication: 2011
Publisher: A Book Apart
Where you can buy it: abookapart.com
