Thomas Jones

Responsive Web Design (RWD) is a recent web design trend that is an evolution of an older concept.  In the early days of the web, sites were typically designed for specific monitor sizes and resolutions.  As monitors became larger and less expensive designers had to contend with leveraging the extra available page real estate while still maintaining an appealing experience for customers with smaller monitors.  Designers often accomplished this through fluid layouts, in other words, the site would expand to accommodate the  available screen resolution.  Fast forward 10+ years and the popularity and opportunity of the mobile enabled customer now has designers dealing with the opposite problem.  Web sites that have been steadily expanded to accommodate larger screen space are not as able to effectively service the customer browsing the site on a smart phone or tablet.

The challenge is how to provide a streamlined experience for the mobile customer while maintaining the essential essence of the online experience.  The standard approach for the past few years has been to split the mobile experience into a separate web site, i.e. provide www.edlconsulting.com for the normal browser based user and mobile.edlconsulting.com for the mobile user.  While this approach has been successful one criticism has been that it doubles the resources needed to maintain a web presence.  Even changes that are as simple as switching to a new logo require the change to be done twice and tested twice.  If done properly maintenance between the two sites (web and mobile) can be significantly reduced, for example, by sharing content between the sites, but the fact remains that there are still two separate sites.

Responsive Web Design combines up front usability decisions along with specific implementation techniques with the goal to provide a single web site that services screen sizes from the largest cinema capable display down to the smallest smart-phone; a single set of HTML pages.  A customer browsing the site from home goes to the same web address and is served the same HTML pages as the customer browsing the site on a smart-phone while commuting home on the train.  The difference between the two experiences is driven by the CSS that is used to style the pages.  The ideal is that long term maintenance costs are reduced because there is now a single web site to develop, maintain and test.

E-Commerce adds a layer of complexity to this ideal.  An e-Commerce Responsive Web Design approach needs to be concerned not only with presenting content and branding for a range of screen sizes but must also take customer interactivity into account.  E-Commerce buy-flows may vary widely depending on particular industry requirements.  Implementing a RWD driven site according to these requirements can be an arduous process if not done carefully and from the correct perspective.  Traditional web design typically starts from the richest level of experience, the browser on a desktop, and then considers smaller form-factors after this first design is done.  Often these initial designs fail to translate effectively into the mobile space where speed and simplicity are king.

A new perspective has emerged that reverses this traditional approach.  Instead of starting with the desktop browser the design and implementation are first completed for the mobile platform.  Taking this approach, called Mobile First Design, forces the design to be streamlined as much as possible.  The site, brand, and buy-flows must all be distilled into essential elements so that they make sense on a device that fits in the palm of your hand.  Not only does this simplify the visual aspect of the design but it provides a chance to rethink what is core to the e-Commerce experience.  Once mobile site is complete then development moves up to the next larger form, the tablet.  Additional features, richer graphics, and more content can all be added at this point while maintaining the original distilled design.  Finally, the site is implemented for the browser with the additional screen real-estate, functionality, and processing power that the desktop platform can provide.