Adobe Creative Cloud

August 11, 2015 /

How to Design a Mobile Website That Converts

Did you know that more than 61 percent of mobile visitors flock to competitors’ sites after having a frustrating mobile browsing experience?

This can either mean good news for you – if you’re the competitor, or bad news – if you’re the person who designed the first site. And even worse news if the project wasn’t your own personal endeavor, but a website built for a client.

Nevertheless, the takeaway from this small piece of statistic is simple: mobile matters.

As it turns out, right now, around 80 percent of internet users own a smartphone. And if that wasn’t enough, it’s actually their preferred device to access the web.

What all this means in layman’s terms is that basically every website design done in 2015 and going forward needs to be done with mobile in mind.

More than that, instead of focusing just on making things look good on mobile, the real goal is to make the design convert.

Here’s why:

The value of a *conversion* in web design

A small fact that might not sit well with you at first is that getting a conversion is the main reason why the client wanted a website in the first place.

Although various branding goals are at play as well, the main thing that’s on the client’s mind is to introduce the visitors to a certain offering and get them to convert on it. That’s the main benchmark by which the client will judge the website’s success.

What this means for a designer is that things like the overall looks, pixel perfection, and other visual traits need to take a backseat as goals in themselves, and instead work hard to reinforce the main goal – getting the design to convert.

For example, if we’re dealing with an e-commerce store then identifying the conversion is straightforward: the website owner wants to sell their product and everything else is just a side benefit. Therefore, the design itself should only be pretty if it helps to sell that product. Or to say it even more bluntly, an ugly website that converts is still better design than a pretty one that doesn’t.

If something’s stupid but it works, it’s not stupid.

– Unknown

The above applies to all types of web design and is true for traditional desktop designs as well. However, once we include mobile into the equation, we’re getting an even more complex challenge.

The challenges of mobile design

Compared to desktop, mobile has a whole unique set of challenges that we as designers have to tackle.

Chief of which are these two:

  • Screen size.
  • Visitor goals / hurry.

It’s easy to get fooled by the specs of some popular mobile devices.

For example, the iPhone 6 Plus is capable of displaying graphics up to 1920×1080 pixel (also known as Full HD). This basically means that, from a technical point of view, whatever you want to render on a device like that, will render with no hiccups.

But the thing we’re missing here is that the screen itself is still only 5.5 inches across. Compared to your average desktop display – say, 24-27 inch – this makes it a properly small visual real estate to work with.

So that’s problem no.1.

Now problem no.2: visitor goals or them being in a hurry.

Whereas visitors on desktop can have multiple reasons for navigating to a certain site, mobile visitors are much more goal-driven and in a lot of hurry.

They need specific things, and they need them now.

If they don’t get those things, they’ll leave (remember the 61 percent stat mentioned at the beginning?).

Time has always been important for web design, but it becomes basically the be-all-end-all of mobile design.

So how to work your way around those problems and find a suitable solution?

Get your mobile design goal right

Please notice I didn’t say goals.

When it comes to mobile design goals, it’s much like the fate of the immortal warriors in Highlanderthere can be only one.

(Sorry if you don’t get this reference. I grew up in the ’80s and ’90s, you know.)

Anyway. When it comes to mobile design, there’s simply not enough time (problem no.2) and not enough screen (problem no.1) to make it possible for the website to achieve more than a single goal.

Therefore, every mobile design effort should start by identifying this one, main goal – the thing that’s expected of the site above all else.

Again, if it’s an e-commerce store we’re dealing with then it’s quite straightforward – it’s sales that we’re after. For other types of websites, you might have to dig deeper. Unfortunately, there isn’t any cheat-sheet I could refer you to. This part of the job requires some good old brainstorming and client consultation.

Once you have this main goal figured out, you can move to the topic of how to tie it together with the other goals that might have been set for the standard version of the website:

Mobile vs. desktop – what’s the difference

The first thing worth understanding about mobile design is that a mobile version of a website doesn’t have to look exactly like its for-desktop-built counterpart. More than that, it can be entirely different.

The thing about websites for desktop is that they can cope with juggling a couple of goals at the same time, or at least can work with a couple of side goals apart from the main one. Mobile websites don’t present the same juggling skills, though.

But that’s actually good news for us.

It means that we can really focus on mobile individually and craft something that’s truly optimized and not just a stripped-down version of the standard desktop design.

Understand mobile audiences

The first trait of a mobile visitor is that they have neither time nor dedication to interact with a website for any longer than necessary to get that one thing they’re after.

Just to give you a simple example. Someone sitting at home and googling the word “pizza,” might be interested in a number of things. Maybe they’re looking for a recipe. Maybe they want to find a nice place to have dinner. Maybe they’re writing a research paper and need some info on the history of pizza.

However, if a person does the same search on mobile, what they usually want is a recommendation on the closest sensible place to have lunch. And once they do get that recommendation, they will leave the website in a heartbeat. They won’t be interested in whatever else that site might have to offer.

Understanding this type of mindset, this type of urgency and goal-driven approach of just looking for an immediate solution is key to good mobile design. Once you master the craft of giving the visitors that one thing they need, your mobile design experience will become much easier.

Validate the visitor

The first thing people look for when they visit a mobile website is to validate if they’re in the right place.

Going back to my pizza example, if they’re looking for a pizza place, the first thing they’ll check is if the site they’re on looks like it can point them toward pizza. “Is this a pizza place’s site? Or is this a recipe site?”

The quicker you can answer the visitor’s main question, the better their experience with the site will be.

This is important for two reasons:

  • Scenario a): If the site offers exactly what the visitor needs then through good design and copy you can ensure the visitor that they’re in the right place. This introduces a sort of a relief as the user now knows that they’re not losing time on a site that doesn’t have answers for them.
  • Scenario b): If the site isn’t what the visitor is looking for then they will find out about this just as quickly. Yes, they will leave since it’s not what they need at the moment, but a small seed will be planted in their heads that they now know a cool website about X.

Make things tappable

This is a mistake that’s easy to make with mobile design, and it goes back to the issue of screen size, plus one more issue of thumb size.

Quite simply, these days, the mobile devices most commonly used to access the web are smartphones and tablets – aka. touch screen devices.

Those touch screen devices are great, but they work effectively only with websites that use elements that are easily tappable.

So if we’re dealing with, say, small text links next to each other and big screen resolutions, then this creates a situation that’s not accessible at all to anyone with human-sized thumbs.

Instead:

  • Introduce more spacing.
  • Use buttons instead of links.
  • Make the borders on the buttons clearly visible so it’s easy to distinguish the tappable area.
  • Don’t place links too close to one another.
Toby-Steaks

Toby Steaks website” by Inkration Studio

Minimize the number of links

Another way to fix the issue of ‘tappability’ is to minimize the number of live links altogether.

This might sound odd at first, but it’s actually not such a far-fetched idea.

First of all, it’s in tune with our main idea of just focusing on one goal for the mobile version of the site. A single goal can often be handled by a single link, right?

Secondly, using less links makes the choice a lot easier for the visitor, and also makes the whole message of the site a lot clearer.

Thirdly, designing with less links is easier and it gives you more clarity as a designer. You don’t have to wonder how you’re going to fit a certain link into a page that’s already quite full.

Hackday

Hackday Website” by Sergey Vakhnin

Make the design responsive

This should go without saying but there’s still quite a lot of sites that disregard the idea of responsive design entirely.

And it’s hard to see why, since it’s been proven that responsive designs are extremely effective at improving the conversion rates on virtually every site that the concept has been ever tested on.

Just to give you one example, O’Neill (a company known for their surfing clothing) introduced responsive design onto their e-commerce website a while ago, and the impact on conversions has been nothing less than extraordinary. Just for the iPhone/iPod traffic, the conversions increased by 65.71 percent, the transactions by 112.50 percent, and the overall revenue by 101.25 percent.

oneill

The importance of mobile-friendly commerce has been noticed by some store-bought e-commerce software providers too, with many of them prominently pointing out mobile friendliness alongside other features.

Refer to this comparison chart, for example:

ecommerce-comparison

In short, making the mobile design responsive is one of the best business decisions anyone can make.

Reserve focus colors for the calls to action

The call to action is the most crucial element for a mobile website. It’s the exact point where the visitor can convert (or not).

Therefore, giving the call to action some additional visibility goes a long way and strengthens its importance significantly.

There’s a really simple trick you can use here.

In your color scheme for the site, reserve one color that’s going to be used only for the call to action. Again, that’s only for the call to action and nothing else. Simple and effective.

(This concept is also often referred to as the accent color in material design.)

Snapchat

Snapchat – Material Design” by Vinfotech

Put the conversion right in front of the visitor

We’ve covered validating the visitor a couple of paragraphs above so now let’s talk about how to guide them through the website and onto the action that we want them to take.

Well, actually … there’s not a lot to talk about here if we’re dealing with mobile design.

Quite simply, if you want the mobile visitor to take a certain action, you need to put this action in front of them right away.

Going back to my previous example, for a pizza place’s website, the most likely conversion is convincing the visitor to call and make a reservation. If that’s the case then the design should use a prominent click-to-call block near the top of the page (don’t use phone numbers presented as plain text, by the way; not every device will recognize them as an actual phone number).

So just to emphasize some more: validation first, conversion next.

SalesStop

SalesStop” by M A H rubel

Be careful with social media integration

Social media integration is a very tempting element to have on a mobile website. After all, more people use Facebook and Twitter via their mobiles than they do via desktop. Quoting one article from The Verge:

Facebook is a mobile company now. It makes 62 percent of its advertising revenue on mobile, […]

It therefore seems that having social media elements on a mobile site is an intuitive thing to do. But is it always?

The main thing to realize is that if you place social media links on the website then it will impact the conversion rate. Inevitably, the people who do click on any of those social media links won’t have the chance to click on the main call to action.

Is that a desirable scenario in relation to the site’s goal? You answer (depending on the specific project you’re working on).

Make room for headlines and sub-headlines

Mobile design of 2015 is more text-based than graphics-based. And especially in the age of flat and material design.

What I’m trying to say is that good typography plays a more important role as a design tool than anything else.

A good headline is what validates the visitor, shows them the main thing that the site has to offer, and also brings them closer to the call to action.

When designing a mobile website, make sure that the design can handle everything from short, to mid-length, to long headlines and sub-headlines.

The challenge is two-fold here:

  • You need to make sure that the headlines are big enough so they can be read clearly on a 4-inch screen.
  • You can’t let a 30-word headline ruin the whole design.

Conclusion

At the end of the day, mobile design is an art of stripping things down, rather than adding them up.

You begin with a certain scenario, certain environment, and then you try removing elements from it. You do this until you get a result that’s optimized for mobile viewing (from a technical point of view), and also makes achieving certain business goal possible and generates conversions.

As always, though, it’s much easier said than done.