How to Make your Ecommerce Site more Mobile Friendly

The number of users shopping around and completing purchases using smartphones and tablets is bigger than ever. An ecommerce site designed exclusively for desktops, no matter how well done, is no longer a viable strategy in ecommerce. For starters, the user interface for mobile devices (a small screen with touch-based inputs) makes it cumbersome for users to navigate desktop-only sites. This inconvenience alone contributes to increased bounce rates and abandoned carts. In addition, search engines now use “mobile-friendliness” as a factor in deciding how well a website ranks in search results (especially for searches done on a mobile device). In this post, we'll cover the most important changes you can make in order to provide your users with a convenient shopping experience that makes it easy to place an order from anywhere, on any device.

At the basic level, taking an existing desktop site and optimizing it for smartphones and tablets entails using existing sections of content from the desktop site and organizing them in a mobile-friendly layout by leveraging scan-able content (with large-size font for smaller screens), intuitive navigation (think: thumb-friendly), and clear calls to action.
    
Additionally, the conversion paths on your mobile site should be as short as possible. Generally – the fewer steps it takes to buy something online, the higher the chance of conversion from mobile users. Look for ways to declutter your site's navigation, consolidate product categories, streamline checkout forms, etc.

Finally, use A/B testing to test as many elements of your site as you can to determine which variables perform the most successfully. Part of doing well on the mobile front is collecting data and putting it to use on your mobile site. As mobile consumers engage with your ecommerce site, collect data and adjust your strategy accordingly:

  • time spent on a page
  • number of returns to that page
  • average page views before making a purchase

Shifting your site’s focus to mobile will require time and resources. But, as the number of mobile shoppers inevitably grows, redesigning your site for mobile usability now may set you up for greater success in the future.

Tips for Mobile-Friendly Checkout Forms

In today’s digital age, reducing usability hurdles and simplifying your ecommerce site's “path to purchase” for mobile shoppers is crucial. Responsive web designs and simplified navigation are key to creating a positive mobile shopping experience. Unfortunately, form fields tend to be overlooked in this regard.
    
A simple but essential part of any ecommerce site, forms allow e-tailers to collect customer information to complete orders and set up user accounts. However, forms can produce frustrating hurdles for mobile shoppers who must manually input information via small touch screens. To keep mobile customers from bouncing off of your site or abandoning their carts, make sure that your website forms abide by these design guidelines:

Minimal form fields

For mobile users, each blank form field is a step in the registration and/or checkout processes. In ecommerce, each step is an opportunity for users to bounce. By reducing the length and complexity of your forms, you reduce cart abandonment rates too. One common mistake is requiring customers to enter the same information for multiple form fields, such as for email and password confirmation. The purpose of repeating form fields is to reduce user-submitted errors - but there are other ways to achieve this. For example, you could make password creation forms visible by default to allow customers to easily see if they have made an error. You can also show new customers the bare minimum of forms for their first purchase, then follow up with additional forms via email.

Use autofill

By streamlining the process of inputting information, you reduce your customer’s exposure to checkout friction. Incorporating autofill features into your forms accomplishes this while also reducing the amount of user errors that come from unassisted manual input.

Streamline form navigation

To make it easier for mobile shoppers to input information and navigate between fields, make sure your forms are vertically aligned. With this layout, users see multiple fields at once and only need to scroll up or down to see more (as opposed to up, down, left, or right with side-by-side form fields). You can further streamline forms by combining single input fields that request related parts of related information. For example, instead of having fields for First and Last name, area code and phone number, or month/day/year (3 types of information, split among 7 fields) - combine them to create a Full Name field, Phone Number field, and Birthdate field, respectively.

Mobile Functionality Tips for Ecommerce

Making sure that your ecommerce site is compatible with mobile devices is critical for maintaining a good shopping experience – not just for your current customers, but also for new customers who may get their first impression of your brand through a mobile browser. While developing your strategy for mobile users, remember these guidelines for giving your customers the best mobile experience.
    

Size & Speed

On average, internet connection speeds for mobile devices are slower than desktops. More features and content take longer to load - and this time is emphasized for your mobile users. A feature-rich desktop version of the site is a great idea, you'll need to turn off some of these features on the mobile site to keep loading times down.
    

Navigation

Screen real estate on mobile devices is limited. While working on the size and speed of your mobile site, consider how you can simplify the navigation. People love mobile devices because of their convenience, so as a general rule of thumb – the fewer steps it takes to find a product or complete a purchase, the better.

Mobile app vs. mobile website

Depending on the experience you want your customers to have, you may want to invest in an app over a mobile site. Compared to a mobile-friendly website, apps are more expensive to develop, but they can incorporate much more functionality without sacrificing speed. If you decide to create an app, it should provide an experience that is distinct from visiting your ecommerce site. Otherwise, customers will have little incentive to download and use it.

How Mobile-Friendly is your Ecommerce Site?

A mobile-friendly site is required for growing your ecommerce site and increasing sales. Research from PayPal indicates that ecommerce on mobile devices is growing at three times the rate of ecommerce overall. Supporting this is a study from Google claiming that 88% of local searches are done on smartphones. What’s more, Google uses “mobile-friendliness” as a factor in deciding how well a page ranks in search results. Making sure that your ecommerce site is compatible with mobile devices is critical for maintaining a good shopping experience for your current customers, as well as getting in front of new customers searching for the products you sell. More...

Responsive Design Tips for Ecommerce

One of the best ways to make the jump from ecommerce to Mcommerce is to build an ecommerce site that uses Responsive Design – meaning that the site interface can automatically scale itself to fit any screen, from desktop, to tablet, to smartphone. Responsive websites remove the duplicate efforts that come with managing a combination of standard and mobile websites, plus it standardizes the user experience across all types of devices. However, a good Responsive Design requires you to think about your website a little differently.

For example, you may be tempted to start your new Responsive Design using the big beautiful canvas of a desktop screen. However, designing for desktop first, then trying to squeeze all the crucial elements of your site down to a mobile friendly layout is quite difficult. Instead, start with an efficient mobile design that you can build out when scaling to larger screens.

You should take note of how progressive enhancement affects your site content. “Progressive enhancement” refers to when website features are layered, and designed to appear only when a browser can support them. This includes elements that appear or disappear depending on screen size. Be aware of what each element of your site is designed to do when the screen size is changed to ensure that the content flows smoothly and functions correctly.

Responsive Design is more complex than basic HTML, so don’t be afraid to seek out a team that is experienced in Responsive Design principles to point your ecommerce site in the right direction. That way, you can make the best possible impression on your customers at launch.