How to Create a Mobile-Friendly E-Commerce Website

It’s more important now than ever to have a well-optimized e-commerce website. More people are turning to their mobile devices for purchases, and if you don’t have a fully functional website that looks amazing and loads quickly on mobile, you’re missing out on sales. 

Sometimes it’s challenging to know all the steps you should take to make your website mobile-friendly, so here are some of the most effective ways to optimize your site for mobile. 

Responsive Design is Crucial

The first and most important thing you must do with your website is to see how responsive it is across all devices. You’ll want to compare it on mobile, desktop and tablet devices. You may also want to check how your site renders on various web browsers. Years ago, we built websites for desktop computers; today we build websites with a mobile-first mindset, and for good reason. 

Almost 40% of e-commerce sales happen on a mobile device, and you don’t want to miss out on that revenue because your site doesn’t work correctly on the phone. 

So how do you make your website more responsive? It starts by making sure the layout of your website makes sense across all devices. What might work on desktop ends up taking up a ton of space and looking clunky on mobile. 

Responsiveness doesn’t always mean that something isn’t working on mobile, it could mean that it doesn’t look right or it takes away from the overall goal of the site. Luckily, most popular website platforms like WordPress, Joomla, and Shopify make it easy to create responsive websites across all devices. 

Page Load Speed is Critical

Use a tool like PageSpeed Insights to find out how fast your website is loading. If you think about it at scale, many e-commerce sellers rely on high volume sales to make enough money to cover overhead. That said, even a single second delay can cost you hundreds of thousands of dollars a year if you’re doing over $2M per year in online revenue. 

Many people abandon websites that don’t load quickly enough. If your e-commerce website takes longer than three seconds to load, chances are that over half of your visitors are bouncing and you’re missing out on a lot of potential sales. 

If you use the speed test and find out your website is loading too slow, here are some of the things you can do. 

  • Reduce images – Having large bulky images on your website is a great way to slow things down.
  • Limit ads – There’s nothing worse than sitting around and waiting for ads to load and get in the way when you’re trying to shop or read about something. The ad share is not worth losing customers over. 
  • Improve server response time – The best way to do this is to check your web hosting company. Maybe they’re having issues, and it would be worth switching to another host. If all is well there, you might need to clear up some clutter with plugins and other add-ons. 

For more detailed tips on increasing website speed, read our how-to article on improving page speed.

Consider Using AMP and/or PWA Technologies

You may have a responsive website that renders well on all devices. You may have followed all best practices for site speed. However, you’re still seeing that your site takes 3 seconds or longer to load. If you do a lot of revenue on your e-commerce site, you may be curious to know that one second could be worth up to 5% of revenue for your business, so how do you get to that coveted sub-second site speed? The answer is with AMPs and a Progressive Web App.

AMPs, formerly known as Accelerated Mobile Pages, started as a Google project a few years ago aimed at making the mobile web faster for users. By following some specific guidelines, you can create AMP versions of your website pages that are optimized for mobile. Once they pass AMP validation, Google and other search engines can cache and prerender your website that appears on a search results page, then serve it up almost instantaneously when a user clicks the link. This is a great way to delight first-time visitors and increase engagement, SEO, conversions and revenue from your mobile e-commerce website.

Progressive Web Apps, or PWAs, are a relatively new technology that’s the shiny new object in the internet tech industry. Basically, it combines the discoverability of a mobile website (being found on search, etc.) with the usability of a native app (offline accessibility, home screen icon, seamless page transitions, and more). To learn more about PWAs and how they can help you succeed on mobile, check out our guide to PWAs here.

Provide an Omnichannel Experience

An omnichannel experience allows shoppers to cross platforms and still receive the same benefits and features. For example, someone receives a coupon code on their work PC and transfers that over to their smartphone to complete the transaction when they leave the office.

We’re seeing this become more popular with large retailers like Target and Walmart. They do a great job of allowing you to access their sites from anywhere at any time.

Even as a smaller e-commerce store, you want to make sure you’re providing an omnichannel experience because it makes things easier for your customers. Easier always leads to faster transactions. 

Make it Personal

Personalization of content is highly important in e-commerce, and consumers are expecting it. One way to get feedback on your site is by asking to use a shopper’s personal information and geographic location to understand their buying behavior. 

You can’t treat everyone the same, so as you’re building a list and sending emails and updates out, use their information to send personalized coupons and other content to the people who want them the most. For example, if someone visits a specific product or even adds it to their cart but doesn’t complete the purchase, send them a coupon for that product or retarget them with display ads featuring the item in their abandoned shopping cart.

Have a Clear Call to Action (CTA)

You can have the greatest mobile-friendly e-commerce website in the world, but it doesn’t matter if you aren’t converting any of that traffic into dollar signs, right? Your visitors should be able to find the call to action on your website easily. The call to action should stand out from the rest of the website with a contrasting color and centralized placement.

Here is where a lot of these tips start to come together. If your website is cluttered with images, videos, and ads, it takes away from the purpose and intention of the whole site. 

Have actionable language that tells the user exactly what you want them to do. Around your call to action, there should be plenty of white space to make the CTA stand out. 

Lastly, make sure you have a CTA above the fold so you can quickly convert the traffic that has already made up their mind to buy. Some people will take a little more time to convert while others come to your site with the sole intent of purchasing then and there. Make it easy for everyone to convert by placing another CTA at the bottom of the webpage, as well. 

Make Navigation Simple and Easy

The main difference between desktop and mobile is the screen size. You can squeeze a lot more content into the screen of a computer, so what ends up happening is you have a ton of clutter on your mobile site. 

Have you ever been on someone’s mobile website where the page seems to go on for miles and miles? Chances are, they optimized for desktop instead of mobile. Most website builders will allow you to exclude content on mobile that you show on desktop; this is a good practice to start with. 

Here are a few other ways to make your site easy to navigate on mobile: 
  • Make sure fonts are the right size and easy to read
  • Font sizes, images, and CTAs should adapt to different screen sizes
  • Limit or eliminate pop-ups on mobile
  • Make it easy to click-to-call or click-to-message
  • Remember to space out clickable elements for fat thumbs
  • Include an easy to use search box so visitors can navigate the site without having to scroll too much 
  • Put the most relevant content above the fold

Keep Your Content on Point

You don’t have a ton of real estate to work with on mobile devices, so as a result, you need to keep your content short and sweet. The truth is, most of the content on your website will go unread by an average visitor anyway.

One of the best ways to optimize your e-commerce website for mobile is to limit the number of lengthy product descriptions and images you have on your site. Break up large blocks of text into smaller sections and paragraphs, and use section headers when appropriate to break up large sections of content. Only include what is necessary to convert the traffic. 

As we’ve said a few times now, anything else is noise and will get in the way of converting browsers to buyers.

Allow Guest Checkouts

People are more prone to impulse buy on mobile devices. This is because they may be quickly deciding to buy from you while they’re out and about. For that reason, you shouldn’t require everyone to create an account before they can checkout. 

Limit the number of barriers people need to overcome before converting. If there are too many pages and steps each visitor needs to take, you’re hurting your conversion rate. Think of the reason why one-click checkout is so popular on Amazon. You should limit the amount of time people have to rethink their purchase; that’s what Amazon does, and it works.

Optimize Your Images

We’ve talked a lot about eliminating images, but what about the ones you decide to leave on your site? You want to make sure these are optimized as well, so they look good on mobile, function properly, and don’t take away from the ultimate goal of the page. 

Ensure that the images on the page are sized appropriately, so they load quickly. They should also be high-resolution images, so your website has a professional appearance. 

It’s also important to understand the different image files and how they pertain to mobile optimization. 

  • JPEG – Commonly used for photographs
  • PNG – High-quality graphics
  • SVG – Graphs, logos, and illustrations
  • GIF – Animations and moving icons

There’s no right or wrong file to choose, but keep in mind the applications of each and why you would want to use one over the other. Also, consider compressing image files so they aren’t taking up more space than necessary.

Link Your Logo

Sometimes subtle changes make big differences. Having a mobile-friendly e-commerce website that’s easy to navigate is important when you’re trying to convert traffic into paying customers. 

One great way to make your mobile site easy to navigate is by linking your logo to the homepage. Users often become frustrated when it’s difficult for them to get back to the homepage; linking the logo to the homepage is common practice for mobile-optimized webpages.

Provide All Necessary Contact Information

The best websites make it easy for visitors to get the information they need quickly and without too much effort. If users want to contact you, they should have plenty of contact points, and that information should be easily accessible. This improves the user experience and decreases the chances of frustrating your visitors. Always include a contact page link in your menu and your company’s contact information in your footer; consider using a click-to-call button for mobile.

Make sure that each step of the checkout process provides all the necessary information, as well. If your customer feels unsure about their purchase or they’re concerned that something isn’t right, they should be able to contact someone to check-in or complete their purchase. 

Be Wary of Flash

Version 4.1 of the iPhone and Android devices do not support flash, so you’ll have to use HTML 5 to see the content. For this reason, you should try to stay away from pop-ups and forms that use flash because they most likely won’t display properly, and they’ll take away from the overall appearance and experience of your website. 

Cross-Selling Saves Time

The greatest thing about cross-selling is that it doesn’t feel like selling at all. Think of Amazon and how they use cross-selling to increase their revenue. How many times have you been on Amazon and seen the section where it says, “people who bought this product also bought…?” 

This strategy is a great way to show your visitors what other products you have that relate to the product they’re currently interested in. It’s a non-pushy way to sell more items to the visitor you’ve already brought to your website. 

The most important thing to remember about cross-selling is that you need to optimize it for mobile viewing. We don’t recommend using any pop-up or graphic that distracts the visitor from the product they already want. The last thing you want to do is frustrate shoppers and cause them to leave your site without buying anything. 

We would recommend having a section similar to the Amazon example during the steps of the checkout process. If you collect the user’s email, you can use that to drive them back to the website by offering them a coupon code if they come back and shop similar items. 

Ask For Feedback 

You can use your email subscribers and past customers to gather information on how to improve your sales and checkout process. Who better to collect feedback from than the people who are shopping in your store? 

You can send emails to your contact list offering coupon codes or special deals if they provide feedback on your website’s user experience. This strategy is a great way to gather a large quantity of actionable information at one time without much manual messaging on your part. 

Final Thoughts

By this point, you should understand the importance of having a mobile-friendly e-commerce website. This is not optional in the current digital climate. More and more people are shopping from their mobile phones, and it’s becoming standard to have a website that loads fast and works well on mobile. If you want to boost your mobile revenue by improving speed and performance, contact the mobile website specialists at WompMobile. Learn more about AMPs (Accelerated Mobile Pages) or Progressive Web Apps (PWAs) and how they can benefit your e-commerce business by immediately boosting engagement, revenue and sales.