3importanceResponsive Web Design means that a site is implemented in such a way that it adjusts automatically to provide an optimized web experience to the viewer on any device and any screen size. This is especially important in e-Commerce and m-Commerce, as customers nowadays are expecting ease of use and a compelling web experience across all devices. Responsive design adjusts automatically, making it almost a must for all those who regularly provide changing content, like e-Commerce retailers. It uses CSS3 media queries to ensure that the layout adapts to the screen size using fluid proportion-based grids and flexible images. The page uses different CSS style rules automatically based on characteristics of the device the site is being displayed on. Flexible images are also sized automatically to make sure they fit the screen size.

Before Responsive Design, marketers had to create several sets of content, if they wanted to cater to multiple screens, which meant more costs and a lot more work, with a mobile experience that was still not necessarily the best. Not to mention that it was almost impossible to make your layout fit all screen sizes, from tiny smartphone screens to 27“desktop flat screens. Responsive Design, however, really takes the content only once and makes it adapt to every screen, to every platform, to every operating system, every browser and is fully compatible with all devices on the market today. This is the best thing that could have happened to marketers in e-Commerce, who have to update their offerings very frequently.

Responsive design might cost more work in setting up and implementing, but administration will be much less in the long run. When designing responsive layouts, the first important rule is „mobile first“. You should start with the smallest screen. You will pick out the most important crucial information, which needs to be displayed. It is much easier to add details for larger screens, than to remove them. Also avoid specifying the font size, this too needs to be able to adapt according to the device it is displayed on. You can either define percentages or use JavaScript plug-ins which will scale headlines and text according to screen size.

When taking care of all these technical aspects of implementing responsive design, there are some things of special importance for e-Commerce and m-Commerce:

  • Pay special attention to the placement of the search box, as people often access mobile sites in search of something specific, so make sure they can easily get there.
  • The shopping cart icon should be clearly visible and touch friendly on all product pages.
  • Navigation throughout the buying cycle should also be designed to be touch-friendly.
  • The consumer should be invited to opt-in to receive your newsletter across all channels, be it via QR code, on the mobile landing page or when placing a product in the shopping cart. You might also want to consider offering incentives for opting in, for example by offering 10% rebate on the next order.
  • Also don‘t forget to include a CTC (click to call) button for those m-Commerce users who want a question answered, or need further information to your products. Many customers will be surfing your site via mobile, so making it easy to call you shouldn‘t be forgotten.

The goal of marketers has to be creating web content which adjusts to multiple screens while still delivering compelling shopping experiences. A good mobile experience will always combine minimalism, e.g. single column layout and great navigation, social media integration, and will load fast.

On www.creativebloq.com Nathan Leigh Davis picked out ten brilliantly responsive e-Commerce sites, which are worth getting inspired by:

  1. Indochino makes high quality custom menswear and its responsive store features beautiful product photography combined with a minimal design aesthetic. While the whole site responds extremely well to various screen sizes, the way in which the product pages are handled is particularly worth noting.
  2. Skinny Ties is a niche online retailer that sells nothing but retro-style skinny ties and have been doing so since 1997. The layout of the site is carefully structured and complemented by the use of great product photography and concise and helpful information on the individual product pages. The site navigation also works seamlessly across a variety of screen sizes and allows users to quickly search for products via a variety of options, such as material and color.
  3. Stury is a site that allows people to swap books online. The way in which the vertical navigation and grid based layout condenses, when viewed on smaller screens, is particularly effective and a design pattern that would work well for many other sites.
  4. Fit For A Frame sells gorgeous prints created by talented designers and illustrators. Their online store features simple navigation and an equally simple layout, both of which condense beautifully for smaller screens. There are some interesting tricks on show here too, such as the way the prints on the brick wall background on the homepage switch to a vertical layout when viewed on a smaller screen.
  5. United Pixel Workers sells T-shirts and accessories created by the web design community and given the tech savvy nature of their customers, it’s not surprising to see that their website is responsive. The site utilizes a simple grid layout and large typography, which means it adjusts exceptionally well when viewed on smaller screens. The way in which the cart and menu buttons are arranged on narrower devices is particularly well thought out too.
  6. Tattly sells 'Designy Temporary Tattoos' created by leading designers and illustrators. Its online store utilizes a simple grid structure throughout, which is complemented by a monochromatic color palette, which prevents the UI from detracting from the products on show. The flexibility of the underlying grid means the layout resizes beautifully when the site is viewed on smaller screens.
  7. Nixon is one of the few established brands to have a responsive eCommerce store that is exceptionally well done. It works so well due to the simple and minimalistic layout and like many other sites in this showcase, a grid structure is employed throughout. Nixon’s great product and lifestyle images play a big part in pulling the design together. When viewed on a smaller screen the flyout navigation and checkout process works particularly well too.
  8. nixon

  9. Folksy is an online platform for British designers and makers to sell their handmade wares online. While the layout is more complex than many of the others showcased here, the way in which it responds to the demands of various viewing environments is adeptly handled.
  10. Five Simple Steps is a small independent publisher of practical books for web design professionals. Its online store utilizes a simple and minimal layout and interface that make it a delight to use.
  11. SuitSupply is an online men fashion retailer whose responsive store design utilizes a simple minimal layout combined with high quality product photography. The desktop site contains standard navigation and product filters, but interestingly they’ve chosen to either remove or simplify these elements when the site is viewed on smaller screens.

By Anjum Siddiqi