In today’s world, around 1.2 billion people access the internet through their mobile phones. Half of the total web traffic is generated from the mobile site. With such a great number of people migrating to the mobile platform, your e-commerce webpage needs to be modified and well optimized for this. It is a known fact that Google will favor websites that are more mobile friendly.
With improving advertising facilities and increasing sharing options, your brand image is hugely dependent on your mobile browser presence. Keeping all these aspects in mind, it is imperative to keep your webpages optimized for the mobile platform. What happens otherwise? Let us find out!
1. What happens when mobile web pages are not optimized?
Your visitors will leave, and your sales will plummet, as simple as that!
Migrating from a desktop website to a mobile site, a lot of changes need to be implemented in the process. If your webpage is not optimized here, what can possibly go wrong on the site? Here is what happens.
1.1 Dwindling SEO score
The easier your webpage is for navigation, higher are your chances of getting a high SEO score. This is because the bots online are not able to crawl into your pages and thus, the site becomes difficult to access. Poor navigation also impacts the browsing experience of your visitors in a big way, which can significantly affect your search rankings. You may ask why, well, that’s because; user experience is now a critical ranking signal for search engines.
A site with poor user experience is seriously frowned upon by the search engines and will certainly be consigned to the dark dungeons of the search results. God forbid, if that happens, your site will disappear from the search engine radar, and it inevitably loses all its search engine traffic – in a flash. Once your site loses the top slots, salvaging your site back to its earlier glory can be quite a cumbersome task!
Here are some tips to improve the user experience of your site!
Limit the number of drop-down menus. Too many of them can make it difficult for the search engine bots to crawl your site. A deluge of options can also overwhelm your visitors, which is a major culprit in increasing bounce rates on e-commerce sites. Higher bounce rates only mean one thing, an inferior user experience, which the search engines greatly abhor! And then the chances are very high that your site is shoved down to the lowest rungs of the search rankings.
Another major SEO impediment is the navigational layers! Mobile e-commerce visitors have very little patience. Hence, it’s imperative that you keep the number of clicks to reach a product to the bare minimum. Especially, if the user is on a slow internet connection, the more the number of navigation layers you have on your e-store to get to a product, the higher will be bounce rate.
Put simply, visitors will easily be annoyed by the delay and just leave your site without checking out your products. This poor user experience and the resultant increase in bounce rate can significantly impact your search rankings. So it’s highly critical that you keep the navigational layers to the lowest on your mobile e-commerce site!
Hide your menu items! Get them out of the way, and let it not tamper with the smooth browsing experience of your visitors. Your best bet would be to incorporate a three-line navigation button (quite common on most mobile sites) on your site. This button invokes the menu items only when tapped. This navigation button frees up the clutter on your site and hides them out of the sight of your visitors! This seriously improves the user-experience and also makes your site more search engine friendly!
Don’t be ambiguous with your menus! Keep it clear and succinct. The menus must lucidly tell the users where it will take them to if tapped. This is a major factor in increasing the click-through rate and user engagement, and most importantly, decreasing abandonment of cart on your mobile e-commerce site. Also, these two metrics are vital search-ranking signals for improving your SEO score!
1.2 Drop in sales
Talking about e-commerce sites, a lack of optimization in the web pages can actually lead to a drop in sales. The clumsier websites usually repel the potential customers before they start navigating through it.
A 2012 Google research reveals that 72% of the consumers preferred a mobile-friendly site. The survey also found that 61% of the visitors are likely to quit the site if they had a bothersome experience while browsing a site on their mobile device.
Many e-commerce sites are reaping the benefits of adapting their sites to mobile devices.
For instance, ProFlowers.com, a major flower retailer in the US could boost their mobile conversions to 30% after optimizing their site for mobile devices. And UK-based sports goods store Offspring could increase their mobile/tablet conversions to 15.19% after making their site mobile-friendly.
Now, being mobile-friendly is mandatory if you are heavily relying on Google for your traffic.
On April 21st 2015, Google rolled out a new algorithm that gives more preference to sites in their search rankings that are more mobile-friendly. In other words, non-mobile-friendly sites are likely to get penalized and lose their top slots in the search results! Companies were quick to adhere to the caveat by the search engine behemoth, as Google comprised a major chunk of the organic traffic for most of them.
1.3 Loss of interest
If there is too much information present on the site, or too many forms or fields to fill, or even popups suggesting advertisements, the viewer usually loses interest in the site.
One such example would be http://www.gatesnfences.com/ which is cluttered with text. The site, in general, has a user-unfriendly design, which is annoying for the eyes with a jarring color combination, awkward menu placement, and unpleasant font background colors and so on. All-in-all, the site presents an overwhelming browsing experience to the visitors with so much of information crammed into one single page.
The whole point of having a mobile based website is to ensure that the potential clients are able to access it easily on the go. If there is an excess of data, they will not have time to wait for the page to display its information.
Section.io tested out a sample of more than 100,000 user sessions over a period of over 1 week (in 2017) to see how page load time affected user bounce rate. Their test uncovered that 9.6% of the visitors bounced their site when the page load speed was just 2 seconds. And when the page load speed rose to 7 seconds, the bounce rate almost tripled by 32%!
Lower page load time also has a positive impact on the conversion rate!
A study conducted in 2013 by Intuit on the impacts of page load time on bounce rate revealed that there was a 24% increase in their conversion rate when their page load time reduced from 15 to 7 seconds. And interestingly, only an 8% rise in conversion rate when their bounce rate further decreased from 7 to 2 seconds.
1.4 Changes the brand image
In the e-commerce world, you need to make a brand name for yourself in order to work well and flourish. When your website is not well optimized for the mobile, it sends a bad message to the users. In turn, the reputation of the e-commerce site is hampered and the users do not recommend this business much.
Mobile-friendliness is the name of the game in the fast-changing and fiercely competitive e-commerce world!
An intriguing study by Thinkwithgoogle.com dubbed ‘I-want-to-buy-moments’ revealed that 82% of the smartphone users exclusively relied on their mobile devices to arrive at a product decision. And 93% of consumers who turned to mobile phones for product research ended up in making a purchase!
2. How Things Go Wrong In An E-commerce Website For Mobiles?
2.1 Leoneck Hotel
This was how Leoneck Hotel’s website looked like on mobile platforms way back in 2013.
The hotel’s website allows the users to book their rooms beforehand on the internet then and now.
But a few years ago, their site offered a poor user experience on mobile platforms. The guest had to face a lot of issues booking a room from their smartphones or tablets and had to eventually give up the browsing as the mobile site didn’t allow the users to zoom in on the images and pages. To say the least, the site was downright mobile-unfriendly.
But now things have changed! Leoneck hotel has revamped their mobile site and offers a fantastic user experience to the guests trying to take a look at a room and book it from their mobile device. The guests can now get a snapshot of how a suite looks like by scrolling through a carousel menu.
Take a look at these latest screenshots of Leoneck hotel’s mobile site.
2.2 Johns Hopkins Medicine
The Johns Hopkins Medicine website is undoubtedly a professional-looking website that is loaded with useful information and media on the topic catered to its targeted audience. But it had one major problem – it was slow and unresponsive on mobile devices.
Back in 2013, it used to get way too sluggish when visitors quickly tried to retrieve some critical information on a medical topic. Why did this happen? This occurred mainly because there were too much data on the page and the site was not optimized to handle such data-intensive pages on mobile devices! And needless to mention, an unresponsive site drive visitors away and greatly impacts the bottom line and reputation of your business. Although I wouldn’t reckon that the unresponsiveness would have adversely impacted a reputed brand like John Hopkins, it surely would have increased their bounce rate.
Fast-forward to the present, those problems are resolved and the site is quick and alert as a bunny on all mobile devices.
3. Is Your Website Mobile Friendly?
So, we understand how badly optimized mobile websites can look like. Too much data, unresponsive pages, unclear graphics are some of the things that can go wrong with it. The more important question here is – how do you know if your website is mobile friendly or not? Here are some tools that can help you diagnose the issue before we take steps to solve them.
3.1 Mobile-friendly Test
In this test from Google, you will get an insight about how Google bots will view your page. From here, you can actually gather feedback and understand how user-friendly your page is. In case your mobile website fails to pass the test, there will be separate reasons listed for its failure. Else, you will get a note like, ‘Page is mobile-friendly.’ This tool is very useful since this can decide how far down the search results your page is actually pushed into.
For instance, let’s take an example of forbes.com. Once you enter the URL in the tool there, the tool will check the mobile-friendliness of the website.
The tool will analyze the website if it is mobile-friendly, and would share the result.
It says that the page was only partially loaded, meaning, not all page items were loaded on the mobile version. The recommendation says that it can affect how Google sees and understands the page. For sure, if a site remains ambiguous for search engines, it always translated into lost rankings in the search results and ultimately loss of traffic!
If you haven’t yet made your e-commerce site mobile-friendly, you better be doing it right away!
But before you make any major modifications to your present site, check if your existing e-commerce platform is already mobile-friendly.
Open your website on a mobile device, and go through every possible navigation path. Repeat this test on a wide range of mobile devices and browsers. Check if it looks good on the mobile device and quick to respond. If it’s not, then probably your e-commerce is not yet optimized for mobile devices.
3.1.1 Tips to make your e-commerce site mobile-friendly
- You need to rebuild your existing e-commerce site using a mobile-responsive design. A mobile site with responsive design is quick to adapt its layout on varied platforms. Most online retailers are not developers, so the best way to accomplish this design is to hire an experienced developer.
- If you are not in a position to restructure your site, you can redirect your mobile traffic to another website that’s hosted on a separate sub-domain. But, you are only building a separate website structure and not a completely new website in this case. This structure will access all the images on your main website and avoid the hassle of maintaining two different websites.
3.2 PageSpeed Insights
This tool has grown to be rather popular for testing the website’s optimization. Its use is not restricted to mobile websites alone. So, you can get a comparison of the page’s view from both the desktop and the mobile, in the form of screenshots. Valuable additional information is also provided to find the root cause of the site’s bad performance. This could include excessive content, too much graphics, slow loading speed and the likes.
All you need to do is enter the web page URL and click on Analyze. Once analyzed, the tool will share its own share of possible optimizations.
As for an instance, we took the example of forbes.com, and the tool scored it 45/100 which means that the page is not optimized and would deliver a slow user experience.
The tool further suggested the possible optimizations including leverage browser caching, prioritize visible content, optimize images and so on.
For instance, to leverage browser caching, the tool suggests setting an expiry date or a method to load the resources that are already downloaded on the local disk rather than downloading it all the way over the internet.
And to prioritize visible content, the tool suggests cutting down on the HTML required to render above-the-fold content.
The method suggested by the tool to optimize images is to appropriately format and compress the images to reduce the amount of data used by it, saving a lot of space on your server.
If you want to see how someone actually implemented these suggestions, here is an interesting case study that I found on Moz that explains how a site named monitorbacklinks.com used this tool to achieve a 100/100 score on both mobile and desktop platforms.
3.3 Keynote MITE
This is yet another tool that can be used to test your website’s compatibility with a range of more than 2,200 emulated devices. This comes free with registration and is a very detailed tool. This gives a lot of information about your website in order to figure out what went wrong! Back in 2012, Keynote MITE was the company chosen by Google to run their first mobile testing site.
A typical Keynote MITE test result will look like this,
This tool is different from Google’s mobile-friendly test we discussed above. Keynote MITE focuses more on how users would perceive and experience a web page, contrary to Google’s mobile-friendly test which focuses on how bots would actually see your website.
Even though this is a paid service, a lot of users find this tool very interesting. Why is it so? BrowserStack can analyze the effectiveness of the website across many devices and platforms. By the way, the tool also offers a Free Trial option that allows you to instantly get started with this tool and take it on a test ride after signing up for free.
By means of screenshots, it displays exactly how viewers see your page. This information can be used to compare the site’s responsiveness across platforms.
Here’s how a typical BrowserStack test report would look like
Since this a cloud based software, this tool lets you test your website on real device cloud instead of virtual devices unlike other tools in this list.
However, it can be a little slow in performance, since it loads each website individually across different devices.
4. How Do You Optimize Your Website?
Once the issues and errors have been detected in the website, it is entirely possible to solve them and optimize your page. This can be done with the help of a few ideas and tricks. This will help you improve your page’s performance and thus increase the SEO ranking.
4.1 Check all your content on the mobile platform
A lot of graphics and media files that can be easily viewed on the desktop are not that easy to view on your mobile. This could be attributed to a mismatch of format and the likes. Instead of assuming that media files work on all devices, it is best to check the content before going ahead with it. The most recommended method to test your site’s content for mobile-friendliness is to make use of a tool like Google PageSpeed Insights, Keynote MITE or BrowserStack as discussed earlier. To fix an issue with your mobile content, all you need to do is to follow the instructions given by the tool at the end of the test (as in Google’s PageSpeed Insight’s tool). For instance, you could open the website locally on your mobile and check its compatibility. If it works you would know it can be included in the mobile version of the website.
Further, you should avoid using Flash just because many mobile users can no longer view Flash elements. It is thus always better to stick to Java or HTML 5 if in case you need to add eye-catching functionalities.
Also, avoid using overloading your mobile website with too many popups, and further, make sure that your website’s navigation is finger-friendly.
Karimrashid.com is a brilliant example of how you can blend simplicity with a responsive and classy design.
The site is clutter-free and features all the projects of the designer smack-bang on the home page with large attractive icons and graphics, which makes his project portfolio easy to access with a simple scroll. The menu is tucked away elegantly towards the top-right corner of the site, which can easily be invoked with a simple tap to access additional business information about this renowned industrial designer.
If you are planning to launch an e-commerce store here are some of the best practices that you can incorporate to offer the best mobile browsing experience for your customers.
- A responsive design – Your e-commerce site must have a responsive design that adapts its size and orientation quickly with every changing platform, making it versatile across different platforms – be it desktop, smartphone, or tablet.
- Make it omnichannel – An omnichannel e-store will allow your users to use multiple channels to complete a purchase. Your customer may use his smartphone to browse the products and then switch to his tablet to add those products to the cart, and then finally complete the checkout using his desktop. Only an omnichannel e-commerce platform will let your customers do such device hops.
- Thumb navigation – Your customer must be able to do their entire navigation of your site using just a thumb. There shouldn’t be a situation for them to pinch or zoom the site. This gives a robust mobile shopping experience to the users.
- Easy-to-spot CTAs – Keep all your calls-to-action above the fold and easily visible. This can greatly improve the shopping experience as well as increase conversion rate
- Keep the content short and succinct – To maintain a clean and clutter-free design on your mobile site, you must keep the content as clear and succinct as possible.
There are several other ways to make your site absolutely mobile-friendly. This blog post at due.com has more useful tips on this topic.
4.2 Are your redirects working fine?
If often happens that a webpage redirects the viewers to the mobile site when it detects the platform. The best way to check if your mobile redirects are working fine is by testing the website on various mobile devices to see if everything is fine.
It is imperative here to ensure that paths and query strong arguments are taken care of here. Check every hyperlink and redirect beforehand. You need the crawlers working well on your mobile site. A few safe practices while you are redirecting to mobile site include:
- Using .htaccess rewrite redirects Please visit this page to learn how to redirect your site/URLs using this method. There are also some best practices that you must adhere to while implementing various redirections with your .htaccess file, which is discussed in detail in this interesting post at Koozai.com
But for a quick reference, here are some critical do’s and don’ts of using redirections and .htaccess file,
- First, you must decide which redirect you must choose to add in your .htaccess file. Is it a 301 or 302? (NOTE: You can only edit your .htaccess file if you have server access)
- When to use 301? If you want to update an existing webpage (with a lot of traffic and backlinks) with a new version of the product (and a with a new URL location) and don’t want to lose the traffic, use the 301 redirection. This URL redirect tells both the search engines and browsers that the page has been moved permanently to a new location. The 301 redirection also preserves the SEO score accrued by the old page and passes that on to the new URL.
- Another scenario where you need to use 301 is when you made a typo in the URL and detect it after several weeks or months. But if you fix the typo right away there’s no need to use a 301 redirection
- When to use 302? Use the 302 redirection only when you purposely don’t want to pass the link juice (SEO value) to the new page from the old. But using a 302 redirection instead of 301 will be a bad idea!
- Comment your changes. It is always a good practice to comment any new function that you add to your .htacces file. This will help you keep track of all the changes that you made to the file. This can avoid any misunderstandings and potential errors in the future.
- Test it. Make it a point that you test out every function that you add to your .htaccess file to make sure that it is working properly as intended. Carry out your tests when the site is least used.
4.3 Does your website have a mobile ad before the page loads?
This is usually a bad idea. It often happens that just before the e-commerce website loads, a separate page pops up that asks you to download the app or focus on an advertisement.
Here’s one classic example of such pushy mobile ad,
These invasive ads are considered as a speed bump on the way and discourage the viewers from continuing on to the site. The site’s content gains precedence over everything else. Above all, it is a sure-shot recipe to attract an “intrusive interstitials” penalty from Google as they completely make the main website inaccessible. So it’s better to stay away from all ads or pop-ups that make your main website content inaccessible to your visitors.
These were a few tips on how you could optimize your e-commerce website for mobiles and attract more traffic. What are your views on this? Do let us know in the comments.