5 Mobile Website Design Must-Haves

The mobile revolution is here — well, it has been here for quite a while. The mobile revolution has arrived, unpacked its bags, rummaged around in your fridge, put its feet up on your new recliner, and fallen asleep with its hand in your bag of chips.

Mobile’s more than made itself at home in our world, but have you made your website at home with mobile yet?

There’s a good chance you haven’t. In a survey conducted last year of over 900 of its small business customers, Endurance International Group found that a whopping 78% did not have a mobile website solution, despite 71% believing that a mobile solution would have a positive impact on their business. What’s the hang up? Oh, the usual — time, money, that guy named Brad who comes to all the marketing meetings and shoots down everyone’s ideas. What’s your deal, Brad?

Listen, if you’re one of the remaining business owners without a mobile website, you simply can’t afford to let Brad or anyone else hold you back much longer. In 2015 Google began dinging the ranking of sites that aren’t mobile-optimized, and Adobe Systems found in its digital advertising report that organic traffic to those sites subsequently dropped as much as 10%. Additionally, recent research has shown that mobile search, shopping, and engagement consistently clocks in at roughly 50% versus desktop, which means you’re potentially at risk of alienating up to half of your customer base if your website isn’t mobile-friendly.

Ouch. Now it’s getting personal, mobile.

So if your mobile website is still in the works — or even if it’s already up and running — here are five tips that will help you make the most out of it.

1/ Rethink your desktop design.

The first step in going mobile is to change your thinking about how it should look. Your mobile website is not, in fact, a tiny handheld version of your desktop website. I’m looking at you, Dunkin’ Donuts:

This is what we’re trying to change, people! Here, vistors have to pinch to zoom in and read text and then pinch to zoom out and try to navigate around the page. How long do you figure it takes before most of them just give up and leave?

Now let’s take the above and compare it to the mobile website of another popular doughnut maker, Krispy Kreme:

I was so impressed with Krispy Kreme’s mobile interface that I put together a series of screenshots to show you a longer view alongside of the original screenshot. Even at the tiny size at which it’s displayed, it’s incredibly (mostly) still legible. The callouts are clear, engaging, and just plain fun all the way down the page.

Are you taking notes, Dunkin’ Donuts?

2/ Restack, reorder, reprioritize.

On desktops you can easily flow content at two, three, or four columns across, allowing you to highlight multiple products and calls to action in the same prime real estate near the top of the page. But when you’re working on smaller screens, that real estate shrinks considerably, and you need to be extra picky about what visitors see and the order in which they see it.

Get started by blocking off the key content areas of your desktop website and figuring out where you’ll want them to land on the page of your mobile site. Use the results as your “map” that will help guide the necessary design from there.

3/ We like big buttons and we cannot lie.

One of the biggest keys to mobile success is to go big. Literally.

Small buttons and tiny text will not work in a mobile environment because not only are they illegible, they’re untappable. In the UI & UX industry these are referred to as “touch targets” because users need to aim for them with their fingertips.

The general minimum rule of thumb in order to accommodate, well, a user’s thumbs, is 15px for text and 50x50px for buttons. Don’t be afraid to go bigger than that, but stay within reason. Overall, aim for clean visual lines and adequate spacing around every element, and above all test, test, test. If you have a hard time hitting the touch targets on your mobile interface, you can bet your customers will, too.

3/ Compression is king.

Ever spent time waiting for a web page to load? Then you know how frustrating it can feel — and you also understand how every extra second the server spends fetching images is a second your visitor could decide to hit the “back” button. Take the time to make sure your images are optimized for the web. If you’re not sure what that means, enlist the help of someone who does.

It’s not just images, though. Replace bandwidth-sucking video and heavy plugins with lightweight, mobile-friendly versions. Your visitors will thank you when they don’t go over their data allotment for the month!

4/ Make forms a snap.

Typing with your thumbs is awkward enough without having a dozen form fields to fill out. Whether it’s a shopping cart checkout or email signups, limit forms to only the most essential fields and pre-populate fields where applicable. Lean on visual elements or icons to help direct users.

Here’s a great example. Filling out a search form for flights can be tedious, but Kayak has boiled it down to the bare essentials. Tapping the date field brings up a visual calendar visitors can use to select your itinerary, and tapping the traveler field brings up a screen where they can quickly edit passenger preferences. Overall it’s streamlined, easy to use, and won’t make a user run for the hills screaming in frustration. PS — check out the nice big “Find Flights” button. Can’t miss that!

5/ Simplify navigation.

I’d argue it’s important to simplify everything on a mobile website, but navigation is especially important.

Let’s look at Target.com for an example. As a major retailer, Target has a lot of information to show on its desktop website, including multiple menus:

In comparison, check out the homepage of the mobile site:

It’s a lot simpler, isn’t it? And you can see on the right that when visitors tap the menu icon in the header, the flyout panel displays just the basic navigation to start. Tapping some of the menu items such as “browse by category” brings up submenus visitors can then use to further narrow their choices. In this way Target doesn’t overwhelm by showing links to every page at once — they draw a user deeper into the site using a series of guided suggestions.

Your mobile website will never be an exact translation of the desktop, and that’s okay. Your goal instead is to showcase your brand in a brand-new format. Going smaller will challenge you to find creative ways to call attention to your messaging, and that’s never a bad thing.

Good luck going mobile! And if you need a mobile website but you don’t even know where to start, we can help you sort it out.