Beginner's Guide to Making Your eCommerce Site Mobile-Friendly

One of the best ways to make your eCommerce site better is to make it mobile-friendly!

However, believe it or not, making your eCommerce site mobile-friendly is not as straightforward as clicking a few checkboxes in a form. It involves wide-reaching changes in the way you present your business and your products to potential customers. 

In this article, we will consider both technical and non-technical aspects of making your eCommerce site mobile-friendly.

Is your website already mobile-friendly?

This is the first question you should be asking yourselves. Do not assume that your site is already mobile-friendly; but, also do not assume that you need an overhaul of your site to make it mobile-friendly.

If you are using services for eCommerce hosting such as Shopify, chances are that they have already included some sort of tools and settings needed to make your site mobile-friendly.

To help you check whether your site is already mobile-friendly, you can use the following tools:

1. Google's Mobile-Friendly Test 
2. mobiReady
3. Mobile Friendliness Test Tool
4. Responsive Testing On 2000+ Real Devices & Browsers 
   

These tools will not only say whether the site is mobile-friendly or not but also lists down potential issues. 

‍

If you need more details, Google’s web.dev Measure and Google PageSpeed Insights calculates the relevant metrics to your site’s mobile-friendliness. The relevant metrics they used in assessing the mobile-friendliness are the following:

1. First contentful paint marks the time at which the first text or image is painted
2. Speed index shows how quickly the contents of a page are visibly populated. 
3. Largest contentful paint marks the time at which the largest text or image is painted. 
4. Time to interactive is the amount of time it takes for the page to become fully interactive.
5. Total blocking time is the sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. 
6. Cumulative layout shift measures the movement of visible elements within the viewport. 

For Google PageSpeed Insights, they go beyond simply calculating these metrics to also offering opportunities to help the page load faster, with their corresponding estimated saved loading time. 

‍

You can use these free tools to make a quick check on what can be improved on your site to make it more mobile-friendly.

Make your eCommerce site responsive

‍

There are two main types of web design: adaptive design and responsive design. Both aspire to account for the diversity of the types and sizes of screens of the devices accessing the websites nowadays. 

Adaptive design uses a set of distinct layouts for screens of different dimensions. The website gathers information on the screen size of the device and then loads the layout that works best for the given screen size. The responsive design, on the other hand, uses a fluid layout that moves the elements to adapt to the screen size of the device. 

Interaction Design Foundation compares the pros and cons of each design. The adaptive design offers the following advantages:

• Best UX for the appropriate device
• Can sense their user’s environment
• Ads can be optimized
  

... while the disadvantages of the adaptive design are as follows:

• More labor-intensive
• Tablets and netbooks can have trouble with site configuration tending to be smartphone- or desktop-oriented
• Search engines have trouble appreciating identical content on multiple sites

Meanwhile, the responsive design offers the following advantages:

• Uniform & seamless interface and experience
• The abundance of templates to use
• SEO friendly
• Often easier to implement
  

... while the disadvantages are as follows:

• Less screen size design control
• Elements can move around
• Advertisements lost on screen
• Longer mobile download times

In general, you'll want to choose a responsive web design. 

Choosing a responsive web design makes it easier for you to maintain and redesign the website, and account for the wide variety of screen sizes available nowadays. It is also easier for you to change the content of the website regularly, as you only have to change a single set of pages.

Make your eCommerce site lighter

‍

Is your site loading too slowly?

1 in 4 visitors would abandon a website that takes more than 4 seconds to load. (Website Builder Expert)

Yeah. It’s that bad.

And, even the biggest websites are not immune to this.

However, we can do something about it. 

There are several ways to ensure that your eCommerce site loads faster. A lot of them are quite technical and require some level of expertise. Here are some of the tips that you can do:

Choose a simpler theme

If you are using an eCommerce service that offers their own website builders, chances are they offer a set of themes that you can apply to give your site a consistent feel.

Should you stick with that theme?

Not all themes are created equal: some generate more elements and require more images, videos, and other files that could slow down the time it takes to load that webpage. 

If your theme requires a lot of elements and files to load, then it’s probably time to look for a fresher and lighter theme. 

Besides, getting a new look can also make your eCommerce site look fresh and new again. 

Reduce images 

Do you really need that specific image on your site? 

As you already know, it is possible to design or select a theme for your site that relies on a good color palette to make a good impression on those who browse it. 

So if you don’t really need that specific image on your site, then drop it! It might also help in making your website look good.

If there are images that you cannot remove from your site, such as the images of your products or services, then you can take one or more of these actions, as suggested by Learn to Code with Me: 

• Changing the resolution: reducing the “quality” of the image (and thereby the file size)
• Compressing the picture: increasing the efficiency of image data storage
• Cropping the picture: when cropping, you are cutting out unneeded areas and thus making the image smaller in size

Check your plugins

When you first built your site a long time ago, there is a high chance that you have desktop users in mind, so you added a bunch of plug-ins to enhance their experience and hopefully buy your products and services.

But these plug-ins cost a lot of resources and slow downloading times. 

Do you really need those plug-ins now?

Reassess the plug-ins that you use. 

It might be possible to replace them with a few lines of code, as new functionality and its corresponding code to access it is being created everyday. 

Or replace them with a plug-in that loads faster and offers you more functionality.

Or maybe you don’t need anymore the functionality that the plug-in gives you.

In that case, remove them to make your site load faster!

Minify your code

Lots of code are involved in creating or generating a website.

If a website builder is utilized, chances are the website is built from a template. 

If your site still takes time to load even after reducing the resources needed, then it’s time to consider minifying your HTML, CSS, and JS code.

Minification is a process of stripping out unnecessary characters and lines from your code while ensuring that the code still works as intended.

As there is more than one way to code a certain feature or functionality, minification ensures that the entire site takes the least amount of bandwidth to load. Minifying your site sounds like a daunting task, but there are actually online tools to help you. Here are some of these, as selected by Elegant Themes:

• Closure Compiler (JS) 
• cssminifier.com (CSS) 
• javascript-minifier.com (JS)
• csscompressor.net (CSS only) 
• jscompress.com (JS)
• refresh-sf.com (HTML, CSS and JS)
• htmlcompressor.com (HTML, CSS and JS)
• minifycode.com (HTML, CSS and JS) 
  
  

Make your eCommerce site neater and easier to use

Following the tips in the previous section to make your eCommerce site load faster will also help make your site neater and easier to use, but there is so much more that we can do!

Toptal recommends the following tips in making your site neater:

• Follow the brand identity: Choose a style that reflects the brand and the nature of products and services being sold. This includes choosing the colors and fonts and applying them to all pages. Ensure a consistent brand experience across all channels.
• Adopt visual hierarchy: The most critical content should be at the top of the page, with less critical content going below the page. Whitespace can be reduced to achieve this.
• Do not over-design: Choose a font format and stick with it. Use high-contrast text and background colors to make the content clear and readable.
• Stick to known symbols: Use icons or symbols that are easy to identify to ensure that the users are not confused. 
• Avoid pop-ups: They are annoying and forgettable. 
  

Here is yet another rundown of tips that you can apply to your eCommerce site to improve its neatness, brought to us by Wishdesk:

• Again, avoid pop-ups.
• Ensure the right size of all clickable design elements: the right size will not only account for the screen size and the layout but also aid the clickability in touchscreens of the mobile devices. 
• Take care of readable text: the right font size will let you see as much information as possible without making the text too small.
• Provide enough space between the layout blocks: a proper amount of white space aids in the readability of the content
  

Beyond making your pages neat, you can further make the site easy-to-browse. Keap recommends these 5 tips to improve the navigability of your site: 

• Make parent categories prominent: choose the right keywords for the categories of the content of your site. A good way is to use the categories of the products you sell.
• Introduce your subcategories: the subcategories will improve not just the navigability of your site but also make sure that the pages will not be cluttered by too much content of a wildly different nature.
• Have a category just for new arrivals: besides improving navigability, this makes your store look fresh with new items.
• Include a noticeable search bar: if the user is in a rush, they can simply search for the specific item to cut the times of browsing through categories and subcategories. Search bars are often at the top of the page. 
• Stick to conventional navigation design: sticking with the designs commonly used will ensure that the user is not confused while navigating the site. 
  

The final tip

Always test whether your site is user-friendly or not after implementing changes in it!

We can do so especially now that we have web.dev Measure and Google PageSpeed Insights to calculate the metrics and see the changes in their values. 

All these tips that we had above all serve one purpose: to make it easier for you to convert the users to customers. 

It’s possible that you don’t need to change other aspects of your site design as they already serve their purpose well. But if you need to, always test them first.

I hope you learned a lot here and apply these tips to building your eCommerce website!