Mobile: Venturing Into Responsive Design

Due to the heavy snow in Europe these days, I ended up stuck in Amsterdam airport for a flight connecting to Tanzania. This was the perfect opportunity to get my hands dirty with something I had been fascinated by for quite a while: responsive design.

A couple of weeks ago, I summarized a few thoughts on mobile web apps vs native apps. Responsive web design is one approach to making mobile web apps and web sites.

In short, responsive design is essentially a way to make your website’s design fit across all sorts of screen sizes. When implemented well, your design will be able to seamlessly scale up and down, fitting whatever screen it is displayed on. In other words, your website will work on desktop computers, netbooks, tablets and smartphones, all at the same time. You don’t serve up different versions of the same website to your visitors, you just change styles to fit different screens. A List Apart has written a nice in-depth article about responsive design which serves as a good introduction to the concept.

Making Baymard.com Responsive

So, back in Amsterdam airport, I’m sitting there, with 4 hours to takeoff. Better get my hands dirty soon!

Luckily, Baymard.com is a fairly simple website: simple content mix, simple user-centered design, fairly clean code. I opted for a semi-fluid solution, that after a certain threshold (767 pixels wide), would collapse the two column layout to a single-column: header first, then the article/page content, followed by the sidebar at the bottom.

Only 2 hours later I had done some initial testing and had the basic layout scaling up and down nicely. Now it was just a matter of tweaking: making inline images scale nicely, scaling the logo down to a more appropriate size for smaller screens, removing a call-to-action from the sidebar, making hit-areas slightly bigger, and so on.

Thoughts on Designing for Smaller Screens

In my little experiment, I quickly identified 3 things to be aware of when designing fully fledged websites for small screens.

1) Single-Column Layout

One of the big hurdles in designing for truly small screens, is that at some point the only viable solution for content is to present it in a single-column layout. Typically on the iPhone and other devices of similar size. This results in a totally different context for your content. Previously you might have presented your page’s content and then next to it presented some navigational links or actions in a sidebar, but you can’t do that in a single-column layout.

You could of course put the sidebar content at the top of the page, but then your visitors won’t be able to see any of the page’s actual content without scrolling first. In our case the articles are by far the most important so I decided to put the sidebar below the page content. This will of course differ from site to site, but whether to put page content or sidebar content first, is definitely a very important decision that you’re forced to make when scaling down to a one-column layout.

2) Big Fingers + Small Screen = Horrible Precision

Since most of today’s truly Internet-capable devices with small screens are smartphones with a touch screen, it’s crucial to design your website to be used by big, greasy fingers (the greasy part doesn’t really matter, but it’s definitely true). This means all the links and buttons on your site – anything that should be clicked – must be scaled up so the hit area can be easily touched with few errors.

However, increasing the hit area of your links in an elegant way isn’t always an easy task. I didn’t have time to do a lot of tweaking on this, and as a result, only a couple of the links on our site are easy to “click” on a touch phone.

3) Scaling Content

It makes sense to go with a dynamic-width layout to get the most out of the small screen. So after a certain threshold, your otherwise fixed design turns fluid so your content will flow from one side of the screen to the other, giving that nice screen-filling experience on the mobile device.

Something else you’ll quickly struggle with is images. Scaling down images can be a pain unless your design follows some very strict rules. The images that take up the entire width of your page content can simply be scaled down like the text – flowing from the left edge of the screen to the right edge. This will look really great, but for inline images with text wrapped around them, the solution can be a bit trickier. In practice you quickly end up with a very complex set of rules which is difficult to wrap your head around and even more difficult to enforce technically.

I don’t have any truly good solution for this. Try going down a few different paths and see how your design looks on a few devices. Do the images wrap the text nicely? The most simple solution I could think of for inline images is to remove the text wrapping when the screen size reaches a certain threshold and then let all images be on their own line, centered and never wider than the screen size. This does, however, mean no beautiful text wrapping and the separation of text and image will be stronger.

Try it Yourself

I’ve launched the result here on Baymard, so you can try it out yourself by resizing your browser window (if you’re reading this in an RSS reader or your e-mail client, point your browser here first), or perhaps even more appropriate: visit baymard.com on your smartphone.