Last time they had a website redesign, Pluto was still a planet. Standard design practice at the time meant designing for desktop computers, and if some poor soul out there was trying to view the site on any other kind of device, well, they were just lucky they could see it at all.
Things are a little different today. Mobile is the buzzword of the industry, and now websites are built for desktops, laptops, tablets, and smartphones. iPads and iPad Minis. iPhones and Android phones. At minimum, you’ll need your site optimized for six different screens (480, 600, 840, 960, 1,280, and 1,440 pixels in width).
It can be tricky to explain that to the client above (who probably hasn’t worked with a web designer since Britney Spears was still married to Kevin Federline). Last time they dealt with one wireframe. One template. One final, static design.
Today, a client may come to you knowing their website is a hot mess, that it’s totally out of date and that nobody can use it properly on their phones. But that doesn’t mean they understand what’s really going to be different about the design process. As you dive into their project, you may find yourself hitting roadblock after roadblock as you pause to explain why you’re doing this, that, or the other thing, why that is taking so long, why this is necessary.
Your client knows their website is a hot mess; that doesn’t mean they understand how responsive design can help fix it.
You’re an expert in this stuff; your client isn’t, and they don’t want to be.
The best way to head these problems off before they start is to explain to your client the differences in “the old way” and the way you’ll be doing things on their new, state-of-the-art website. The trick is to make it simple (but not condescending) and quick, but still clearly convey the important points — and to help the client not feel trepidatious but excited about their slick new website!
Adaptive or Responsive?
The titles Adaptive (or AWD) and Responsive have been around for awhile, and the meanings have been used interchangeably. Chances are pretty good your old-school clients who aren’t familiar with web design may have heard one or both of these phrases, and may have some vague idea of what they want, but that doesn’t necessarily mean they fully grasp the concepts.
Garrett Goodman of the Huffington Post broke it down this way:
Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window.
Adaptive design is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the attributes of the device, and loads a version of the site that is optimized for its dimensions and native features.
In other words, with responsive design, the device itself is doing the work of adjusting the display on the fly; whereas in adaptive design, the server does the work, choosing the most appropriate design to deliver to each specific device.
Responsive design involves just one batch of HTML, with tweaks to the CSS that allow it to adjust the layout to the screen.
Adaptive design, on the other hand, is when the server hosting the website recognizes the device making requests to it, and delivers different batches of HTML and CSS code based on that screen’s dimensions.
Image courtesy of The Next Web.
Rindle.com is built using responsive design. Go ahead and open it in a new window. You can see responsive design in action by dragging the corner of your browser window to make it bigger or smaller. You’ll notice the content shrinking until a certain point (the breakpoint), and then automatically reorganizing itself to better fit the new width. Responsive-designed websites generally use several breakpoints and a fluid grid to allow for a number of different sizes, without having to write different HTML code for each.
Which is better?
The real answer isn’t very helpful: it depends. There are a number of factors to consider, and if you’re a working designer you’re probably aware of them. In general, it’s good for brand new sites to be built using responsive design. Responsive design will lay a foundation that is adaptable and can easily change as new technology and new devices are invented, without having to write new batches of code every time.
An existing site, however, like your old-school client’s site, might benefit from adaptive design. This is because the site already exists and adaptive design has the ability to retrofit an existing design.
That said, even an existing website might be a good candidate for a whole new responsive design. If your client is willing to make the investment, there are definite arguments for a total rebuild. Point out that an adaptive design will require more developer work in the future, as modifications will mean multiple updates across different batches of code, and new devices will require entirely new templates and code. Whereas with responsive design, only minor tweaks to the CSS are required and the same HTML can generally keep on ticking.
But the most important consideration, as with any design element: what does the audience need?
Know your client’s audience
Who will be viewing this site? Who does your client want to be viewing it? Why are they viewing it? From where and on what kind of device? Do their reasons for visitings and their goals change depending upon the device they use?
A doctor’s office, for example, might highlight services and appointments on their desktop site, and contact info on their mobile version. This would be an argument for adaptive design, because it gives you the ability to create an entirely different mobile version of the site.
On the other hand, is your client okay with having all the “versions” look different, or is consistent branding important to them? With responsive design, the same layout is used and adapts fluidly to any device.
More and more, people in general are moving towards using mobile for just about everything. It’s important to understand the audience you’re designing for and determine which of these methods best serves them.
How does this change the workflow?
Whether you and your client choose adaptive or responsive design will affect the overall project and workflow in some ways, and both will differ greatly from the process they experienced a decade ago.
With an adaptive site, you will need to design different layouts for each device, and developers will be required to develop and maintain separate HTML and CSS for each individual layout. Going forward, modifying an adaptive site will require modifications to be made in each of those places, for consistency across devices.
Responsive design, on the other hand, will require only one batch of HTML. Multiple layouts will be indicated in the CSS, and in most cases the code will easily adjust to new devices and technology as they comes into play.
What does it mean to the client?
What this means to your client is that they may be seeing a number of different wireframes, mockups, and prototypes, much more material than they may be used to. Explaining this process up front can help set your client’s expectations early and keep them from feeling overwhelmed.
In addition, if you practice “mobile first” design (starting from the smallest layout and working outwards to the largest), clients may question why they’re looking at iPhone layouts when you “don’t even have their website designed yet.” It is a pretty counterintuitive way to work, when you think about it, so be ready to defend that choice.
Clients may also need to be sold on moving from a static to a responsive design, if that’s the option you believe is best for their audience. Especially if it means a total rebuild, the expense and time commitment can be discouraging to somebody who just thought they wanted their outdated design “freshened up.”
You’ll need to be able to explain the benefits of responsive design, stressing how this will move their website from the past into the future, opening them up to the enormous mobile market. Design is more than visual, it’s about user experience. Demonstrate to them how much better their website will work for their users to sell them on the value of this transition.
A good tool for demonstrating responsive design to clients is UXPin, which allows you to easily create responsive design demos using just one wireframe or prototype, so the client can see their content actually responding the way it will live. This visualization can be enormously helpful to old-school clients who want to see with their own eyes what you can do for them.
At the end of the day, you’re the expert, and you know which kind of design will work best for your client’s needs. Be confident in explaining why you believe a client needs to switch to a responsive design, and deliver them a beautiful new website that will offer a vastly improved user experience, and they’ll see your work as an investment, not an expense.