Mobile-first, responsive web design for a site about photography

iOS simulator featuring a responsive web design example

Recently, we updated our website with some tweaks that made it accessible to mobile devices. After implementing a responsive layout, our main contents neatly adapt to the varying width of phones, tablets and desktop browsers.

With these changes we wanted to conform our site to the increasing mobile visits we´ve been observing during last few months. Considering that mobile users could represent up to 40% of our visits in some cases, we wanted to enhance the mobile experience of our site, while preserving a rich and a complex version of our content for those users with wider desktop screens. That is, the approach we decided to stick with, was to use the same HTML code and adjust contents to the width of the user device by means of CSS.

Some major ingredients of our implementation of a mobile-first, responsive web design:

Progressive enhancement

Pictures are the main piece of content in our website. When we first planned our design four years ago, we wanted our pictures to look prominent above all, and for that reason we assumed a fixed width of 1024px as an optimum way for laying out our images. In that moment, we had in mind wider screens as the best mean of appreciating our pictures. It had a big consequence that, initially, we didn´t mind to bear with: our content adapted poorly to the less capable devices. Now, if we wanted to adapt such design to smaller screens, we need to amend a CSS that has became rigid and not very functional, adding a set of scattered patches for supporting mobile screens when necessary. Instead of gracefully degrade our initial design for smaller displays, I decided to rewrite the important parts of the layout with a radical shift in my initial schema: I wanted to guarantee that basic content will be accessible for mobile devices first, and then, progressively enhance it for serving a rich experience to more capable devices, adding extra components that should be secondary in a mobile experience.

This 2008 article could be a useful resource to wrap your mind around the old motif graceful degradation vs progressive enhancement.

Mobile-first

The way users consume content in a mobile device requires us to focus on what content is essential and how to present that content as quickly as possible. It´s worth to think a bit about it when planning a responsive design. Also, it would be useful to take into account that mobile devices are something more that a width problem for your layout, rather they suppose a new range of possibilities for designing interaction. A brief article on the advantages of building mobile first.

Zen Drupal theme

Zen is a very popular framework for customizing the look and feel of the output in a site running Drupal. Since veersion 7.x-5.x, it ships with HTML5 support, mobile first and responsive design approach. It allows a nice integration with SASS & Compass, and it´s also simple, powerful and well documented. What else do you need?

If it happens that you´re building a website with Drupal and wanted to adopt a responsive design, I strongly recommend to use Zen, although there are a few other themes that are worth to explore, such as Omega and Adaptive.

Using @media queries

A pattern for implementing a mobile first approach in stylesheets takes the following form:

/*Default styles */
 
#page {  /*wrapper div around #content*/
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
 
/* Use 3 grid columns for medium displays (like mobile phones in landscape or smaller tablets) */
 
@media all and (min-width: 480px) and (max-width: 959px)  {
 
  /* Span 2 columns, starting in 2nd column from left. */
 
  .sidebar-first #content {
    float: left;
    width: 66.66667%;
    margin-left: 33.33333%;
    margin-right: -100%;
  }
 
  /* Span 1 column, starting in 1st column from left. */
 
  .sidebar-first .region-sidebar-first {
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -33.33333%;
  }
 
}
 
/* Use 5 grid columns for larger displays (like medium tablets and up) */
 
@media all and (min-width: 960px) {
 
  /* Span 4 columns, starting in 2nd column from left. */
 
  .sidebar-first #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }
 
  /* Span 1 column, starting in 1st column from left. */
 
  .sidebar-first .region-sidebar-first {
    float: left;
    width: 20%;
    margin-left: 0%;
    margin-right: -20%;
  }
 
}

In this code sample we assume an scenario where #content spans 1 column as a default case. Such a fluid width allows us to support a wide range of cases, from mobile screens up to desktop displays, where #content will expand 1200px as a maximum. It also makes easy to add breakpoints for further adapt #content width without having to modify existing styles. Breakpoints are the point where your content will change to provide a optimal presentation for a given display width. Now, let´s assume that we include one column, then, body will receive the class .sidebar-first, allowing us to style #content in that case. For devices with a display in between 480px and 959px, #content will span 66% and sidebar 33%. In cases of displays greater than 960px witdh, #content will span 80% and sidebar 20%.

Which breakpoints should I use for targeting the wide variety of devices in the market? The answer to that question is arbitrary, unless you need to target a specific device. In that case you may want to stick to its specific width. Otherwise, it could be useful to change your approach: think first on content instead of devices width. Whatever breakpoints you choose, make sure your content will look consistent and nice within and across the selected breakpoints. That is, let content determine your media queries and breakpoints. An useful overview on content-first.

Using relative units

We tried to use relative units like em and percentages as much as possible for setting typography size and width of some layout components. Here it´s a useful formula for converting pixel-based dimensions to relative units.

SASS & Compass

SASS (Syntactically Awesome Stylesheets) is a scripting language whose output is a block of CSS rules. It preprocess CSS with a set of variables, functions, "mixins", and other amazing features that will boost the time you spend on writing repetitive rules, vendor prefixes, etc. Compass is a SASS framework. It´s a collection of tools that extend the basic SASS functionality making it even more awesome. Both are very helpful for optimizing any website to a mobile device. We use these tools for things like:

  • Creating CSS image sprites to reduce HTTP requests.
  • Maintain a beautiful, consistent typographic rhythm.
  • Adapting a responsive grid through different breakpoints by only changing the value of a variable with Zengrids.
  • Building reusable patterns in our CSS.

Picture & Breakpoints drupal modules

These modules are a must to any website serving a great amount of images as a main content. They provide alternate images sources depending on device capabilities, based on a defined set of breakpoints, to prevent wasted bandwidth for limited mobile plans. They also allow image optimization for retina screens, serving an image of higher resolution in those cases.

Picture implements the new pictureHTML element as a display formatter for image fields. It depends on Breakpoints module.

Watch your JavaScript

In some cases, it´s useful to detect whether the user device has touchable capabilities. It´s a best practice to remove any behavior based on hover events, since they won´t play well with mobile devices. One way of achieving this could be as follows:

// Extend jQuery support object to check for touchable devices
jQuery.support.touch = 'ontouchend' in document;
 
if (!jQuery.support.touch) { 
 
  // Code using .hover() goes here
 
}

Alternatively, Modernizr could be very handy for detecting touchable capabilities and CSS transitions: Modernizr.touch and Modernizr.csstransitions.

Summary

A little bit late, but finally, we were aware on the importance of making a website accessible to a wide variety of devices. We wanted to craft a web experience mindful to user context and device's features. We also hope to lay solid foundations for adapting our contents to future devices and browsers, trying to approach the following essential points:

  • Use HTML5 semantics to build a solid base for a responsive site.
  • Create mobile-first CSS that keeps things simple, readable and maintainable.
  • Define media queries with a content-first approach, rather than focusing on devices.
  • Make use of relative units, like ems and percentages to increase flexibility and adaptability.
  • Reduce HTTP requests with CSS sprites and pack images to optimize bandwidth.
  • Use lightweight, unobstrusive JavaScript.

If you´re interested in learning more on Responsive Web Design, here it´s a valuable list of resources to start with.

Comments

What do you think?