There’s more to responsive web design than * { width: 100%; }

Responsive web design – buzzword (buzzphrase?) of the moment within the web design community, you can’t escape it. It’s a concept that has even infiltrated sites not specific to web design, with some hilariously misguided consequences.

It’s become a well-established concept within the design community (it recently turned two years old!), and I think it has outgrown the novel-new-concept phase of it’s life. Since The Boston Globe, we are starting to see a few more larger corporate sites adopting responsive web design – such as Starbucks, Barack Obama and Sony (the last two are ‘adaptive’ layouts technically, but you get the point).

Although there are still unresolved issues regarding implementation, it has become commonplace for new or redesigned sites to now be responsive, and I am personally no longer surprised to find one out in the wild, I almost expect it of new sites, in fact.

Remember why we are doing this

So this is good, right? Yes it is. But personally I feel that quite a few sites are prioritising going responsive for the sake of going responsive, rather than in an attempt to improve user experience. Responsive design shouldn’t simply be a case of adapting the layout of a desktop site to fit a mobile device, or vice versa, it is an opportunity to create a new, bespoke user experiences at various viewport sizes, and the layout/user interface for each breakpoint of a responsive design should capitalise on this.

By this I mean really thinking about how the design will change across screen sizes, planning and designing accordingly for each breakpoint, and not being satisfied with simply inlining all content, unless the design specifically calls for it. Treat each breakpoint as a new design opportunity, don’t simply shoehorn the designs from one breakpoint to the next.

Touch targets

The recommendations for touch target dimensions vary across devices, but never exceed more than around 50px by 50px, and yet I regularly see responsive sites that have 100% width inline navigation at around 500px wide, or even wider. Scrolling may be easy on touch devices, and users might not mind doing it, but that doesn’t mean they like doing it! Smaller screens mean page real estate is even more important, so don’t be quick to give it away to huge buttons or lists.

Make it worthwhile

I was recently looking in to the suitability of converting the King’s site in to a responsive design, and had a look through stats for the past year, where I was pretty astonished to see that of our ‘mobile’ users, a whopping 83% were on iOS devices, a figure like that leaves it very difficult to not design with these devices specifically in mind.

Around the same time I had come across a newly-released responsive site for a very reputable design agency – it looked great at a ‘desktop’ width, and was fluid until about 800px wide, where it hit it’s first breakpoint, then proceeding to switch all content to inline, 100% width – and didn’t adapt again. A single breakpoint for a site with this much content really surprised me, it looked great at ‘desktop’ (>1000px) and ‘mobile’ (<400px) widths, but everything in between just looked a little half-baked to me.

And this got me thinking – bearing in mind 83% of King’s users would be on an iOS device, and knowing how well iOS devices handle sites that aren’t responsive, would simply adding one breakpoint like this really benefit our users? If a user was on an iPad, would they rather have to zoom to read content, or have to scroll every page before even getting to the content?

The point I am trying to make is that if you are going to create a responsive design, make sure you are really trying to improve the user experience, make sure it is really adding value, don’t think that just because the user doesn’t have to pinch-zoom the design is automatically better.

Get creative

Without sounding like a complete buzzkill, I also think that to some extent there is a bit of a lack of creativity with current responsive sites. Even if the site you’re working on only has three navigation items, think outside of the box, create something new, different, innovative! Ultimately, if larger commercial sites are going to get on board with responsive design then we need to demonstrate that this design strategy can handle their huge information architectures, and width: 100% on every navigation item certainly isn’t going to cut it, so try something different.

Brad Frost has put together a great roundup of responsive navigation approaches to give you an idea of what’s already out there, and for a breakdown of common layout patterns see this article by Luke Wroblewski.

In terms of navigation, I’ve actually been most impressed by the Sony approach – this feels the most like a native application to me, and manages to organise a large, multi-level navigation very well. Although I have only managed to test on an iPhone 4S – I suspect performance may be significantly worse on less powerful devices.

And remember that the difference in devices isn’t just screen size – think touch events, device specific capabilities etc.

The future

So responsive design has been around for a while now, we have all had a go at it and proven that we can do it, but I think there is so much more to come, in fact I think the majority of current sites are only scratching the surface of what we can potentially achieve.

My vision for the future of responsive design (as far as aesthetics go) is UI at each breakpoint that makes you think you’re in a native app. I want to visit a responsive site, on any given device, and think this is the device this site was made for, rather than the familiar feeling of oh, inline navigation, this must be a responsive site. It’s not beyond our current capabilities, it is just more work, so come on people, let’s make it happen!