How to Optimize Your Website Mobile Experience for Conversions

Fifty-one and a half. 

That’s the percentage of online users surfing the web from a mobile device. With those odds, it’s likely that a significant number of your business’s potential customers are coming to you from a 480px screen. If you’ve left the mobile version of your website unformatted, stripped it down in information, or simply don’t have one, you’re missing an opportunity to convert half of your site’s visitors. 

You may believe that optimizing for mobile requires as much effort as building another entirely separate website. But the truth is, there are plenty of easy ways to make your site more mobile-friendly. Here are a few tips and tricks for creating a mobile version of your website that converts. 

The Need for Speed

Speed is the most essential component of building a mobile site – and that’s not just because users will leave a website that takes longer than three seconds to load. Slow-loading websites have a higher bounce rate, meaning users aren’t engaging with content for as long as they should and are less likely to visit other pages on your website (like a contact page or checkout page).  

Ideally, you want your website to load in 2-3 seconds or less. There are a ton of ways to speed up your website, but let’s stick to the ones that will give it the biggest boost: 

1. Compress Resource-Heavy Files

• Images are essential to design but leaving them in an uncompressed state drastically slows down your site. There are plenty of plugins that can compress images on the backend, or you can go old-school and compress your images down to a more manageable size in a photo editor before uploading – either route will work. The goal is to make images and videos take up as little space as possible without sacrificing the quality of how they display on the page.
• It’s easy to overlook HTML, CSS and JavaScript code when you’re using a page builder. But these files often hold redundant or blank lines that slow down your site. We recommend using a plugin like WP Rocket, which will minify these files at the click of a button. Alternatively, you can check the code yourself. See any blank lines? Deleting those lines won’t affect the overall look of your website and it will help remove some bloat, thus giving your website’s performance a boost.

2. Consider Using Accelerated Mobile Pages (AMP)

AMPs are all about speed and making information easy for the reader to digest. The AMP plugin was originally developed by Google to give users a better experience when visiting mobile sites.  An AMP version of a web page is essentially a stripped-down HTML version of your original page. The result? A lightning-fast web page that has a much higher probability of converting.

Responsive Design

If you’re using WordPress to design a website, you’ve most likely installed a theme to control the appearance of your website. Unfortunately, all themes are not created equal. 

One area where some themes fall short is a lack of responsive design. Responsive design organizes information and design elements in the best possible way for a variety of screen sizes. What’s amazing about having a theme with this built in is that it will happen automatically, with CSS properties built into the theme style sheet itself. 

Optimizing your site for mobile will be much easier to accomplish if you choose a theme with built-in responsive design. If your current theme doesn’t have this functionality, this list of 14 mobile-friendly WordPress themes is a good place to start looking for one that does. 

Touch and Usability

Users that access your mobile website are going to be navigating every page with the touch of their thumb. It may seem silly to bring that up, but keeping this fact in mind will help you design a better mobile site.

• The thumb zone: An article about how we hold our gadgets refers to the thumb zone as the area where a thumb can sweep the screen more accurately. The top- and bottom-most areas of the page are the least comfortable to reach for on a smartphone. As web designers, we should put the conversion elements – items we’d like them to touch – in areas where it’s the easiest for a user to do so.
• “Click” interactions: When using a mobile device, users have the ability to do two things: swipe to scroll down the page and gently tap to engage with an element. There are no animations or color-changing on hover to let a user know that something is clickable. Because we’ve lost that element, we have to make up for it in other ways. If something is clickable on the page, it needs to look more like a button on mobile. Alternatively, you can add buttons below items that don’t look clickable to direct the user on how to move forward.

Popups

Have you ever encountered a popup when visiting a website on your phone that you were unable to click out of? Either the “x” was too small, or it was slightly out of view and unable to be clicked on. These are common issues with popups on mobile sites. 

The solution is simple: If you’re using popups on your mobile site, take the time to format and test them out. This same principle applies to forms and buttons. It’s essential that all popups on mobile are properly sized. The last thing you want is for a user with intentions of converting to be deterred from doing so by your website. 

Keep Content Simple

1. Provide a Clear Path

On a desktop version of a website, it’s common to see a menu in the header that displays a link to every key page. Mobile users get that option, often by clicking on a toggle button that pops the menu open. This is one way of ensuring visitors are able to quickly navigate between important homepages, but there are other ways that we, as web designers, can steer them to the pages we want them on – pages that convert. 

For example, many eCommerce websites position a cart icon next to their menu. This places the cart front and center, making it easy for users to find and check out. Websites that sell services can utilize a contact button instead. Not only does this further your goal of converting users to customers, but it helps fulfill the goal of the user as well by making it easy to find what they’re looking for. 

2. Lead With What’s Important

The goal is to generate conversions from your website – keep that in mind as you create the mobile version. It’s a smaller area, so don’t waste prime real estate on information or pages that typically don’t generate conversions. 

On a desktop site, you may be able to comfortably fit three columns worth of information without sacrificing aesthetics. On a mobile site, you’re most likely limited to one- or two-column layouts. Some users will never scroll all the way down the page. That’s why it’s imperative that calls-to-action (CTAs) and opportunities for users to take action are readily accessible at the top. 

3. Don’t Strip the Site Down

Leading with information that encourages action doesn’t mean that everything else should be removed. Web designers are sometimes tempted to strip down the mobile version of their site completely, leaving only a small portion of the information that’s available on the desktop version. This is a mistake. In July 2019, Google announced mobile-first indexing, meaning that Google will look to the mobile version of your website first when determining search result rankings.

March 2021 marks the date Google will make mobile-first indexing the standard across all websites. If you leave vital information off of your mobile website, you could be sacrificing your overall SEO strategy. 

So, how can you include that information while still designing a readable, mobile-friendly website? The answer is simple: reorganization. Move that information to other pages that aren’t front and center, add links and buttons so that users can still get there, even condense the desktop version if you need to. Just don’t leave the mobile version of your site outside in the cold without a coat on. 

Don’t Lose Half Your Conversions

Mobile usage has already surpassed desktop usage, and it continues to grow every year. The best way to ensure that you capture prospective customers’ business is to ensure that your mobile website is making the process simple. 

Remember the 51.5 percent of users that we mentioned earlier? Well, they’re still out there. The question is, will you take this opportunity to convert them?