Last week I came across the sites above and below while reading about responsive web design - an approach to front-end development which uses fluid widths, scalable images and adjustable layouts so that the same site can adapt on the fly to different screens.
The homepage above, with its heroic typography, is an example. It has the feel of a theatre poster or a vintage newspaper headline. I forget that it’s a web page. All that valuable e-real estate given over to five words! What luxury – but what impact.
The page below leaves absolutely no doubt as to its value proposition. Without actually becoming a subscriber, I surfed through the site to get a sense of the UX and the interface and it was smooth, responsive and clear as a bell. Check it out for yourself and you’ll see what I mean.
These discoveries led to an insightful blog post by developer Trent Walton, formerly a stalwart critic of but now a passionate convert to the responsive web. He compares the rigid grids used in conventional web design to the flexible ones used in responsive design. Using HTML and CSS to execute a prescribed layout works great when there’s only a single view, but in a laptop/tablet/smartphone universe, one is no longer enough.
He goes on to say responsive web design means completely redefining the way you look at the web, “using flexible grids, fluid images, and media queries to build not a page, but a network of content that can be rearranged at any screen size to best convey a message.” It’s a “matter of proportions, not pixels.” (italics mine)
Proportions! This is music to a visual communications designer’s ears. It opens the screen to the principles learned on the page, in pre-digital days, honed over centuries and brought to life in the best design of the ages. It bridges the gap between the visual design and web development processes – which have for too long been dissonant.
The beauty of this approach is that the size constraints of the mobile screen force the design to be as simple as possible. Which means that on a laptop, you get lovely, open space. These sites can breathe. So refreshing, especially for anyone who craves ‘white’ space and doesn’t see a lot of it online.
There are some limitations. Complex forms and multi-columnar tabular matter, which are not amenable to flexible widths, are a challenge. And as it’s early days for this approach, most of the available examples are built by and for designers and developers themselves. (the approach is naturally amenable to portfolio sites). But some brands – Illy Coffee and The Boston Globe come to mind – are beginning to use responsive design for other purposes.
The chief benefit here is its adaptability, which makes for a far more seamless customer experience across platforms. The fact that the mobile screen forces simplicity is a wonderful bonus. Less, in this case, is definitely more. wn
Join the conversation! I would be very interested in your thoughts. Just click on the ‘Leave a Comment’ link in the small grey type at the end of the tags listed below.