Mobile Commerce Websites with Responsive Web Design

by Misha Kalhin, Senior Project Manager

This post is for those who are building an m-commerce website and want to understand current web design trends, and changing consumer behavior.

What is Responsive Web Design?

Responsive Web Design (RWD) describes a technique for improving the appearance and navigation of web sites on mobile devices. RWD automatically adjusts website content to fit nicely on a screen of any size. Responsive sites use the same URLs and HTML (the way content is displayed is determined by CSS) and can potentially eliminate the need for a separate mobile (m-dot) website.

Responsive web design is recommended by Google, it is SEO friendly and offers many advantages in productivity and appearance. However, since responsive is new there are currently a few constraints that will be smoothed out overtime as RWD evolves.

• Challenging for complex websites. Companies that have been around for decades and have large, complex websites might find it too costly and unnecessary to switch to responsive – at least for now. However most companies choose to make at least some of their content responsive, usually a landing page and other pages most commonly accessed via mobile.
• Not supported by older browsers.  RWD requires browsers to recognize CSS3, so if a lot of your web traffic comes from users who use older browsers, then going responsive might not be your top priority.
• May affect the speed of your website. Since your site will receive traffic from both web and mobile at the same time – that may affect your website’s load speed.

Due the rise of mobile, all websites will have to adopt new design and development techniques and become more future-friendly. The first step to figure out if responsive is worth the investment is to measure your mobile audience using Google Analytics.

mCommerce and Responsive Web Design

Mobile commerce sales have topped $38 billion in 2013 and the number is projected to reach $108 billion by 2017. Almost a quarter of all online sales come from mobile devices and trend is projected to grow quickly in 2014. Even though a lot of sales come from retails apps, there is now a significant shift to mobile websites, because the user is no longer restricted by app stores and can easily find the site via search engine.

To create a great m-commerce website you need to think “mobile first”: cater towards the mobile audience taking into account restrictions of mobile devices – then enhance the experience of a desktop user by adding additional features. At the same time, make sure that the effort to improve mobile experience, does not take away from the desktop experience. Below are a couple of examples of responsive websites that find that balance:

• Skinnyties: Great example of mobile first strategy. The site has a very clean layout. And it shows that designing responsively does not limit our designs to columns of fluid text and images on solid backgrounds.
• Stanford court (created by Dextrys): The site is simple with a classic look and feel. Notice how the menu, headline and body text re-size to achieve optimal legibility on all devices.
• Food Sense: Spacious layout and playful iconography. Fun to look at and navigate on any device. Quirky, homey design and colorful images of delicious food.

5 Best Practices for Building a Responsive mCommerce Site

At Dextrys we’ve deployed over 250 websites for hospitality and retail industries. Below are a few best practices for making a great m-commerce site:

• Simple layout. In order to provide the best mobile shopping experience and improve web site speed, content should be precise and layout simple.
• Search bar. Make sure your site features a prominent search bar with auto-suggestions to decrease typing on mobile.
• Optimize your images. Images should be flexible and workable, which speeds up load time significantly.
• Checkout page needs to be simple and purchasing should only be a couple of steps. Definitely do not send the user to a checkout page that is not optimized for mobile.
• Test thoroughly. There are many ways to improve your responsive website, and new tools and techniques are appearing every day. It’s important to try new things and test on as many devices as possible.

Dextrys web and mobile team is experienced in responsive web design, Parallax as well as integration with third party applications and social networks.