Building a Great Mobile Site Experience – Every Time

It’s likely that you already know designing for mobile users is important—you’re seeing it in analytics and campaign reports, and it’s been on every annual trends forecast for the last 5-6 years. You’ve probably personally encountered great mobile experiences as well as terrible ones. So why is it so hard to create an amazing mobile site experience every time?

Lack of focus

Responsive design has become the norm for many digital marketers, but this is the year that savvy companies should dig deeper into mobile. Despite the positive impact that responsive design has had on the mobile web, there are a great many responsive sites that serve up a sub-par mobile experience. Some of that is this idea that as long as content can stack and is modular, you don’t need to do any more planning around the mobile site experience. Slap a hamburger menu on it, and call it done. Don’t do this.

Different screens, different needs

One of the issues is that mobile users don’t necessarily have the same needs as those viewing on other screens. So if you plan and design a website starting from a desktop screen and attempt to gracefully degrade the experience, unless there is a good deal of intentionality, it’s likely that mobile will be an afterthought. There are also benefits to starting mobile-first, one being that you are forced to start out by simplifying down to the most important content, the most important action(s) you want a user to take. From there, you can progressively enhance the experience on larger screens, but by starting with mobile, you gain some clarity that can inform the rest of the process.

Don’t forget to go big too

While designing mobile-first can help ensure an optimal mobile site experience, there are additional considerations that should be planned for. One issue that commonly arises in mobile-first design processes (and traditional, desktop-first processes as well) is the lack of attention or planning around larger screens. Have you ever tried surfing the web on a smart TV while sitting on the couch? Unless you have 20/20 vision, you’re in for a real headache. Most websites are just not built to be viewed on 42+ inch screens…much less from several feet away from the screen.

Despite the ubiquity of smartphones and the tremendous amount of activity and traffic on them, our sites can’t fall apart on larger screens. I’m sure you’ve come across it in your own personal web surfing – you visit a site and there is TONS of white space. Yes, white space is an important element of web design – but only if it is intentional. While we shouldn’t jump to an extreme and fill all available white space with content, we should look at larger screens as an opportunity and intentionally enrich that experience. Moral of the story: don’t sacrifice mobile for desktop, and don’t sacrifice desktop for mobile.

Where do I start?

A lot of the articles you’ll read about mobile-first design, or optimization generally, talk about how important it is, but leave readers with very few tips on next steps. How do you poke holes in your site’s mobile experience? Is there anything wrong?

I’m not going to make that mistake. Here are a few takeaways to consider:

1. Font size and clickable button area. 

These two may seem like no-brainers, but still many companies have “mobile-friendly” sites with tiny body copy and buttons that don’t follow best practices. If your mobile sites have a default font size of 14px or below and buttons smaller than 44px, you should probably consider increasing them.

2. Go beyond “stacking.”

If the mobile solution is to simply stack content boxes, there’s a good chance your mobile UX was an afterthought.

3. Think twice about using a hamburger menu.

While it is widely used, that doesn’t mean it’s always the best possible solution. It hides your navigation, and on larger phones it can be difficult to reach in the top right corner of the screen.

4. Don’t rely on hover states for revealing important information.

Anywhere you use a hover effect, ask yourself “How is this problem solved on touch screens?”

5. How are images treated on your mobile site?

If you use the same large image from your desktop site but cropped in, you may want to consider using multiple images. Essentially you should have a few different image sizes (typically phone, tablet, desktop) and serve them up responsively. You have more control over how the layout breaks down, which helps create a more consistent experience across different screens.

6. What does a mobile conversion path look like on your site?

Is it optimized for the best possible experience? Are you expecting users to download a non-responsive, static ebook PDF on their mobile device?

7. Update your email strategy and consider how your templates look and work on mobile.

Common hiccups include problems with image-rendering and font size. 

8. Don’t use pop-ups.

While they can be effective at generating leads, they can also be intrusive, especially on mobile devices.

9. Make sure your forms are utilizing the entire viewport.

Small form fields that are difficult to tap can be conversion-killers.

10. Make it fast.

If your mobile site is slow, don’t expect users to wait around to see it. If some load time is impossible to avoid, give users an indication that the content is in fact loading. Keep in mind that there is still low tolerance for much of a wait, so do everything you can to prevent this scenario.

Mobile-considered, user-first

While the focus of this post is mobile optimization, it doesn’t mean that you have to squarely fall into one camp or another – mobile-or-desktop-first. Increasingly, organizations are starting to explore other strategies, such as adaptive design and “journey-centered” design, which arguably do a better job of serving users.

Whatever your approach, one thing is clear: in the world of modern marketing and design, it’s imperative you stop focusing on producing just the minimum viable product, and start building a digital experience that is truly user-first.