Responsive web design has become a familiar part of our industry over the last few years. Like it or loathe it, at least we all know what it means. However, that doesn’t mean that the average non-developer or non-designer knows what it means. I have been working on a lot of responsive sites recently and I have found that even technically minded clients who have been fully involved in the design process can get the wrong end of the stick with responsive design. So here are a few important concepts I need to get better at explaining.
There is only one website
We sell responsive web design as an explicitly mobile- and tablet-friendly approach. Unfortunately, this can sometimes give the impression that there are separate “versions” of the site for different devices. Static visuals produced in Photoshop can reinforce this misconception. (Yes, I know about designing in the browser. We’ll get there one day.)
Clients have commented on the appearance of the “tablet version” or asked why they can’t view the “desktop site” on their phone. Therefore, the first big idea we need to get right is that there is only one website. This is really important; it is perhaps the biggest advantage of using responsive design in the first place. A responsive site is one that works on all devices and changes its appearance according to the size of the screen.
It is not a compromise
I have also noticed some clients think of a responsive site as a compromised version in contrast a “full size” site for “real computers”. This is probably most true of people who only use the web on a desktop computer and don’t have a lot of experience of small screens and touch interfaces. But responsive design is not a limited second choice; in fact it adds a whole range of new design possibilities.
Not least among these is a wider website—responsive design means we are no longer constrained to that 960 px column and we can fill a 27 in monitor with whatever we want. Responsive design should be your first choice, not just because it supports a wider range of devices, but because it gives you greater freedom of design and encourages faster, leaner, more usable websites.
Screen size != download speed
Screen size is not a measure of download speed. Big screens can have slow internet connections and small screens can have fast internet connections. Perhaps you are using your laptop tethered to a 3G phone in the middle of nowhere. It can happen. This can be difficult to explain to a client who spends most of their day in front of a desktop computer with fibre broadband, but it is an important point. We can’t just throw in more high resolution images and animations just because the screen is larger. We have to think about performance no matter what size device you are using.
Screen size != input method
Screen size is also a poor indicator of input method. Clients love hover menus (is that just our clients?) and often assume they are fine on larger screen sizes even after you have explained why they are unsuitable for phones. But touch screens come in all shapes and sizes, even on PCs. Don’t assume every desktop user prefers a mouse. Similarly, a narrow browser window doesn’t automatically mean a touchscreen phone—it might be a narrow window on a desktop—so don’t rely on swipe gestures either.
When you are showing examples of responsive design to a client, it is easy to give the impression that you start with a wide design, you make a browser window narrower, and you get the content squashed into a single column. And this impression might actually be true. You can build a responsive site that way. However, a lot of people, myself included, think about it the other way around: you start with a minimal site on a small screen and you add more bits in as the screen gets bigger.
Thinking about the site like this means you focus on the most important content, the easiest navigation options, and the clearest overall structure. Perhaps this isn’t entirely a misconception, but it is a choice you make with a client early on and it can really help keep a site focused and accessible.
This post is really about my own failures of communication. Making sure a client is properly informed at the start of a project avoids a lot of awkward questions and misunderstandings later on. Responsive web design can feel more difficult and more restrictive to clients who are used to static, print-like designs. But all the things that make a good responsive site—progressive enhancement, a focus on content, clear navigation, accessibility, and fast loading times—are simply the things we should have been doing all along. It is really important to explain this early on to make sure your clients get the most out a responsive site.