In a previous article we looked at the accelerating trend of mobile-friendly shopping in ecommerce, which is set to outpace desktop shopping soon. With more than half the world’s population now accessing the Internet via mobile it’s imperative for you, as the owner of an online store, to optimise it for the mobile shopping experience. Here’s how.
Building A New WooCommerce Store From Scratch
Given the difference in user experience between a mobile browser and a desktop browser, you might be tempted to try and design a separate website and (simpler) mobisite – don’t! You’ll just end up with two sites to manage, troubleshoot and update instead of one – and your SEO will be heavily impacted, too. Simply take steps to ensuring that the site you’re about to build in WordPress on desktop will also be mobile-friendly.
You can start by installing the WPTouch plugin. It will engineer your site to be automatically responsive in nature, i.e. it should look good and work well on any size screen, once live.
To build a successful online store, you’ll need to install a few more plugins (besides WooCommerce and WPTouch), to add more functionalities that enhance the customer UX and purchase journey. Make sure that any plugins you choose are also responsive, so that they will automatically adapt to mobile like the rest of your site.
In building your online store, follow these mobile-friendly design principles for the best possible user experience:
- Minimise the need for extensive scrolling by keeping your pages’ content short and prioritise key content to sit “above the fold”.
- This also pertains to your choice of WordPress theme – here’s a good example of an “above the fold” theme and here is a selection of some more mobile-compatible themes.
- Give your site a big, simple navigation bar – some great examples here. The best format is a “hamburger” format, which most mobile-friendly WordPress themes should incorporate.
- Avoid having unnecessary pop-ups – which can just about take up a whole mobile screen – and make contact forms simple, with large fields.
- You are likely to need an engaging product gallery. FooGallery PRO Commerce is designed especially for a WordPress/WooCommerce store, and will give you an easy to browse, shoppable gallery fully integrated with WooCommerce (and add FooBar to stimulate sales through notification bars, countdown timers and CTAs). Both plugins are fully responsive.
- Optimise all of your images, which means formatting them correctly and compressing their file size, so that your site will always load and run briskly, on any device. You can get some help from our guide to image optimisation.
- None of the things you do will be of much help if your website hosting is sub-optimal. To ensure consistently good site speed, you should choose a dedicated website hosting plan, rather than a shared hosting plan, so that your site will not be jostling for server space with other websites. BlueHost is a popular dedicated hosting provider – and here are some other good options to consider.
Optimising An Existing Store For Mobile
First, have a look at these examples of great WordPress ecommerce sites on your mobile phone. You should find them easy to navigate and easy to shop.
Next, open Google Analytics and see how much mobile traffic you’re currently getting on your site (simply login to your Google Analytics account, select the web property for your website, then scroll down to Sessions by device to see desktop vs mobile traffic).
Now open your online store on your phone and walk yourself through the experience of activating an account, browsing products, adding them to your cart, going through the checkout process, submitting an enquiry and browsing different pages. You should quickly get a sense for where improvements need to be made for mobile, based on your fluctuating levels of frustration!
Here are some considerations to prioritise:
- Your site should be light on text throughout. If you find yourself having to scroll down the page to read a lot, you should trim down the words. A website should be driven more by images than by text, especially on mobile.
- All of your site images should load briskly; excessive image file size is one of the biggest factors in slowing site speed. If you find you need to go back and address this issue, see our guide to image optimisation.
- Your search box should be big and visible on every page. You want to make searches as easy as possible, especially on mobile. You might consider installing the Searchanise plugin, which has helpful features including predictive search with typo autocorrection and synonyms; “Did you mean” suggestions; search functionality across both products and site content; personalised search results and in-search product previews.
According to Searchanise, “Our clients report at least a 20% rise in conversion, with some reaching as much as 60%”. - Any clickable elements like the navigation bar, buttons, etc. should be large enough that your fingers don’t feel like giant sausages when you engage with them on a mobile phone. Increase padding around menu items, so it’s easy to tap on them.
- Are the contact phone numbers on your site rendered as text, rather than images? You should be able to tap-to-call them easily.
- Do the contact forms on your site have minimum information requirements and large fields, so that they are easy to fill out and submit?
- Your product galleries should be fun and easy to browse on mobile and have seamless integration with your payment portal. As mentioned in the above section, our FooGallery PRO Commerce plugin will give you a mobile-friendly, responsive gallery tied directly to the purchase journey.
- Most importantly, you want customers to buy from you – which means making payments easy and fast. You can set up both Apple Pay and Google Pay options for your online shoppers. However, there are several other great payment gateways you can choose from including Stripe, Square and PayPal. You can’t really have too many payment gateways because you don’t know what any particular customer’s preference might be.
Make all the pertinent updates on the desktop version of your online store, before reopening it on mobile and checking on them. If you are still having issues with the site’s speed and performance on mobile, check whether you’re on a dedicated website hosting plan (rather than shared) and consider installing the WPTouch plugin, which helps to make WordPress websites mobile-responsive.
Check Your Mobile-Friendly Status
Once you have built or updated your online store with a mobile-first approach, Google has a great tool to check if it is indeed mobile-friendly. Simply enter your website address here and wait a minute or two. If Google gives you the green light, your online store is set for successful sales via mobile, as well as robust SEO to drive them (Google prioritises mobile-centricity in ranking websites). If you’re having trouble getting set up, you can look for expert WooCommerce theme development services that will help you create a custom responsive website.
Optimised For Mobile? Now Have Some Fun
As discussed in our article on mobile trends, several tech innovations have emerged recently, that can make mobile shopping a more engaging experience and draw more mobile shoppers to your site. You could install a chatbot plugin to handle customer queries when you’re otherwise engaged; introduce a virtual tour of your physical store or product range (here’s a handy plugin for this); enable voice shopping for the customer of the future, and more.
Good luck and see you on the small screen.