Receive the latest articles for free. Click here to get the Luxury Daily newsletters.

The pros and cons of responsive Web design

By
January 2, 2013

ShopWiki redid its sites using responsive design

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

Share on FacebookShare on LinkedInShare on Twitter



Like this article? Sign up for a free subscription to Mobile Commerce Daily's must-read newsletters. Click here!






Related content: None Found

Tags: , , , , ,

You can leave a response, or trackback from your own site.

11 Responses to “The pros and cons of responsive Web design”

  1. Yvon Says:

    Not a lot of examples? Thats really not true at all. Starbucks, Nike, WWF, BBC and Barack Obama are just a few of the growing number of larger sites going responsive.

    Also, you cant create responsive design without discussing conditional loading. You should always make sure to check the device before loading in the content.

    All in all, responsive design is the way forward. Articles like this is close minded thinking.

  2. Kevin Leong Says:

    The practice of responsive Wed design you referred to in tis article is known as Mobile Web App. There has been a lot of discussion about Mobile Web App recently. Why? it’s really expensive to build and support native app. There has been a lot of advancement in building mobile Web apps and their are tools to access native features on the smartphone.

    You will see several VCs backing mobile Web app development in 2013 to make it mainstream. There are so many apps on app stores, it’s becoming difficult for people to find your app. If you are a local or regional retailers, having an app in the global web stores really does not make sense. 75% of smartphone users are searching using mobile browser or map, it’s more important that retailers have probably mobile SEO to go to the mobile Web app, then dealing with search on app stores that there is no way to optimize search.

  3. Liz Coker Says:

    Chantal,

    If you’d like to learn more about some tools and best practices for mobile responsive design, please give me a shout. Have lots i can share.

  4. Magnus Jern Says:

    Great article! A lot of our clients are asking for responsive design at the moment because it’s the new buzz word. It’s really important to think through the pros and cons and I think you’ve done a great job summarising the opportunities and challenges. We have a few additional pros and cons and more specifically references to what Linkedin’s head of mobile thinks of responsive design. Read more on
    http://www.mobilemarketinguniverse.com/pros-and-cons-of-responsive-design-for-mobile/

  5. Michael Says:

    You can’t please all users all of the time, but you’re right a tempering of design elements to go responsive is the way to go.

  6. Michael Says:

    Awesome article. I’ve always been in the positive camp, but editing a responsive design can be a pain! Personally, the single code base wins out, though.

  7. Aaron Rudger Says:

    This is a good set of considerations, but the performance implications are extremely important to factor in defining the mobile user experience. Unfortunately in many RWD implementations, this is overlooked to the user’s detriment. Common issues like image size, high object count and interactions resulting in layout reflow really impact experience due to the latency of wireless networks and processing limitations of mobile devices.

  8. David Says:

    “the type can still be too small” < this is a drawback of bad / non-existent design, not responsive design.

  9. Madhukar Says:

    First I thank you for sharing great article. Really it is very informative and helpful. Thanks again.

  10. John T O'Farrell Says:

    Just went to the ShopWiki page on my iphone and was greeted with a none responsive page that only had a header, search bar and a lot of white space.

    The search function did provide a return page that was repsonsive and well done.

    Other random pages (e.g. About Us) come up a mini desktop versions.

  11. Mike Says:

    Great Article..

    Companies are working harder on M-Website to make more friendly as Native App , But Both have their own Pros and Cons.

Leave a Reply