How To Optimize e-Commerce Websites For Mobiles?

By Abhinav Girdhar | Last Updated on February 15th, 2024 7:35 am

App Builder Appy Pie, February 16, 2018: This is a mobile first age where most of the new age customers are doing their online shopping through their mobile devices including smartphones, mobile phones, tabs and more. Hence, when you are developing a retail shop or an e-commerce website of your own, it is of extreme importance to take into account this preference among the customers. The customers are not only using their mobile devices to view your website, but also to order, check out and pay through it. Some of the leading e-commerce portals have confessed that 50% of their traffic comes from mobiles now! However, an interesting point that we would like to stress on here is that when it comes to revenue only about 37% of the visitors completed a purchase on a mobile device as compared to 52% purchases that were completed on desktop devices. Why the disparity? Why is it that equal number of people are looking at the products or the website on mobile devices and on desktops, but when it comes to buying or ordering a chosen product, more people do it on the desktop? Is it because people browsing on the mobiles are simply browsing with no intent to buy? Or is it because the entire flow of ordering, checkout, and payment is not as greatly optimized as it should be for the users who are using their mobile devices.

What is mobile optimization?

Mobile optimization is essentially a process to ensure that the website visitors who are using mobile devices have an engaging and user-friendly experience that has been optimized for the device being used. People are spending an increasingly high amount of time on their mobile devices including tablets, still there are quite a few websites who are ignoring to account for the variety in the screen sizes and load times. What mobile optimization can do here is that it can look at a site design, its structure, page speed, and other such things to ensure that inadvertently, the mobile site users aren’t being discouraged or driven away from completing a purchase.

Why is it important for e-commerce websites to be optimized for mobile devices?

Like we said, this is a mobile first era. Where more and more customers are looking for the desired products with the intent to buy them, on the go! For the past few years the number of mobile devices has grown exponentially. This is exhibited by the fact that today the mobile and tablet browsing globally is 51.3%, higher than the 48.7% of desktop browsing. This figure indicates the importance of optimizing a mobile e-commerce site for a seamless user experience.

Points to consider for mobile optimization of your e-commerce website.

In this environment it is important to consider whether you want to build an entirely customized mobile experience in addition to and independent form the desktop website or you want to optimize the mobile experience. The latter may also be referred to as a responsive site, because the site is essentially being developed to respond to the different screen resolutions. There are pros and cons to both the websites, but the trend for most of the small and medium sized businesses is to have a responsive site design.

1. Does your website need to have an entirely unique mobile experience?

This is the thing that needs to be considered at the initial stage, before you begin doing anything actually. Would it be enough to just tweak and play around with the layout for smaller screens, or do you need an entirely new mobile experience? If at any point you feel that there is a need to develop an entirely different workflow for the mobile site, you would have to distance yourself and think if a responsive design would suffice! Alternatively, you might also rethink the entire workflow. It is important that you keep it simple & intuitive. Sometimes it is enough to make small UX & UI changes and rework specific aspects of the desktop interface in order to better accommodate the mobile experience. In case you feel that the site is way too complex to be adapted to mobile, you must consider an overall refresh then!

2. Would you be removing some of the content to simplify the mobile experience?

It is sometimes important to do this but be careful not to remove anything that is of critical importance to the overall experience and to the brand story. In case you are considering this, maybe you should look at the content with fresh eyes and analyze whether the content is too much, even for the desktop version. Curating content in a way that disrupts the consistency might not be appreciated by the end-user as they might take a look at both the versions of your site.

3. How would you design the navigation for different devices?

In case your website has a complex structure with multiple levels and nested products, you must consider restructuring the entire content strategy and coming up with a simpler, more free-flowing strategy. Whether it is the mobile site or the desktop site, you must avoid building more than one nested content level. This is not only a lot easier to build but has also proven to be a lot more intuitive and easier to navigate for the users.

4. Is it easy to tap the clickables?

On your desktop site, it is a mouse pointer that would be clicking a button or link, but on a mobile device, it will be a finger. The finger is a lot bigger than the pointer, hence it might obscure the clickables entirely. You must make sure that the elements users are going to interact with are big enough and are well spaced on the smaller screens as well.

5. Would you be able to handle grid and image layouts on different devices?

The number of columns often need to be changed according to the screen size. However, beware of the manner in which this might impact the layout and balance. Sometimes when the number of columns does not divide evenly into the total number of items which might lead to you having “widow” thumbnails, especially in smaller devices. Though this might not always be possible but try and avoid it as much as possible.

6. Have you been using vector icons or icon fonts?

If you haven’t been doing this yet, do it!

7. Would your images look as good on retina screens?

You do not just have to think about iPhones and mobile devices, there are retina screens to think about. Retina screens are quickly becoming almost a standard on the newer laptops and desktops.

8. Have you considered the impact of retina resolution images on bandwidth & speed?

This is one of the trickier things to accomplish, and there still are no industry standards in place for this, nor have the best practices been established for this. However, as things are going, the srcset attribute is quickly emerging as the most effective way to handle this. One shortcut for the people looking to reduce efforts is to use the largest image you will need, but this unnecessarily weighs the pages down which can be hard on mobile data users.

9. How would your big banners & sliders translate on a small screen?

In case any of these features have any text overlays, you can then consider rendering the type with HTML & CSS in place of embedding them in the image. In this way, you keep it flexible enough to be readable on smaller devices. If you choose to embed text in the images, it may become too small to read on a smaller device. Some themes might even require you to move the text completely below the image so that the text can be as big and bold as needed without compromising the image.

10. What would you do about the big fat logo, the complex header, sidebar or the footer loaded with info?

In case you have any or all of the above-mentioned features on your desktop website you would need to strip them down and simplify them for smaller screens. Are there any features that may be hidden or collapsed in the hamburger menu? You might have to hide certain important and not so important call to action buttons on the desktop site. In doing so you would need to figure out whether doing so is going to diminish the functionality. If so, then the buttons would have to placed outside the collapsed menu.

11. What about the hover-effects, you had on links and buttons?

In case this is a critical feature for your site’s user experience, then you would have to figure a way out to make it work especially on the touch devices that do not have hover feature. It might be a good idea to remove any dependability on hover effects for key functions and keep them exclusively for subtle enhancements.

12. Can you optimize the sliders & popups for smaller touch-screen devices?

When you have sliders on the desktop website with left/right arrows you might decide to keep them on the mobile site as well, but if you were to optimize these functions to work by way of swipes, the user experience is enhanced manifold. These arrows may also obscure the image when seen on smaller screens.

13. Have you optimized the forms for smaller devices?

If your website has form(s) on it, care must be taken that the field labels are clearly visible. Also when the user taps on a field to enter the required information, the user view must zoom-in, in the correct spot. Also pay attention to the field types. Each field type might warranty a different type of keyboard like numbers, mail addresses, text, URLs etc. and for a better user experience it is important that the correct keyboard is triggered for the field they tap on.

14. Is the checkout part optimized for varying screen sizes?

The whole point of optimizing the website for a mobile device is making money from this platform. If, however, the process of checking out and making payments has unsavory hiccups, most users would be discouraged from completing their purchase. It is important to go through the whole process of ordering from browsing to checking out in order to understand the flow of the process and figure out any bumps that might need your attention. This process must be carried out for all possible devices and screen resolutions.

Strategies to Optimize Your e-Commerce Website for Mobile Devices

After having considered these crucial points and having listed out the concerns and considerations that you need to have an eye out for, it is now time for you to strategize how you are going to actually optimize your website for the mobile devices of varying sizes & resolutions.

1. Make Checking-out A Breeze

The main idea or intent of an e-commerce website, whether on the mobile device or on the desktop, is to make users complete a purchase and make the payment. This is why the process of checking out and making the payment must be flawless and intuitive. The call to action buttons for “Add to Cart” or “Checkout Carts” must be designed and placed in such a manner that they are easy to locate, infact they must be staring the user in the face! One of the most effective ways to do this is to incorporate the Call to Action buttons in the flow of the users’ seamlessly. You can also choose to place them at the top of the screen for maximum visibility. The whole process between checking out and payments must be free of any hiccups or stumbles. One good way to do this is by giving the users multiple options to complete their payment including but not limited to using an integrated payment gateway, encouraging them to create and login into their accounts on the site and use the credit or debit cards that they might have saved on it, complete their payment through a visitor login with a credit card, or cash on delivery if they wish to! Expert Tip: in case you are working on Photoshop, you can integrate your Photoshop account to Adobe Preview on your phone or any other mobile device in question to get a preview of the mobile user experience.

2. Let Users Find What They’re Looking For With Ease

If they can’t find it, they’re not going to buy it! in a brick and mortar store there are signages of differebt sizes, and of course the sales personnel to guide the customers and help them to look for the things they are interested in or intend to buy. This needs to be translated well into your e-commerce site as well so that customers can easily browse through the various categories as they look for the products they want to buy. While the search bar at the top works well on a website on desktop, the mobile screen is cramped for space and you would need to save up on it. Simply put a search icon there and make it expandable, so you save up on space without compromising on functionality and user experience. Right at the bottom of the fold, you can display the recommendations like recent searches, trending searches, or some such things so that users can jump to them with ease. The sort & filter feature comes in real handy, as users can filter their products based on price range, or through categories that makes sense for your e-commerce site. Expert Tip 1: one of the most important things for a user on your e-commerce site is to feel comfortable knowing that every thing that they do is reversible, which means that they should be able to “Back” out of everything. Hence, on the search pages, users must have access to clear “Back” & “Cancel” buttons so that the users may return to the home screen or the page they were on previously. Expert Tip 2: First map out the whole path that the user will traverse & plan out the best way to present the categories in a hierarchy that would make sense to the user. Only after you have done this exercise should you begin designing the navigation bars.

3. Encourage The Users To Buy

Isn’t that the whole point? To convince a user to buy anything from you, the copy on your website, the accompanying images and videos must be engaging and should convey all the important information. Especially in case of unfamiliar objects, the users tend to need a little longer to take the buying decision. This is where the description of the product that you put up gains importance. However, when it is a mobile screen, space is going to be a concern. Here, you can incorporate a “Click to know more” button and squeeze in a lot of information for the users to read at will. In fact, you can even do away with some of the information that is not so important when optimizing the site for mobile. Expert Tip: The mobile load speed is the single-most important aspect in deciding the quality of experience your customers are going to have. Optimize images, reduce their size, and also the size of the video files to increase mobile friendliness.Create Your Own App

Abhinav Girdhar

Founder and CEO of Appy Pie