A few weeks ago I sent a link to our mailing list that discussed what responsive design means. After I received many comments and questions, I decided to expand on the topic. This is my personal —as in, not official— perspective, and I’d be more than happy to receive feedback and discuss with readers.

First of all, I believe that from now on every website we design at Base should provide a compelling experience on every device, including at the very least desktop and mobile. More so, the interactive design for mobile/touch devices should not be an afterthought, but a central focus, even the main focus in some cases. A website that only works on desktop computers is no longer useful.

To be able to do that, we have two options. The usual approach (Option A) is to design twice (or three times if a tablet design is included), one full and exclusive design per device. This is quite inefficient, expensive, prone to mistakes, and tends to fragment the user experience. On top of that, our clients often don’t understand how important it is to be present on all devices and therefore can’t justify the added expense. A better approach (Option B), is what we call the ‘responsive’ approach. This idea became possible with the introduction of the newer versions of html (5) and css (3), the meat and potatoes of the internet, together with some javascript-based libraries (eg. modernizr) that make it easy to detect on the fly which device is being used, modifying a website’s look and behavior depending on the characteristics of each device. This allows one design, with slight variations, to adapt to the needs of each device. This path is not only the most cost effective, but also the smartest in terms of economy of resources and coherency. Unless the mobile and desktop websites serve different purposes, we should always deliver a site that responsively displays the content in a format that is appropriate for each device.

One design. One development. One size fits all.

So, what is responsive web design?

Many of you might already be familiar with the term, but for those who are not, here is a brief introduction. A responsive website is much like any other website, but it has been designed and programmed with certain filters that makes it look and behave differently based on the user’s device capabilities and screen size. The changes can range from simply adjusting the font size, to modifying the amount of columns of content. Changing the button and menu organization, to partially modifying the interaction in order to acknowledge user gestures on touch devices and rollovers on mouse-based interfaces. For instance, if we take a simple website with a main content area and a side navigation menu, we could consider moving the menu to the top on mobile devices given the narrow and tall nature of mobile screens. Or, if we reveal information via rollover on a desktop, we could use a swiping gesture to show the same content on a touch device.

How do we design for responsive-ness?

There is no easy answer to this question, but here is a list of 10 tips that will help you design better responsive websites:

1/ Don’t be a control freak
And this applies to everything web. A good web design is able to adapt nicely to different conditions. Make the design as flexible as possible. It doesn’t mean it has to be messy, but let go of some pixel-perfectionism to allow the site to behave better in varying conditions.

2/ Think on percentages not pixels
As designers, we were trained to think in inches/centimeters/points for the physical stuff, and pixels for screen-based stuff. Forget that. Fluid layouts change with the screen width, so everything grows or shrinks with the window size. Think about how it will change in the different conditions and design for that.

3/ The way things happen is just as important as how things looks (if not more important)
This also applies to interactive design in general, but it has become critical with touch devices. The screen real estate on a touch device is very limited, while its touch interface is very powerful. Gestures like swipe, pinch, slide, etc have become natural movements for modern users as they become comfortable with their mobile devices. Therefore, actions become much more important than buttons. This generates cleaner visual designs and more successful user experiences. You could design, for example, an action that uses a button for a desktop, but on a touch device it becomes a gesture, eliminating the button’s necessity.

4/ Rollovers or Gestures
If you have designed websites, it is very likely that you used fancy rollovers to keep your design clean and simple. Touch devices don’t know anything about rollovers. Instead, they know a lot about gestures. So you have two alternatives. A: Design rollovers for mouse-based and display everything on mobile. B: Design rollovers for mouse-based and gesture equivalents for touch. C: Don’t use rollovers (that’s 3, but the third option is too easy and boring, so try to avoid it).

5/ Learn some basics

Every website* is basically an accumulation of stacked up boxes. Even if you aren’t a full on developer, if you’re designing for the web you should learn a little bit about how it works; the goods and the bads. If you design with some of these notions in mind, you will be able to create more flexible websites and make life easier for the developers you are working with.

6/ Comps are not enough.
When you’re handing in your design to the developers, you will have to design and deliver the comps for the website. But more importantly, you will have to document how you want things to happen. You can have a hundred meetings with the developer, but the only way for a proper execution of your design will be to document the requirements. This again applies to everything, but is especially critical for responsive websites. For simple sites, you can deliver a basic list specifying what happens when, using exisiting sites as reference points. For more complex websites or web apps, you will want to create a prototype, a functional demo of the site/application. There some things that you just can’t explain with words or static images… or would be far too painful for developers to read.

7/ Prototype!
Spending time on building a working prototype of your website can seem like a waste of time, but in most of cases it will save you time and money. There are many prototyping tools that vary on specificity and functionality. Some examples include Keynote (not strictly prototyping but often used for it), balsamiq, omnigraffle, axure and HTML. Yes, html. More and more people are beginning to think prototypes should be done in code within a browser.

8/ Who is doing the programming?
This is a big one. Choosing your developer is like choosing a printer in 1700 (or, well… today). There are all kinds of options. Choose wisely. It will define the quality of your work. The rule of thumb is that you get what you pay for. Cheap web development will get you a cheap result. If you’re investing in a good printer, you should invest in good developers. If possible, work with them, and make yourself available to discuss details.

And, again, as with print, if for whatever reason you need to work with a cheap developer (or team), keep things simple. Don’t try to do the fancy stuff. And give very, very specific instructions or, even better… prototypes.

9/ Present your design in context.
When you’re presenting the design to the client, you should always show it in context. Show it on a browser screen, in an iPad, in an iPhone. Try to show at least a couple different sizes, and explain, or show, how it will behave differently. Don’t trust that the client can imagine it. It can get you into trouble later.

10/ Don’t stop at delivery.
Development is a critical part of the web design process. Make sure you test the site on every platform and relay good, informed and precise feedback to the developers. They want the site to be just as great as you do. Try to be as precise as possible with how you want the interaction to be. If necessary, make new mock ups to clarify. And make sure the client is on-board. Work with them as they learn how to maintain their site and help them understand the complexities. Most people underestimate the amount of work that is required to maintain a blog with consistent and interesting content. Even keeping a simple portoflio up-to-date can be a challenge. A very nicely designed website is worthless if it is empty and/or filled with crappy content.

That’s it. I hope it helps.

Links:

Information
responsive.ca, a good first introduction to it.
RG/A blog on responsive design
mediaqueri.es gallery of responsive websites

Tools
Photoshop grid for responsive web design
matt kersley’s responsive test to check how a site looks in different screen proportions
responsive.is another testing site
responsive code patterns
responsive typography basics

* Not EVERY site, but most of them. Exceptions are those done in Flash, or the the ones done with paper, THREE, D3 processing.js and the like, that use one single canvas element and draw stuff into it.