With mobile traffic continuing to grow, merchants are looking for the best way to provide a mobile-friendly Web experience and are increasingly considering responsive design, which offers its own set of benefits and challenges.

While some retailers have invested in creating separate sites for tablet, mobile and desktop users, others are exploring using a single site with flexible design that can adapt to the device being used to access it.  The main benefit of this strategy is that it is less expensive to maintain but, responsive design also presents challenges, such as the complexity of designing a site that truly provides a strong experience across devices.

“There are plenty of benefits with going down the responsive route,” said Yoav Schwartz, CEO at Uberflip, Toronto. “Namely, a single code base for your website that delivers to any screen.

“Making a change to a page? You only have to do it once,” he said. “That’s a great use of resources/time.

“The cons come by way of customization. On mobile if you’re trying to create a native-app-like feel, it will be challenging to have a desktop-Web site-feel on larger screens. This is where a lot of JavaScript customization comes in to play and complicates the otherwise clean, mostly HTML5/CSS3 responsive site you’ve built.”

Good experiences
Responsive design sites offer other benefits besides being less expensive to maintain and requiring a single code base. They can also help merchants improve their SEO, offer a single URL for all devices and provide a consistent experience across devices.

As result, some merchants are finding responsive design can help drive mobile results for them. For example, ShopWiki reports mobile clicks jumped 24 percent following a responsive design revamp of its site (see story).

While merchants goals should be to ensure that every user, no matter what device they are accessing a site from has a good experience. However, this is not always the reality with responsive design, with tablet experiences often faring better than smartphone ones.

Some sites created using responsive design may offer a better smartphone experience than the traditional desktop site with bigger images and a cleaner look.

However, the type can still be too small for a smartphone user to read. As a result, users end up having to pinch and zoom – the very thing that developing a mobile-friendly site is meant to avoid.

One of the issues with responsive design is that it is still so new and has not yet been widely adopted. As a result, there are not a lot of best practices yet for merchants to follow.

“It’s unlikely that responsive design will be a simple solution for an existing larger scale merchant, as there will be IT politics and debate for how / if their CMS will play nicely with a new design,” said Jonathan Greene, managing director of mobile and social platforms at R/GA. “Perhaps more importantly though is consideration of the potential impact a design change will have on actual revenues.

“Today there are only a few examples of responsive design in commerce, so it’s hard to suggest there are common pitfalls or even frankly best in class practices specific to commerce,” he said.

Navigating a better experience
One of the common challenges with responsive design sites is getting navigation right for smartphones.

Other challenges presented by responsive design include the need for new content management workflows and new image optimization processes.

“Navigation is probably the trickiest aspect to responsive design,” Uberflip’s Mr. Schwartz said. “On desktop – and most tablets – you have lots of room to lay out your navigation.

“But on phones, you’ll likely want to go with a single icon that loads the navigation options overtop of the content to reduce clutter,” he said. “This can definitely be achieved with CSS media queries but simply hiding/showing elements depending on the screen size.

“But if it’s not planned out in advance you may find yourself hacking away at the end to make it work.”

Information flows
In general, the entire process of creating pages is more complex and time-consuming.

“Responsive design definitely has its drawbacks – there are limitations with how much you can tailor experiences for specific screen sizes – i.e. phones or tablets,” Mr. Schwartz said.

“We’re going to see a lot of sacrificing to design objectives this year in order to make sites responsive,” he said.

Responsive design works best as a long flow of information, per Mr. Schwartz. This way, when smartphone users load a responsive site on your phone all the information is available to scroll.

“The core of your message should be available on the initial screen,” Mr. Schwartz said. “This can be a very effective way of delivering a message, but expect some sacrifices on the desktop or tablet experience as you’re going to have to make it work for all cases.”

Despite these challenges presented by responsive design, many believe it is the wave of the future.

There are a few sites already using responsive design and more are expected to launch in the coming year.

“If planned properly, I believe responsive design is the future and is only in its infancy,” Mr. Schwartz said.

“The Web sites of tomorrow will be a beautiful blend of responsive design with touch specific elements mixed in for a true mobile experience,” he said.

Final Take
Chantal Tode is associate editor on Mobile Commerce Daily, New York