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.


Zoom Enlarge This Image 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.


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.

9 Comments

Rss-sm
 

Sign-up to receive EcommerceNotes, our acclaimed email newsletter.

View A Sample | Privacy

Connect with us

Help

Featured Tags | All A-Z

 

Inside Practical eCommerce