---
title: Lazy Man's Responsive Design
teaser:
tags: design
author: Dan Croak
published_on: 2011-09-21
---

The Boston Globe recently [raised the bar for responsive web
design](http://www.boston.com/video/viral_page/?/services/player/bcpid524210116001&bckey=AQ~~,AAAAAA6piHY~,DqRT40XOAr9jkWbCBtNTdqFmgcxGg-V0&bctid=1150525821001).

Please allow me to lower it.

For our [playbook](http://playbook.thoughtbot.com), I wanted to provide a
pleasant reading experience for desktop and mobile web browsers. However, I'm
lazy.

My answer to "what's the simplest thing that could possibly work?" was a
single-column layout with a maximum width that would also fit mobile devices:

    margin: 0 auto;
    max-width: 480px;

That makes the [User
experience](http://playbook.thoughtbot.com/understanding-design/user-experience/)
section look like this on a desktop...

![Desktop width](http://media.tumblr.com/tumblr_lruw7iLa1y1qz5x9p.png)

... and like this on an iPhone...

![Mobile width](http://media.tumblr.com/tumblr_lrvnt0bVK11qz5x9p.png)

![More mobile width](http://media.tumblr.com/tumblr_lrvnt471Yx1qz5x9p.png)

No media queries or other additional resizing tricks except for messing with
the viewport a little and hiding the browser bar when possible:

It also means fewer conditional statements, which [we aim to
eliminate](https://thoughtbot.com/blog/post/159808605/coding-without-ifs).

[max-width isn't supported in
IE6](http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx#positioning)
but [we don't support
IE6](http://playbook.thoughtbot.com/choosing-platforms/web-apps/).

Responsive web design is already very elegant in its simplicity. My thought is
that for **use cases like landing pages and content sites**, it can be even
simpler using a thin, vertical one-column layout.

I've heard [landing pages convert
better](http://www.copyblogger.com/keep-it-simple-stupid-applies-to-your-landing-pages-too/)
using a vertical, single-column layout. The premise is anything that distracts
the user, including navigational elements and sidebars, will hurt conversion.

For the playbook, the **average time on the site is 4:40**. So, I'm feeling
pretty good that the layout is working well to focus readers on the content.

My guess is other content sites like [McSweeney's Internet
Tendency](http://www.mcsweeneys.net/articles/a-screenwriter-wonders-how-the-hell-hes-going-to-come-up-with-an-original-plot-for-a-new-episode-of-law-order-svu)
do similarly well keeping its readers engaged on their 400px-wide desktop
version:

![McSweeney's layout](http://media.tumblr.com/tumblr_lrvr3m7yWx1qz5x9p.png)

With the addition of one line of code...

    <meta name="viewport" content="width=device-width">

...they could make their mobile web version immediately readable without
zooming instead of presenting a garish request to download software for
"optimized" reading:

![McSweeney](http://media.tumblr.com/tumblr_lrvsgzW7qM1qz5x9p.png)

It's so easy, even a lazy man can do it.