For a long time, responsive design dominated the web as the format of choice for business and personal sites. Now, however, mobile optimization has begun to gain credence as a potentially preferable strategy.
Instead of simply compressing and slightly rearranging the content on the screen, you design the entire experience for smaller screens.
You’ve probably heard the term “mobile-friendly.” It’s a bit outdated, so even though it sounds like a good thing, it’s not enough. People are using their mobile devices more and more, as I’ll explain in a minute, so we have to look at our website through a smartphone’s screen.
With that in mind, how can mobile optimization impact your conversions? And should you optimize your site for mobile conversions if you want to generate more sales?
Why Mobile Optimization Is So Important
If you’ve ever accessed a website on a mobile device, you know it can be frustrating. Tiny buttons and links, endless scrolling, and unclear form fields create hassles that often result in abandonment.
People are busy, stressed out, and impatient. They won’t wait for a slow page to load or spend hours trying to figure out how to add a product to their carts.
It all boils down to friction. The more friction a website creates, the less likely a customer becomes to convert.
Friction occurs when there’s a barrier to conversion. If a customer has to work harder than necessary to achieve a goal, he or she feels friction. It makes that customer want to avoid the experience entirely.
Let’s say, for example, that you pull up an e-commerce store on your smartphone. You want to buy a set of noise-canceling headphones.
First, you try the search function, but you can’t get the search button to work. Then you attempt to navigate your way to the desired product through the top-bar menu.
When you finally find a list of headphones for sale, you have to tap each one to view the specs. Then you might have to pinch, scroll, and otherwise manipulate the screen to find the information you need.
Never mind comparing one product against another. There’s no option unless you want to tap back and forth.
If you finally make it to the checkout process, you might have to create an account. More pinching and scrolling. Then you have to confirm via email.
Each of these frustrations creates friction. Many mobile users will simply abandon their search because they’re out of time or patience.
How a Mobile Optimized Website Can Affect your Conversions
Mobile optimization helps encourage conversions by reducing friction.
In quarter one of 2016, the global conversion rates for desktop computers was 3.63 percent. That’s not great. However, global conversion rates for smartphones was an abysmal 1.25 percent.
Keep in mind that mobile device usage has surged over the last several years. Not only does mobile Internet access surpass desktop, but mobile users spend twice as many minutes on their devices than desktop and laptop users.
Knowing these statistics, it becomes clear that mobile optimization is essential for business owners. But how can it affect your conversion rate?
A mobile optimized site makes the conversion process easier and less stressful on the user. Some of the hallmark features include the following:
- Larger buttons
- Smaller images
- Auto-fill form fields
- Auto-detect location settings
- Guest checkout option
- Multiple screens instead of scrolling
All of these features help reduce friction. If you can buy a product or service from your mobile device without wanting to throw your device across the room, that business will likely benefit from your patronage.
Of course, there are several ways to get your site ready for mobile users.
Responsive design is perhaps the easiest — and most popular — solution, but you might want to consider alternatives. We’ll explore them in depth below.
9 Mobile Optimization Tips in 2018
Now that we’ve covered some of the most important aspects of mobile optimization, how do you put them into practice? There are multiple ways to optimize a website for mobile users, so I’m going to cover the topic broadly.
It’s important to realize that mobile optimization looks different depending on the type of site you operate. I have a personal blog, for instance, where I post regular videos, podcasts, and articles. It’s not designed to move product.
Then there’s Crazy Egg, where my partner and I sell SaaS.
I’m also the co-founder of Hello Bar, which sells a tool that allows you to create top bars, exit intent popups, and other modals for your site.
All of those sites have different functions, so I need to approach their design differently. Since I naturally have a preference for clean, minimal design, that helps when it comes to mobile optimization.
But minimal isn’t always easy when you have an e-commerce site or a site that sells lots of services. You have to figure out creative methods of mobile optimization.
Let’s look at a few of the most effective options.
1. Pick a 100 percent responsive web design
The best way to start optimizing your site for mobile is to choose a responsive design. Responsive websites conform to the screen size on which they’re viewed. The “hamburger” menu often appears instead of a top bar, and images become smaller.
Keep in mind, however, that responsive design is different from mobile optimization.
A mobile optimized design looks extremely different from a responsive site. It’s configured with the mobile user in mind and often has a separate URL.
The images are lighter to reduce page speed, the buttons are sized for broad fingers, and the need to pinch and scroll is minimized.
Starting with a responsive design, however, will take you in the right direction.
Your website will appear attractive and remain navigable for all visitors, which is the first step toward improving conversion rates on mobile devices.
If you’re a WordPress user, you can find free WordPress themes that incorporate responsive design on the official website. Alternatively, consider searching for premium themes. Nearly all of them have been updated as responsive.
2. Use structured data
Structured data allows Google and other search engines to display rich snippets.
For instance, structured data can tell Google that you’ve just published a news story. That’s how articles appear in the rich snippet when you search for newsworthy keywords.
It’s also how some websites appear in the SERPs with star ratings and other details.
You can use Schema.org to find the schema markup you need for structured data. When you implement structured data, Google can rank you more accurately in the SERPs and better understand a page’s purpose and content.
3. Compress your images
If you’re using a separate URL for your mobile users, consider uploading different, smaller images. That way, graphics don’t overwhelm the screen or cause loading delays.
Product photos are an excellent example. You want a large enough image to allow consumers to view it clearly, but small enough to have a negligible impact on page load speed.
Instead of resizing images via CSS, which is what responsive design does, you can upload smaller images that won’t weigh down your site for mobile users.
4. Identify non-mobile friendly features
You might have elements on your website that won’t convert well to mobile devices.
Take sidebars, for example. A typical sidebar appears on either the left or right of the page. Some are stagnant, while others move down as you scroll.
Either way, they widen the page. On a mobile device, a sidebar can make the body text unreadable — again, without pinching the screen.
Take a look at a post on my personal blog when rendered on a desktop computer:
See the sidebar?
Now, let’s look at that same post rendered on the Samsung Galaxy:No more sidebar. It makes reading my blog posts on mobile devices, such as smartphones, much easier.
The same goes for an e-commerce website. You want to remove any unnecessary clutter.
Let’s compare these two product pages from Walmart. The first is the desktop version.
There’s a lot going on on this page. Let’s compare it to the mobile optimized version on a Samsung phone:
Much simpler, right? It’s streamlined so the user doesn’t become overwhelmed by friction.
If you can remove an element from the mobile version of a page without losing essential information, do so.
5. Add AMP
AMP changes the look and functionality of your website when it’s viewed on a mobile device.
You can customize your AMP to get the look and feel you want — and to match your brand.
6. Test popup usage
Popups can be a great addition to your site, but only if they don’t disrupts its flow or create friction between your site and its users. On mobile screens, popups can become extremely frustrating because users don’t always know how to make them go away.
That doesn’t mean you should immediately disable popups. Consider A/B testing them to determine whether they have an impact on bounce rates and other important KPIs.
7. Add videos
Images can become extremely limiting on mobile devices. You have to either stack them on top of one another, create a carousel, or place them side-by-side. Regardless, they take up a ton of room on the screen.
Video, however, can help engage your visitors visually and aurally without disrupting your site’s design or the consumer’s user experience.
Explainer videos, for instance, work well for instructing your visitors about your product or service. You can also use product videos to demonstrate your products and even create mini commercials.
Test different video options to see what your audience enjoys most. You might even create educational video content to balance out your text-heavy blog posts.
8. Never use Flash
Flash elements slow down your website and rarely render well in mobile devices. Neither Android nor iPhone operating systems support Flash, so if your website relies on it, people won’t be able to interact with your business online.
9. Speed up your checkout page
Your checkout page is where you want everything to run smoothly. Multiple studies have been done on cart abandonment, and rates tend to range between 55 and 80 percent.
That’s extremely significant when you’re relying on people to actually buy your products or services. If 80 percent of people abandon their shopping carts, you’ve lost revenue.
Mobile cart abandonment is even higher than on desktop and mobile devices because, again, of increased friction. If the user can’t complete the checkout process because of poorly designed fields or other issues, you’ve lost a sale.
Speeding up the checkout page can help.
First, only ask for information you actually need to complete the sale.
Do you really have to know where the customer heard about your business? Probably not.
Does your customer have to create an account to buy a pair of shoes from you. Probably not.
By eliminating those obstacles, you can increase the chances of conversion.
Take a Look at the Best Mobile Optimized Websites
Lots of websites have mastered mobile optimization. The mobile versions of their sites perform well across devices, which results in a pleasant experience.
BuzzFeed is one that immediately comes to mind. That site has always been focused on user experience, so it’s no surprise that it’s optimized for mobile in an elegant and functional way.
I’m also a big fan of the Zappos site on mobile. It’s clean, uncluttered, and easy to navigate. Plus, the customer service number reigns supreme at the top of the screen.
That’s the homepage, but what about product pages? Zappos nails those, too.
You get all the information you need without any color. I also like how they handle different views of the pair of shoes as well as the color variations.
Next, let’s look at Abercrombie & Fitch’s mobile site. The company displays a very well-designed use of a popup.
It’s easy enough to click that crystal-clear X in the top, right-hand corner and make the popup go away. I also like the use of color here and the understated header.
Final Question: Responsive Design Versus Mobile Optimized
If most of your users visit your website via a mobile device, mobile optimization will provide the most benefits. While responsive design remains helpful for making your website accessible to mobile viewers, it isn’t nearly as user- or conversion-friendly as mobile optimized sites.
With that said, there’s nothing wrong with responsive design. It makes maintaining your site easier thanks to the single URL, and you don’t have to worry about managing two versions of your site.
When deciding whether to rely exclusively on responsive design or to optimize your site for mobile, figure out why you might need mobile optimization.
- Do you run an e-commerce store?
- Can people make purchases on your site?
- Do you collect significant information from visitors via forms?
- Does your site look strange or difficult to navigate in its current iteration?
- Have people complained about your site on mobile?
If you’re answering “yes” to several of these questions, consider using mobile optimization.
You don’t have to make the decision today, either. Consider polling your audience to ask about their experiences. In other words, get information directly from the source.
Which users access your site on mobile? Do they have any complaints? Have they located any bugs?
Use social media to get in touch with your user base. Alternatively, reach out to your email subscribers for feedback.
Mobile optimization isn’t a fad. It’s an excellent way to boost conversions on your website among mobile users.
Reducing friction in the mobile browsing experience will result in fewer frustrated consumers. If people can check out your products, read reviews, compare different products, and make purchases without getting stressed out, you won’t have as many abandoned shopping carts.
Mobile conversion rates are much lower than desktop and laptop conversion rates. There’s a reason for this, and it might boil down to a lack of mobile optimization.
Follow my 9 tips for making your site as appealing and useful to mobile users as possible.
Even if you only implement one or two of my suggestions, you might see a significant uptick in conversions on mobile.