With the rising popularity of responsive design (and its closely related sibling, adaptive design), the need for a separate website dedicated to mobile devices has begun to wane. In addition to providing a slick interface and user experience that fits almost any screen, responsive websites remove the duplicate efforts that come with managing a combination of standard and mobile websites.
For an Ecommerce retailer, the move to a responsive website can be daunting. The user experience aspect is crucial in the world of Ecommerce, where merchants are constantly fighting to increase conversions. A single misstep in the shopping or checkout processes can result in an abandoned shopping cart – and dollars lost.
So what should retailers be considering when preparing their website to become responsive?
Beginning with Mobile in Mind
Your home page, product pages and checkout will all be at their most bare when viewed through a mobile device. Starting with a mobile layout allows you to start with a simple, effective design that you can build onto when scaling for larger screens. This is much easier than designing for desktop first, then trying to squeeze all the crucial elements down to a mobile friendly layout.
Sizing Seamlessly
A phrase used often within the context of responsive design is “Progressive Enhancement”, where features of a website are layered and designed to appear only when a browser can support them. This includes elements within a page layout that appear/disappear depending on screen size. It’s important to know what all of your content is designed to do as screen size changes. This ensures that content flows smoothly on your website as it is viewed across different devices.
Using the Website – Across All Sizes
Your website’s core functionality – selecting categories, viewing product photos, checking out, etc. – should remain unchanged across any browser. While most site content, such as pictures and copy, will be designed to resize appropriately, it is important to keep key assets highly visible. For example, the “Add to Cart” button should not be sized proportionately to the other elements on the page; this and other parts of your sales funnel should warrant extra consideration when preparing your website for layout.
Getting Help
As you may have gathered already, the ability to render a website fit for almost any screen requires more than your average HTML. Working with a designer (or team of designers) that have experience with responsive design principles will go a long way towards launching a site that is functional and effective – the first time.
Zeke Hamdani is Director of Web Services for Celerant Technology.