I’m a big fan of Luke Wroblewski’s “mobile first” motto. The general idea is simple: design and build for a mobile site first and scale up to deal with larger form factors after you’ve established your mobile site. This approach forces you to narrow your focus immediately: The smaller canvas of mobile sites prevents you from adding any nonessential elements.
Now that a mobile-first approach has helped establish a solid, simple foundation, how do you scale up? Even though mobile sites may share the same core design challenges, automatically scaling a small site up to a large one is just as bad as resizing a desktop site down to mobile sizes. A recent user study my team conducted inside IBM reinforces this perhaps obvious finding: phone-optimized sites are frustrating to use on larger devices. After reading Ethan Marcotte‘s amazing book Responsive Web Design, I was pretty much sold that the best way to scale a mobile site up is by dynamically adapting the layout of a site based on the browser’s width. (Honestly, go buy and read the book, it’s worth it. I’ll wait right here.) I didn’t want to just arbitrarily grow or resize elements, though — I wanted to establish a predictable system that could easily determine how my site should render at bigger sizes. One powerful way to scale your site while still establishing a consistent feel is to use grid-based layout.
Grid systems provide a visual structure for your site
I was originally trained as a graphic designer and am no stranger to grid-based design. There are many contemporary CSS frameworks that make building grid-based sites a snap — 960 Grid System is a wonderful framework I’ve used in the past. One downside with many of these frameworks is that you have to assign classes like “col1 span2″ directly in the markup that may not make sense at all different sizes. An element may span 3 columns on the desktop, but only 1 column on a mobile device. One way to work around this is by using a system that allows you to separate the grid layout from your html markup, which is exactly what the Compass blueprint semantic grid framework does. With this framework you can assign grid values to existing CSS classes with no need to add any bogus “col1 span3″ classes to your markup.
I decided to use martymoo.com as a testbed for this approach of mobile-first, responsive design. I have been meaning to update martymoo.com for years. It’s a wonderful domain name that my sister gave me as a birthday present back in the late nineties, but I’ve hardly ever used it. I decided to update my portfolio site – nothing fancy, I just wanted to have a simple page where I can display a list of projects I’ve done in the past. I sketched out a few options before settling on a simple gallery: a main index page displays a list of my projects, each of which has its own detail page.
In accordance with mobile-first, I started by sketching out my gallery, a tall page that listed projects one after the other. This layout will be used with viewports that are 320 pixels wide and smaller, the width of the iPhone in portrait. Note that while I used the widths of apple’s devices as guidance for where to establish new viewport sizes, I still tested on a variety of android devices to make sure it worked well at many screen sizes. At 320 pixels and below there isn’t much of a grid to speak of. Each element spans the full width of the page with a little bit of padding, and most elements are centered.
Next, I defined my grid system for scaling up. I am very fond of the proportions in the 960 grid system, so I borrowed their 12-column, 60 pixel wide layout. Note: I started off using ems for width, but quickly became frustrated with the distortions that a fluid grid created. I may revisit this in the future, but for now I prefer fixed-pixel grid units. As the browser viewport grows, I added more columns until the maximum of 12 columns is reached:
- 320 pixels and less: single column 100% width (iphone in portrait)
- 480 pixels and less: 6 columns of 60 pixels (iphone in landscape)
- 768 pixels and less: 9 columns of 60 pixels (ipad in portrait)
- 980 pixels and less: 12 columns of 60 pixels (ipad in landscape)
Here’s what my first site wireframes looked like:
I’m really happy with the predictability that the grid layout gave this design. Despite the significant size differences, the page maintains a consistent look and feel. The site structure seamlessly adapts to however a person wants to view it – check out the final results here. I’ll write a follow-up post in the future that describes how I ultimately implemented this design.