In today’s rapidly evolving digital environment, jumping on the mobile commerce bandwagon has become essential to grab more market share and remain relevant. According to Google, failing to have a mobile-optimized site is the equivalent of closing the doors of your brick-and-mortar store once a week. While your most patient customers may sift through non-optimized pages, the majority are simply going to leave your site and take their business elsewhere. In fact, 30% of mobile shoppers abandon a transaction if the experience is not optimized for mobile. What’s more, this number will probably exponentially increase as the average consumer is getting younger and seamless mobile transactions become the norm. This article explores the fundamentals of a successful m-commerce strategy.
Adaptive vs. Responsive Design
The e-commerce sites modern software providers typically deploy are either responsive or adaptive. A responsive design is fluid and adapts to the size of the screen, no matter what device you are using. If you ever resize your desktop browser from very large to very small and the website seems to magically adapt, this means that the responsive design is working for you. Responsive design uses CSS media queries to change the styles that drive the page based on the target device, such as display type, width, height, touch sensitivity, and other attributes.
On the other hand, adaptive design uses static breakpoints which do not respond once they are initially loaded. In other words, if you are on a desktop site and resize the screen and nothing significant changes, you’re probably using an adaptive site, assuming you get a proper layout of the site on your phone. Adaptive design works to detect the device and screen size and will load a different layout, or template, for the targeted device. This means that with an adaptive site, you may be creating separate templates for the same page, multiple times, for different resolutions. It’s a lot more work for the retailer to manage, but the benefit is that you retain full control over absolutely every aspect of the end look and feel.
How to Choose Between Adaptive and Responsive Design
On the surface, it may seem that adaptive requires additional work as you have to design layouts for different resolutions. While there is definitely truth to that, it should be noted that responsive design can be more complex, as improper use of media queries can make for display and performance issues. So, which is better? Unfortunately, there’s no silver bullet solution. If you have an existing desktop site that is highly optimized and performs well but has no mobile optimizations, you may want to consider adaptive design, as it allows you to retrofit to the existing site to make it more mobile-friendly.
If you are re-platforming or redesigning your site, you should probably consider responsive design. While it will take more work up front, the long-term benefit will be quite evident. In the long run, it’s going to save you significant time by not having to create multiple layouts for every page on your site.
The Faster, the Better
One other important consideration to make is site speed. Since a responsive site is one layout that serves all devices, it requires more code to run the page. Whether it’s a desktop or a mobile device, you are typically sending the same amount of data on each request. So while a 2MB page may not be a problem for a desktop user, it can be slow for a mobile user on a 3g network. Often times, an adaptive design gives you more control, albeit more work in the long term, but also allows you to have a better user experience as it’s optimized for each device.
Even if your site is optimized for the device the customer is using, every fraction of a second counts when it comes to your page loading time. Nearly half of web users expect a site to load in 2 seconds or less, and then tend to abandon a site that isn’t loaded within 3 seconds, and many companies suffer from slower loading times than this. Consumers like fast sites and Google ranks them higher. Retailers must thus focus on delivering the fastest desktop and mobile experience they can possibly achieve. For shoppers, a fast site is a pleasant experience, and decreasing your page load time can drastically increase conversions.
Is Your Website Really Mobile-Friendly?
Assuming some retailers already have a nicely designed responsive or adaptive site, how can they optimize it even further? A good user experience on mobile is key, and Google will penalize you for not having a mobile-friendly site. So how can you know you qualify to their standards? There’s a simple test you can run with Google that will rate your site and let you know if it considers it to be mobile friendly. Not having that fixed can hurt your organic search rankings, or worse, Google may not even rank your website at all on a mobile search. Your site should also be properly coded with structured data including rich snippets and cards to make it easier for Google to understand what your pages are about.
