M&W blog #1 - Responsive Design
It all started with Responsive Web Design, an article in 2010 by Ethan Marcotte on A List Apart
. When we heard him talk in 2011 it was an epiphany. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.
Three key technical features are the heart of responsive Web design:
Media queries and media query listeners
A flexible grid-based layout that uses relative sizing
Flexible images and media, through dynamic resizing or CSS
Truly responsive Web design requires all three features to be implemented.
M&W Case Study:
The artinchocolate.ca website was created in 2009
for a large screen audience. While the artworks pictured are best viewed on a large screen, it simply did not work on smaller devices. It was also the desire of the artist to wade into the shoals of responsive design to test the waters. Our goal was to provide a website that was both adaptive to device sizes, and to create a design that was responsive to them.
How it was Laid Out:
We have been using the skeleton css grid
for the last year, and so far haven’t been disappointed. The existing screen design already gave us a great 4 column layout – and as we already work in a 16 column grid, we kept that as our base. Pixel is not like pixel on mobile devices, so we changed the pixel widths for the device width to percentage – keeping the floating remainder just in case ;o)
For the artist it was important that the existing creative remain as much as possible. Instead of the full page images, we opted for a responsive jquery slider to show some of the art works. This was turned off on smaller devices and the footer brought up to the header. Load time for larger images on mobile devices is always an issue … and we agreed with the artist that people will always check back later on their desktop or ipad for the larger images.
The artinchocolate.ca website now
scales as well on a 234 pixel Samsung as it does to a full screen desktop in landscape or portrait mode. Mobile users get the information they need for on the go – and tablet users don’t suffer a lesser website from that of a desktop user. While there are some further areas of creative development we would like to explore we’re pretty happy, and so is the artist!
Ethan Marcotte's book on Responsive Design is both accessible and thorough: http://www.abookapart.com/products/responsive-web-design
Trent Walton's work on Content Choreography is also not to be missed: http://trentwalton.com/2011/07/14/content-choreography/
If you would like to further explore content folding please check out: http://www.vanseodesign.com/web-design/responsive-layout-patterns
Other recent good examples of responsive websites can be found at:
The Boston Globe just relaunched in a responsive template – which is pretty amazing for a newspaper.
Harvard, and Lancaster – like UCSanDiego, have also relaunched in a responsive design.
Step 1: Scoping the vertical ...
Step 2: Constructing a fluid grid ...
Step 3: A responsive creative design ...
Step 4: An adaptively responsive site ...