This article is second in a series, following Design for the changing web: Responsive Web Design.

Approach

An example made

To a designer, there is genuine excitement in the prospect of expanding a core design to adapt and flow across dozens of new applications, subtly growing a website’s personality around centralized content. The chance to explore media queries was too compelling to turn down.

What better website to experiment on than our own? We strongly believe the web has irreversibly changed with the advent of mobile and lightweight computing. If an example is to be made, we should take the first step.

Unless you are reading this through an RSS reader (now might be a good time to click through), the results are straight in front of you.*

*IE8+, Safari 3+, Chrome, Firefox 3.5+, Opera 7+, majority of mobile browsers

Working backwards

Mobile first. Focus on the content, and expand the design with complimentary functionality.

With that in mind, it’s with slight regret to say our approach was more adaptive than planned. Significantly, the site needed conversion from a largely fixed layout to a fluid, relative design. Existing column widths were newly designated as maximum widths. Images to percentage values. While the original design always kept content at the fore, the Headshift website is complex and simply too new to consider a fresh rebuild. Instead, we examined the whole and began to question what elements could be removed in scale.

Blackberry Curve 8520

Defining the experience

What is essential? This is the key question to ask when determining the focus of your website. Every responsive design has break points; indications where size truly begins to provide guidance for expanded functionality. A flexible structure and fluid images are extremely helpful in keeping a design adaptive, but they can only reflow and resize; in time, user needs require consideration. As we began with an already complete, feature-rich website, our goal was to find which page elements held genuine value. Then, determine how they would adapt to a changing design.

We assume that a visitor to our website is, largely, focused on accomplishing one or more of the following:

• Discovering what we do
• Reading the latest blog posts
• Investigating case studies of our work

Amazon Kindle

In our review, what conclusions did we make?

• Navigation. Absolutely critical to the user experience across all viewpoints. We needed to anticipate the navigational path a user would take. Reduce horizontal navigation on smaller screens in favor of vertical positioning: respond to the top-to-bottom scrolling motion often found on touch devices and mobile handsets.
• Header. Our website has a large, colorful header image. Photography has always been an important, if unofficial, aspect of our identity. Viewing the site on a high-resolution desktop monitor, a 965x300px photograph does little to impede content. View again on a netbook or tablet, and it’s a very different story. While we can debate the idea of a newspaper fold as applied to the web, there is no denying that the image would fill nearly half the screen on smaller devices. Our conclusion was simple: while photographs aid in strengthening our identity, they should not take priority over written content. Header images are a luxury for large browser viewing.
• Homepage. The homepage has undergone perhaps the most dramatic adaptation. Clearly, the carousel is impractical for small screens. Image size, animation, and a dependency on Javascript suggest it could never scale to less capable devices. As the homepage slideshow currently provides a means of navigation into the broader sections of the website, reintroduce the ribbon navigation.
• Slideshows. The image slideshows used in displaying project images in our case studies are best experienced in a wide desktop browser. Anything less, convert the slideshow to a single image view at a healthy 100% column-width for all devices.
• Themes. Headshift Themes is our archive and record of emerging topics across the web. The site is independent; we have a few long-term updates in mind but for the near future, the experience on medium-to-small screen sizes is less than ideal. For these viewpoints, remove the link and toolbar icon leading from this site to Themes.

Apple iPhone

Development

Our development process.

1. Prototype. Adapt a section of the website to a flexible grid, add media queries and shape the design to new size dimensions.
2. Test. Push each iteration to a common, accessible staging website. Share amongst colleagues, allow for unobserved, individual testing. Encourage discussion and suggestions.
3. Listen. Create a shared collaboration space with two key operations:
   • provide a set of questions for documenting the experience, a nudge for open opinions
   • provide a chart listing various break points across browsers and devices; open fields for bug reporting
4. Refine. Consider user input and bug reports, improve the experience.
5. Repeat. Iterate, iterate, iterate.

Apple iPad

Results

Technical caveats

New web functionality often comes with quirks and compatibility issues. It shouldn’t come as a surprise that no version prior to 9.0 of Internet Explorer has native media query support. The latest versions of most modern browsers (Safari, Firefox, Chrome and Opera), however, do. This includes their mobile counterparts (Webkit, Opera Mini).

There are two scripts realistically capable of adding native support to older browsers. css3-mediaqueries.js has been in development the longest. A comparable lightweight version, respond.js is being developed by Scott Jehl and the Filament Group. It is still in very early stages and whilst the former may perform slower in Internet Explorer, it is a bit more stable and therefore a more advisable pick.

Apple’s iOS has a small but frustrating bug regarding viewport orientation and magnification level. Web developers Jeremy Keith and Shi Chuan are developing ongoing solutions to this problem (referenced here, here and here).

Samsung Galaxy S2 (Android)

Expectations

This is very much a work-in-progress. The website has undergone extensive testing across all major browsers, on the desktop, on tablet computers and a half-dozen smartphones. However, the changing design is imperfect. We will continue to test, gather feedback, and prototype until the experience is consistent in as many contexts as we find reasonable — which is to say, not until it is perfect, but rather when it best delivers content to our audience no matter their device or connection.

What can we do better? Lighten the code, certainly. The disadvantage of starting at the end and working backwards has been a legacy of existing code meant for the desktop. Additionally, we can investigate more aggressive, mobile Javascript and consider touch events.

We believe that a responsive approach to design is fundamental to the changing web. This case study is a significant step towards embracing a design philosophy that is flexible and agile. A philosophy that focuses on content first and accessibility: expanding on an already solid faith in progressive enhancement and the needs of the user. We hope this exploration moves us further towards those objectives.

Join the discussion below or contact us to start a conversation.