Practical Ecommerce

Getting Started with Responsive Web Design

Responsive design was conceived a couple of years ago to allow users to view websites across all devices — computers, tablets and smartphones. Since then, large sites like Starbucks and Boston Globe have adopted responsive design. But adoption by the small business community has been low, due presumably to (a) lack of understanding and (b) the initial investment required.

In this article, I’ll explain responsive design and describe how a small business can get started.

Benefits of Responsive Design

Responsive design adjusts a single website based on the device used to access the site. This is accomplished using cascading style sheets, which can automatically detect the screen size and adjust the output accordingly.

This leads to several benefits.

Saves money. Instead of building separate sites to support each device — laptop, iPhone, tablet — a single site can be designed and developed to support the current and future devices. This not only reduces development costs but also the operational costs of maintaining multiple sites.

Take the example of Moises Wines, below.

Zoom Enlarge This Image

At full size, the Moises Wines site shows images in several columns, and features a photo of vineyards in the background.

At full size, the Moises Wines site shows images in several columns, and features a photo of vineyards in the background.

Zoom Enlarge This Image

On smaller screens, photos are compressed into fewer columns.

On smaller screens, photos are compressed into fewer columns.

Zoom Enlarge This Image

At its minimum width, the Moises Wines site shows only a single column of photos, and no longer highlights the background image.

At its minimum width, the Moises Wines site shows only a single column of photos, and no longer highlights the background image.

Note the same content and images for MoisesWines.com are reformatted to adjust to different device widths.

Improved search engine optimization. In “SEO Benefits of Responsive Web Design,” we explained how responsive design can improve search engine rankings. Having a single consolidated site can result in that site ranking higher and getting more traffic.

Consistent user experience. Since the same user experience is adjusted across all devices, it presents a consistent appearance to your visitors. This helps them navigate the site in the same familiar fashion, regardless of the device they are using.

Higher conversion rate. Support for all devices, ranking higher in search engine results, and a consistent user experience will result in higher conversions, as consumers will be able to engage better with your site using their devices of choice.

Integrated analytics. Responsive design uses a single site to serve all devices, resulting in the ability to build integrated analytics reports — from different devices. This leads to better management of the site and better measurement of the results from cross-channel campaigns. It allows a business to define a single set of key performance indicators to measure across the board, for all devices.

Responsive Design: Planning Considerations

The benefits from responsive design are many. But it also requires careful consideration and planning.

Separate mobile functionality. There are instances when consumers prefer the mobile site having separate functionality from the main site. A good example is the store locator function that is accessed more frequently from smartphones. Hence the smartphone site might be designed to highlight the store locator functionality, and hiding sections that are not typically accessed, like corporate information.

In some cases, customer expectations will drive the creation of a separate mobile app that utilizes the native features of a mobile device. The example below shows how Target has built a separate mobile app to offer more focused functionality for the mobile consumer; note no filtering options on the left.

Zoom Enlarge This Image

Target's website offers a full range of options.

Target’s website offers a full range of options.

Zoom Enlarge This Image

Target's mobile app offers a simpler, more streamlined experience.

Target’s mobile app offers a simpler, more streamlined experience.

Ad revenue. Advertising platforms are adapting to responsive design, such as offering contextual advertising depending on the device used to access the site. At a minimum, to avoid impacting the ad revenue from your site, ensure the ads are displayed appropriately across different devices. For example, if an ad appears near the top of the larger site, ideally it should appear near the top when accessing it from a mobile device.

Support for older browsers. Responsive design is based on new CSS techniques that are not supported on older browsers, such as Internet Explorer 6 and older. There are, however, workarounds to this. Determine if your customers use older browsers that do not support, by default, responsive design. Then incorporate these workarounds as part of your responsive design effort.

Requires investment. Responsive design will save your business money in the long run. But in the short term it requires an investment to build the site, test it on different devices, train your team to author content for all devices, and otherwise manage it all. Some businesses try to transform their existing sites by converting one page at a time to be responsive. That, in my experience, ends up being more challenging, as customers could get a broken experience, with only a subset of pages working on their devices. Moreover, some pages may not align with the rest of the site because of the changes. It is always better to approach responsive design as a ground up, comprehensive effort.

Getting Started with Responsive Design

Before you decide to implement responsive design, review your visitors’ needs and the devices they are using to access your site. Your web analytics reports should provide you with device details. Based on these inputs, decide whether or not to support responsive design. If yes, list the devices that will be part of the testing effort.

Then, engage your team of designers or your design agency to start planning the development. This will help you estimate the investment required and how you can launch the full design. If the investment is within your budget, then move forward. But remember, you would not implement responsive design because it is cool or works on all devices. You would do it to serve your customers.

Gagan Mehra
Gagan Mehra
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Comments ( 9 )

  1. davidviniker July 20, 2012 Reply

    Thank you for an excellent explanation of the benefits of responsive design.

    "This is accomplished using cascading style sheets, which can automatically detect the screen size and adjust the output accordingly."

    Is there a source for these cascading style sheets that one can copy and paste into a current HTML website?

    Kind regards

    David

  2. Gagan Mehra July 20, 2012 Reply

    Thanks for your comment, David.

    There is source code available but it won’t be helpful as you need to tweak it based on the content on your site. That is why the article says that responsive design should be a ground up and more comprehensive exercise.

    If you are just looking for a code example, [you can find one here.](https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/code_example_of_responsive_web_design_using_css3_media_queries13?lang=en)

  3. Michael July 21, 2012 Reply

    Gagan,

    Do you know of any ecommerce platforms that include responsive design functionality?

    Thanks,
    Michael

  4. Eloise July 22, 2012 Reply

    Micheal,
    when we start developing the online store for Shirudo.com, we really want it to be responsive. We end up using Shopify platform because they offer a lot of responsive templates. If your store is simple, the basic templates should do. So it cost us $150 for the theme and took 1 day with an integrator to modify css to match our branding. I am very happy with it, looks great on all devices. Next step for us is to develop new custom templates from that theme to show more content. Shopify themes are usually minimalist. Have a look at our store with all devices in hand to see it in action. Eloise

  5. Elena July 23, 2012 Reply

    Thanks for this post, Gagan!

    Very well explained pros and cons of responsive web design. Also I found a couple more such cons in Spark::red’s blog post (https://www.sparkred.com/blog/mobile-web-performance/):

    1- Sites with responsive web design download huge amounts of content even for mobile clients that slows page load time;

    2- It is harder to resolve issues with responsive web design than with dedicated mobile web design.

    Best,

    Elena

  6. Gagan Mehra July 23, 2012 Reply

    Michael,

    Apart from Shopify, which Eloise explained (thanks), Magento and WordPress also provide responsive themes. You can check them out at:

    – [Magento responsive themes](http://www.magentocommerce.com/magento-connect/respond-responsive-theme-for-tablets-smartphones-large-screens-2489.html);
    – [WordPress responsive themes](http://wordpress.org/extend/themes/responsive).

    If you are using a different ecommerce platform, let me know and I will provide some guidelines around how to make it responsive.

    Elena – Thanks for the additional cons. The first one can be resolved by moving the execution of the rules to the server side. This is also mentioned in the article. This technique is called RESS for Responsive Server Side. [More details here.](http://www.slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972)

    Thanks

  7. Michael July 23, 2012 Reply

    Thanks Gagan and Elosise,

    I’ve heard good things about Shopify but Because of some decisions I made a few years ago, I need to continue hosting my (and a few other) ecommerce sites so a hosted solution will not work for me right now.

    I am currently on CS-Cart which has worked well for me. Any suggestions on how to make that responsive is appreciated. I have a developmen/CSS background.

    Thanks,
    Michael

  8. Gagan Mehra July 25, 2012 Reply

    Hi Michael,

    As far as I know, CS-Cart has not launched any responsive themes but some customers have tried [using this add on](http://www.cs-cart.seonid.com/cs-cart-addons/cs-cart-mobile-skin.html) with mixed results.

    The other option is to read up on CSS Media queries to see how you can tweak your site to be responsive. [You can use this link](http://www.w3.org/TR/css3-mediaqueries/) or Google "CSS Media queries" and find other tutorials. If you use only one or two unique page templates on your site, it should be not be a significant effort to convert them to be responsive.

    Thanks

  9. Carlos Rivera August 10, 2012 Reply

    CSS Media queries are easy to use for those that already are familiar with CSS.

    The challenging part is adopting it to a platform that is already non-responsive.

    From experience, it is better to start from scratch, as Eloise mentions above, than to modify the overwrite the current CSS.

    I’ve had the best experience with grid-based css templates with responsive functionality already built-in:
    http://webexpedition18.com/articles/responsive-css-frameworks

    Personally, I like 1140 CSS grid:
    http://cssgrid.net

Email Newsletter Signup

Sign up to receive EcommerceNotes,
our acclaimed email newsletter.

And receive a free copy of our ebook
50 Great Ecommerce Ideas