A checklist of important tips for designing a mobile commerce landing page, from the CEO of MobiMart.

Development of a dedicated mobile commerce web site brings with it many challenges. Developers need to take care of:

Varying device resolution from 320 x 240px to 1920 x 1080px,

Multitude of browsers like Safari, Chrome, Internet Explorer (yes it has followed here too), Native Webkit browser, not to mention Opera, Dolphin, UC browser etc. Javascript support of these browsers too varies from strong to bad.

Device Operating System like iOS, Android, Windows etc.

Reliability of wireless networks (2G, 3G, 4G, Wi-fi, LTE).

In this post, we will cover some considerations while designing and development of landing page in your mobile site.

Load time is the single most important factor which determines the success of your mobile site. Amazon found that with every 100-millisecond increase in page load time, its sales went down by 1%. Given the short attention span of the user, it’s hard to keep him engaged if the load time is more than 4-5 seconds. Our experience with powering mobile sites for some of the top e-commerce sites in India has given us a unique perspective into the best practices for a mobile commerce landing page. Here are some of our learnings.

Minify and inline print the JS and CSS that is required for the landing page. Exclude all that is not required and lazy load it later.

Do not have any blocking CSS/JS resource which could delay the rendering of HTML.

Do not have any further roundtrips to server for getting landing page content. In the case of single-page applications, bootstrap the data required in the inline JS. The nonessential part can be loaded via server roundtrips.

Leverage LocalStorage and caching.

Use DNS prefetch to speed up DNS lookup times of the domains you know the application will need.

Normalize your images and put them in buckets of low, medium and high quality before you host them on a third party CDN. This will not only help in displaying the correct image for a particular device resolution, but also in loading appropriate image based on network speed of the user. Relying less on images can dramatically reduce the landing page size.

Use Progressive JPEGs. It lowers the perceivable load time of images.

If your customer base is across the globe,,you should consider pushing your front-end code HTML,CSS and JS to CDN. However, keep an eye on number of http requests and DNS lookups. Mobile browsers allow a limited number of parallel connections.

Reduce the usage of third party Javascript Libraries like Jquery, JQuery Mobile and Twitter Bootstrap.

Reduce the number of API requests to backend applications, third party like Facebook, Google etc.

Use light weight icons and fonts.

Send the “right” data across the network. Design APIs to return only the data that is needed/requested, and optimize the same assuming data bandwidth is low.

While every merchant wants to provide the best of feature capabilities on the landing page, it is recommended to start with basic capabilities like Category navigation (ideally text-based), Search, Cart, Account Activity. An ideal landing page should not be more than 100 kilobytes in size with a maximum of 100-200KB of images.

Designers, marketers and engineering teams need to work closely to minimize the number of elements on landing page to help improve page load as well optimize it for end user experience.

Internet Retailer has published a report on how large U.S. retailers measure up on their Mobile site performance.

The average being 6.95 seconds,you can see how Walmart, Sears and other fare here.