Designing and developing websites that work well on mobile devices is an important aspect of the work we do on today’s Web. This importance is reflected in the conversations I have with clients, almost all of whom list “support for mobile devices” as one of their top goals for a redesign — all except one, that is.
Late last year, I began a redesign project for a company that sells pressure-treated lumber products. Early on in our conversation, I turned to the topic of support for mobile devices and responsive Web design. Normally, this topic is met with enthusiasm, but not this time, as the client explained:
Our customers don’t use mobile phones to come to our website.
This isn’t the first time I’ve heard this comment from a potential client. I’ve had many conversations in which the company severely underestimates the number of people who access their website on a phone or other mobile device. Typically, a look at the analytics will open their eyes to the true impact that mobile is having on their website’s traffic. But when I looked at the analytics for this particular client, I was the one left in shock.
Two percent. That was how much of its traffic was coming from mobile devices at the time. That’s it!
Jumping ahead to the end of this story, I did end up working with this client to redesign their website, and that website is now fully responsive. The path we took to that point, however, provides an interesting glimpse into how we as designers can go about selling responsive websites, and when we should push for a solution that we know to be an important best practice and yet whose need is not immediately obvious.
Further Reading on SmashingMag: Link
- Involving Clients In Your Mobile Workflow1
- How Usability Testing Drastically Improved My Client’s App2
- Responsive Web Design: What It Is And How To Use It3
- Content First — Design Last4
- Client Experience Design5
Determine Whether They Actually Need A Mobile Web Experience Link
The title of this article, “Selling Responsive Web Design To Clients,” might sound like a shady salesperson attempting to convince a customer to purchase something they don’t need. That is not what I am advocating for at all. So, let me start by stating that the first step in this process should be to determine whether the client actually needs a given solution at all.
When considering a responsive design for a website that doesn’t currently support mobile devices, begin by looking at the big picture. Do the traffic figures show that the client is attracting mobile users? If the mobile traffic figures are similar to those of this client of mine, then maybe they don’t actually need a mobile Web experience at this time — especially if the website has no other issues.
If a website is currently working well for the organization — meaning that it is converting visitors, features an attractive design, and has a high-quality user experience (for desktop visitors at least), while drawing an incredibly low percentage of mobile users — then redesigning or rebuilding that website only to make it responsive wouldn’t make financial sense.
You could argue that even a small percentage of visitors getting a poor experience is unacceptable and could be resolved by developing a responsive design. The designer in me can appreciate that argument, but I also understand the business side of the situation. Undertaking a responsive redesign to accommodate just 2% of the audience will be a very tough sell, no matter what company you are speaking with. This is why you need to look beyond just the traffic figures and think about more than just the design-related benefits of responsiveness.
Try To Solve Other Problems They Are Having Link
While support for mobile devices was not a compelling enough reason for our client to redesign their website, other concerns brought them to us in the first place. Two of these concerns were the visual design of their website, which was outdated and did not reflect their current marketing, and the lack of a content management system (CMS) or any tools to enable them to update the website on their own. So, I focused my proposal on solving these problems.
A redesign would bring the look and feel of the website in line with the rest of the client’s marketing, while also improving the overall aesthetics and usability of the website itself. We would bring the website up to current standards and integrate it into a CMS (in this case, ExpressionEngine) — which would solve the second problem of being able to update the website.
As I discussed with the client this proposal and the process we would follow, I mentioned that we would make the website responsive as we rebuilt it. As expected, the client questioned whether this was necessary or added cost to the project — which, of course, it would have. The key here is that I was now able to steer the conversation towards the benefits of responsive design above and beyond the support for mobile devices.
Focus On More Than Just Phones Link
When we talk about responsive design, we often focus on phones. This makes sense because smartphones are most unlike the type of devices that we’ve designed for in the past — that is, desktop screens. Creating one website to be marketed and managed and to deliver a high-quality experience to all devices, from desktops to smartphones, is an excellent way to demonstrate the flexibility and power of responsive design. But for this client, phone users were seemingly not a factor. Luckily, responsive design is about so much more than phones.
In speaking with the client, I discovered that a complaint they often receive from customers is that the website appears “small.” The reason is that it had been designed to a fixed width many years ago — so long ago, in fact, that it was built for an 800 × 600-pixel resolution. When a user on what is now a typically large desktop screen visited the website, they saw a very narrow column, with a lot of unused space on either side. Yet, the company still had a number of other visitors on old desktops and laptops with low resolutions. So, merely making the website bigger wasn’t the right solution. The company needed a website that would work well both on large screens and on old small screens. This was a problem that could absolutely be solved by a responsive design.
Instead of focusing on phones and small screens, I explained to the client that a responsive design would enable us to effectively present a layout for today’s large desktop screens and also reflow to accommodate laptops and old desktop monitors that don’t have a high resolution.
As we demonstrated a responsive website for the client using a large desktop screen and a much smaller laptop, they got excited and told us that they had hated the “smallness” of the website for years, but their previous designer explained to them that, to support visitors with old computers, they had no choice but to design for this “lowest common denominator.”
Responsive design would solve this problem, and by this point our client was pretty much on board because they saw that it solved a problem they had (the “smallness” of the website), without addressing a problem that they didn’t think needed to be solved (support for mobile devices).
Build For The Future, Not Only The Present Link
When I discuss responsive Web design with my clients, I rarely use the term “mobile support” because it makes those clients think only of phones or, perhaps, tablets. I instead prefer the phrase “multi-device support,” which better encompasses the wide range of devices and screen sizes we are really designing and developing for these days.
One of the advantages of responsive design is that it doesn’t focus merely on the devices and screen sizes out there today. Because a responsive website reflows to fit a screen of any size, with an experience and a layout suited to each, the approach is very future-friendly. The prospect of having a website that continues to work well into the future, even as new devices and screen sizes come to market, appealed to our client. We further explained that, even if the website didn’t draw a lot of mobile visitors today, it might in the future. A responsive approach would ensure that those mobile visitors get an experience optimized for them.
The client remained skeptical that they would ever attract mobile visitors, but they were sold on responsive design because of the other problems it would solve. Additionally, because we were rebuilding the website anyway, making it responsive at the same time made financial sense. Trying to strap responsiveness onto an existing non-responsive website can be daunting and expensive, whereas incorporating responsiveness early on in the design process is much easier, especially if it is a core part of your process and you’ve developed a workflow for it, which we have. That workflow helped us to make this approach both technically and financially viable for our client.
Moving forward with the project, we knew that we would have to keep an eye on traffic once the website went live to prove our theory about the lack of mobile traffic.
Break The Cycle Link
Two percent of traffic from mobile devices is so low a figure that, when I first saw it, I questioned its accuracy.
This particular company does not market or sell to the general public. It is a B2B company that works with a relatively small group of distributors and contractors from a defined geographic area. The client attributed the low mobile traffic to this demographic, which would access the website from an office desk, not on the road with a phone.
I agreed that mobile figures would likely be lower for this demographic than for a typical audience (for the websites we manage, 30% of traffic comes from mobile visitors, although some websites get over 50%) — but not this low. I felt that something else was happening here, and my gut told me that part of the reason was that the website worked so poorly on mobile devices. I suspected that the lack of a mobile experience kept mobile visitors away.
I did not share this theory with the client at the time, but in the year since the new design went live, the mobile traffic figures have climbed, from 2 to 17%. Granted, that is still lower than what many other websites get these days, but it is a sizeable jump and cannot be ignored.
The only reason we can point to for this jump is the website’s responsiveness. Neither the demographic nor the market has changed. The only difference is in how the website works on mobile devices. The improved experience has increased traffic. This was one of the reasons why I pushed for responsiveness, even when the traffic figures suggested otherwise.
Solving Problems Link
Part of our job as Web professionals is to solve problems for our clients. But we have to solve not only the problems that the client tells us about, but the ones that they do not even know they have.
With the redesign of the website, our team was able to solve a number of problems that the client brought to our attention, including the outdated design and the absence of a CMS. And our solution to the problem that they weren’t aware of — a lack of mobile visitors due to a lack of support — validated our responsive approach, even when the traffic figures did not show the need for it. We knew that a responsive design would fix the layout on large desktop screens as well as on small old monitors, but would also help turn around the website’s unusually low traffic from mobile visitors, and we were proven correct.
We knew that part of the rise from 2 to 17% could be attributed to existing customers who had been sticking to a desktop computer out of obligation but were now switching to a mobile device. Those users are now able to access the website’s content on their preferred device, confident that they will get an experience suited to the device.
Another reason for the increased mobile traffic is undoubtedly new business. The movie Field of Dreams is instructive here: “If you build it, they will come.” If a website does not support mobile devices, then a mobile visitor will likely leave immediately upon noticing it, never to return. This was part of the reason for the low numbers. But the website no longer turns mobile users away, and the users in turn will not leave as soon as they arrive. Rather, they will find the information they are looking for and might visit again or point other people in their organization to the content. Mobile support encourages mobile use.
By addressing the customers’ problems, including ones that the client was not aware of, we were able to sell a responsive approach. The improved experience has boosted the mobile audience, as well as boosted the leads that the company is getting from the website.
In Summary Link
Selling a responsive design is no different than selling anything else. It all starts with solving problems.
For this project, we highlighted the benefits of a responsive approach beyond the familiar benefit of support for mobile devices that we normally mention to prospective clients. Here are some of the key points we made in discussing the value of a responsive approach for a website without an obvious need for mobile support:
- We would be supporting a variety of screen sizes that aren’t typically considered when discussing responsive design, including large new desktop monitors with very high resolutions and old small screens with correspondingly low resolutions.
- The website would scale into the future as new devices and screen sizes come to market and as mobile users begin to visit.
- We would save time, money and technical complexity by doing this work now, as part of the redesign process, rather than trying to cram it in later when the website is set.
- 1 https://www.smashingmagazine.com/2014/04/involving-clients-in-your-mobile-workflow/
- 2 https://www.smashingmagazine.com/2013/11/how-usability-testing-drastically-improved-my-clients-app/
- 3 https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
- 4 https://www.smashingmagazine.com/2015/02/design-last/
- 5 https://www.smashingmagazine.com/2016/06/client-experience-design/
- 6 http://www.flickr.com/photos/emmacherry/2207748365/sizes/z/in/photostream/
- 7 http://www.flickr.com/photos/emmacherry/2207748365/sizes/z/in/photostream/
- 8 http://www.flickr.com/photos/flippoker/6679770607/sizes/z/in/photostream/
- 9 http://www.flickr.com/photos/flippoker/6679770607/sizes/z/in/photostream/
- 10 http://www.flickr.com/photos/expressmonorail/3470644819/sizes/z/in/photostream/
- 11 http://www.flickr.com/photos/expressmonorail/3470644819/sizes/z/in/photostream/
- 12 http://www.flickr.com/photos/donnagrayson/195244498/sizes/z/in/photostream/
- 13 http://www.flickr.com/photos/donnagrayson/195244498/sizes/z/in/photostream/