Web traffic estimates from several trend analysis firms including comScore, predict that mobile Internet traffic will outpace traffic from desktop or large laptop devices in 2014, further demonstrating just how important mobile site optimization may be for online retailers. Mobile commerce accounts for as much as 23 percent of online sales as of the fourth quarter of 2013, and there is growing evidence that consumers prefer using tablets or other mobile devices to shop, according to reports compiled by conversion rate optimization firm Invesp.
Readying an ecommerce site for mobile traffic and mobile-device based sales includes addressing five key points:
Image optimization
Layout optimization via responsive design
Minimizing barriers to purchase and login
Site performance
Using a mobile device’s capabilities to provide a better shopping experience.
App-like Features
In 2014, mobile optimization should not be limited to having a website that functions or even that is easy to use on a mobile device. Rather, mobile optimization should involve using mobile devices to create great user experiences with application-like features.
Can you use the phone’s GPS to provide better product suggestions or show off what other shoppers in the area liked or purchased? Could you create an augmented reality feature that uses a mobile device’s camera to let shoppers see how they might look in a particular shirt or hat? What about services that allowed shoppers to send text messages to a customer service representative while browsing your site?
All of these are technically possible. What other things could you offer mobile shoppers that were useful? Figure this out, and you will have optimized your site for mobile sales.
Responsive Design
While there has been a fair amount of debate about whether it is better to use responsive design for mobile optimization or to create a separate mobile version of your site, in 2014 responsive design should emerge as the clear winner, especially in the face of Google’s desire for fast loading mobile site. The search engine firm, which by some estimates has nearly a 70 percent share of mobile search traffic, explicitly states that site owners should avoid too many redirects. Building a separate mobile website will require at least one of those time consuming redirects.
Responsive design may provide a better user experience as shoppers interact with a site across devices. Responsive design is also easier to manage, since you do not need to maintain separate websites with separate content.
Right Size Images
If the mobile web lacked images and graphics, it would not be providing the sort of rich user experience that shoppers are accustomed to on other devices and are likely to expect on mobile. So don’t try to rid your site of images and graphics, but rather manage those rich media assets in a way that makes them fast and easy to load on a smartphone or tablet.
For your 2014 mobile optimization plan, try two approaches to delivering right-sized images and graphics to mobile site visitors.
First, compress the image files. When creating product images or site graphics, try to get the smallest possible file size for the required image quality. Limiting the number of colors or selecting the best file type can have a significant impact on image file size. You may also want to use a service like Yahoo!’s Smash.it which will help to remove unneeded bytes from image.
Second, considering offering lower resolution images for mobile devices. Consider that the 4-inch touchscreen on an iPhone 5s is 1,136 pixels by 640 pixels, which is actually high for the size of device. In contrast, an Acer H233H 23-inch monitor, which sells for about $140, has a resolution of 1,920 pixels by 1,080 pixels, almost three times as many pixels as the iPhone. The point here is that a 1,000 pixel wide image on the Acer barely fills half of the horizontal space, while the same image on the iPhone would dominate the screen space. Relatively, lower resolution images also have smaller file sizes. Using JavaScript, change which image is served to a device based on screen resolution. This is different than changing the perceived size of an image with CSS. Here the goal is to actually serve a smaller version of the image.
Social Login and Alternative Payments
Social login services from Facebook, Twitter, or Google and so-called alternative payment solutions like PayPal can improve a shopper’s mobile ecommerce experience.
If mobile devices have weaknesses, it can be in the area of keyboard interactions. As an example, typing in an email address, username, password, or payment card number can take a fair amount of time on a smartphone. Voice commands will help too, but even voice recognition can be a barrier sometimes.
To help, consider using a social login that may make it easier for shoppers to register for your site or complete a shopping cart form. Similarly, offer checkout services like PayPal or Payments by Amazon that allow shoppers to use stored payment card information. These service can be more user friendly in the mobile shopping environment.
Under One Second Load Times for Some Content
Google wants your mobile page to load in less than one second. If the page takes longer to load, the leading search engine in the world could penalize your mobile site, making it invisible (or at least less visible) to mobile search users. For stores that depend on search engine traffic to help drive sales, such a penalty could significantly impact sales as greater and greater numbers of shoppers use mobile devices to make online purchases.
For several months, Google has been informing website owners, designers, and developers that it wants mobile page load times of one second or less. This is significantly faster than current average load times of about seven seconds per mobile web page. But the search engine firm is also making some suggestions like focusing on giving site visitors some content to look at and interact with almost immediately.
Research shows that users flow is interrupted if pages take longer than one second to load. To deliver the best experience and keep the visitor engaged, our guidelines focus on rendering some content, known as the above-the-fold content, to users in one second (or less) while the rest of the page continues to load and render in the background.
For mobile optimization in 2014, use Google’s advice for Optimizing the Critical Rendering Path for instant mobile websites and aim to give site visitors above-the-fold content almost immediately.