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.
Mobile optimization refers to optimizing a website specifically for mobile devices.
Instead of simply compressing and slightly rearranging the content on the screen, you design the entire experience for smaller screens.
Even if your site is “mobile-friendly,” that’s not enough.
How can we use mobile optimization to grow our business?
Why Mobile Optimization Is 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 ecommerce 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.
See how to use our tools to improve your mobile version
How a Mobile Optimized Website Can Affect your Conversions
Mobile optimization strategy helps encourage conversions by reducing friction.
In quarter one of 2016, the global conversion rate for desktop computers was 3.63 percent. That’s not great. However, the global conversion rate 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, 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 ecommerce 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. Mobile optimization simply starts with responsive design — it gives you the building blocks to create a completely mobile-ready site.
A mobile optimized design looks extremely different from a responsive site when viewed on a mobile device. 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.
You might want to check out WordPress themes from StudioPress and Elegant Themes. Both companies produce responsive designs that are easy to install and adjust to your personal tastes.
2. Use structured data
Structured data allows Google and other search engines to display rich snippets. A rich snippet is a piece of Schema markup (HTML code) that you add to your website to give search engines more information.
Rich snippets often appear above the paid and organic results on a Google search results page. If you sell kitchen gadgets and publish recipes on your blog, people might find your recipes in a rich snippet. The basic instructions can be listed right in the SERPs.
It’s also how some websites appear in the Search Engine Results Pages (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
Large image files slow down page speed and make your site “heavier.” Compressing your images with a plugin like Smush Image can help avoid these problems.
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 static, 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 ecommerce 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
Accelerated Mobile Pages (AMP) are mobile-optimized versions of websites. You can add AMP functionality to your WordPress installation by installing the plugin.
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.
AMP websites load faster than standard websites. The idea is to bring up a lighter version of the site that’s been cached. If the page loads faster, logic dictates that readers will want to stick around.
Writing for Search Engine Watch, Methods Unsound editor-in-chief Christopher Ratcliff revealed that both traffic and ad results improved with AMP implementation over 12 months. For instance, “80% of Gizmodo’s traffic from AMP pages is new traffic, [with a] 50% increase in impressions,” and “80%+ of the publishers [surveyed] realized higher viewability rates” on AMP than standard websites.
6. Test popup usage
Popups can be a great addition to your site, but only if they don’t disrupt 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.
In an article published on Sumo, Sean Bestor reported that “Sumo users collected 23,645,948 email addresses with List Builder pop-ups in less than two years.” He goes on to assert, “Pop-ups work. There’s just a misunderstanding about what makes a successful pop-up (that isn’t annoying).”
Popups might work for your brand. If they don’t, disable them. But don’t assume they’re useless until they’ve been tested.
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 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.
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.
The first thing I want to point out is the well-proportioned hero image on the first article on the page. It’s much larger on the main site.
Second, BuzzFeed shortens its nav menu down to the bare basics, and third, it reduces the information on subsequent articles, making them easier to understand on a small screen.
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.
I’ve drawn green boxes around my favorite parts of the page — which, incidentally, are the aspects that Zappos has made largest on the screen.
You have the search feature, which is large so people with bigger hands won’t have trouble. The customer service number is clearly visible, and there’s a blatant “SHOP NOW” CTA.
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:Mobile Optimized Vs Responsive Design
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 ecommerce 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.
Conclusion
Mobile conversion 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.
