Responsive Design is an Ethos

One design for every device.

Responsive web design isn’t merely a method for creating mobile sites with media queries. In fact, it’s about not having a separate mobile website at all. The whole point of a responsive approach is to create a single design that can flow into any size container.

Here’s my thesis: The ideal responsive design is a single-column, portrait layout with a maximum width of 800 pixels. No layout shifting, no desktop breakpoint, no hiding things on small screens.

Consider the following…

• Single-column layouts are pretty much your only option on small screens. Anything you want to do with your website HAS to work in a single-column layout or it doesn’t work for mobile.
• Many users visit the same sites on multiple devices throughout the day. The more consistent your design is across those devices, the less friction you’ll cause for those users.
• When it comes to hiding sidebars and other elements across breakpoints, the same logic applies. Everybody deserves the full site experience on any device they choose to use.
• The things that make a good touchscreen experience (large targets, readable text, vertical scrolling) also make a good desktop experience. The same can’t be said the other way around.
• Most screen fonts are easiest to read at 14pt-16pt with a line length no greater than 600-700 pixels.

Put all that together and you’ve got a single-column, mobile-first mandate.

Medium is an excellent case study: Nice, readable font sizes. Single-column layouts that stop around 700 pixels. No sidebars, just comfortable margins on wide screens. You can’t post on your phone, but the user experience is otherwise identical on every device.

Violating the mandate causes problems…

• Here’s what happens when you allow excessive line lengths.
• Check out this awkward and inconsistent sidebar layout.

Of course, people use sidebars for reasons and those reasons can’t just be ignored. It usually comes down to merchandising content or reducing bounce rates, but there are perfectly good alternatives that work great in single-column layouts.

In my experience, a responsive design goes awry when people forget about small screens and start making decisions based on wide screens. It’s hard to abandon the tried-and-true, but your users aren’t browsing the web the same way they did in 2010 and, if you can’t embrace the responsive ethos, they’ll abandon you.