Mobile Commerce Daily is now Retail Dive: Mobile Commerce! Click here to learn more!

Responsive design: An elegant path to selling on any mobile device

By Jim O’Hara

Technology moves so quickly, it is hard to keep up. The explosion in the number of new mobile devices and various screen sizes is one such example.

With two-thirds of all online shopping sessions starting on a smartphone, according to Google, optimizing the consumer experience for multiple screen sizes on both phones and tablets is essential for retailers’ success. Yet, even the largest retailers were caught flat-footed during the 2012 holiday shopping season, since only 7 percent had Web sites that were optimized for tablets.

Luckily, technology has come to the rescue, enabling retailers to create online stores that render beautifully and appropriately on any screen size. This innovation is called responsive design, and if you have not implemented it yet for your online store, then you are losing sales.

The good news is that responsive design is available through many top ecommerce solutions, is easy to enable and likely will start improving your conversion rates immediately.

Screen size conundrum
The problem is easy to understand: you have built a Web site and taken great care to have it look just right to make the most compelling offer possible to customers. But the Web site probably was designed with desktop and laptop users in mind.

Even if you offer a mobile version of your site, it may only be optimized for one size of smartphone and may omit certain important design elements.

So, what is the result? Can your store be viewed and navigated perfectly on all mobile devices? Will that well-tested special offer icon be placed in the correct screen location to capture the customer’s attention? And will all functions work exactly as they should, and render quickly?

With more customers now shopping actively on their smartphones and tablets, being able to answer “yes” to all these questions is critical. And with additional screen size options emerging, the mobile version alternative only solves a small part of the challenge.

How responsive design works
Responsive design is a technology that automatically adapts an online store’s design to accommodate any screen size that a customer uses, from smartphone to desktop, without having to switch over to a mobile-only version of the store.

Responsive design responds to changes in the width of the screen or browser window by fluidly adjusting the placement of elements to fit the available space.

A responsive design-enabled Web site or shopping cart automatically contains multiple sets of CSS rules which dynamically change the format and layout based on the size of the device’s window.

A key benefit: all desktop features of the Web site or shopping cart remain intact, but are adjusted for the particular screen size.

So you are not getting a dumbed-down rendition of a site where important elements may be left out, a problem with many mobile-only (m.________) versions. Responsive design works hand-in-hand with the new HTML5 standard, which also is designed to be device independent.

To see a responsive design site in action, go to GE’s Web site at on your smartphone.

Better shopping experience = More sales
Creating an optimal viewing experience on all devices helps retailers and marketers generate better customer engagement and increase online conversions. As a result, responsive design is gaining popularity quickly.

A responsive design-enabled website and shopping cart allow your ecommerce business to be everywhere your customers are shopping while using any device.

With retailers expecting an even larger mobile-driven Christmas this year, serious merchants must ensure that their stores are optimized to dynamically support multiple screen sizes.

Responsive design is a key technology that will help you get there in a simple, cost-effective way, making mobile a retailer’s top ally this holiday season.

Jim O’Hara is president of Ecwid Inc., a San Diego-based maker of a multi-platform ecommerce shopping cart widget. Reach him at [email protected].