Today, the iPhone is the ultimate mobile shopping device: 69.5% of mobile sales occur on smartphones while 30.5% occur on tablets, and 61.4% of ...
Randy Kohl of Gorilla Commerce makes a case for responsive web design.
Topics: October 2012 Magazine
Consumer shopping behavior is changing rapidly, and permanently. Advances in technology have caused the line between traditional e-commerce and mobile commerce to blur. To adapt, it's become imperative for retailers to create seamless user experiences across digital channels.
If they haven't already, they must do so quickly. Retailers, travel companies and ticket sellers raked in $11.03 billion in mobile sales in 2011, and will reach $22.14 billion in 2012, Internet Retailer estimates. Sales through smartphones will account for 3% of total web sales in 2012 and 7% in 2016, Forrester Research Inc. predicts. Forrester also predicts 37.9 million U.S. consumers will own a tablet in 2012 and 60.3 million will own one by 2016. So, how are merchants to respond to the design challenges these devices present?
Responsive web design. Responsive design is a relatively new approach that enables sites to recognize the screen size, screen resolution and operating system of a device making a page request. The site can then respond accordingly, automatically resizing and reformatting content to fit the screen.
While responsive design may not be the magic bullet that completely replaces the need for mobile commerce sites and smartphone and tablet apps, it does offer numerous supplemental benefits, from reduced lifetime site maintenance costs to built-in search engine optimization advantages. As such, responsive design is poised to become a mainstream solution for cross-channel customer engagement.
New design paradigm
Before delving deeper into what responsive design can do, it's worth noting what traditional sites cannot.
The fault isn't so much with the sites themselves but with how mobile devices render them. By default, mobile device browsers emulate high-resolution desktop browsers. This causes non-mobile-optimized web pages to display in a traditional full-page view. This results in text and graphical elements too small to comfortably read on mobile devices.
While technically operable, the constant need to pinch, zoom and scroll creates a poor user experience. This has led to a number of workarounds, primarily the development of mobile-specific web sites and smartphone apps, each of which has advantages and drawbacks.
Responsive web design offers a different solution. Responsive design uses a single design and development process to create sites that retain full branding and e-commerce functionality, regardless of screen size or operating system. Sites are not just resized to fit the screen, they are reformatted to appropriately display content, as if the web site had been built natively for the destination device. This allows a retailer to build a single site and maintain one set of content and a single product catalog to reach users across devices.
"By nature, the web can be a chaotic medium," says Eden Halperin, lead designer at Future Simple, a software development company. "Responsive practices allow for smart, flexible design solutions that embrace the ubiquity of the web."
Responsive design takes a modular approach to site development that leverages Cascading Style Sheets 3—a markup language used to design pages and define where objects appear on a page—and media queries to determine how best to display a site for a given device that incorporates fluid content grids and flexible images. These enable a developer to tailor a presentation to a specific type of device without changing content.
Shortcomings in how mobile devices render web pages have led many retailers to create "mobile-friendly" sites, which in most cases are stripped-down versions of desktop sites that can sacrifice content and functionality for performance and usability.
Mobile sites can be useful, giving retailers more control over design to create mobile-centric shopping experiences. But most mobile-specific sites can't distinguish between a smartphone and a tablet, for instance, and treat the devices equally. Presenting a condensed shopping experience, which may include an abridged product catalog, is an obvious drawback for retailers trying to engage consumers in the fast-growing tablet category.
This also inhibits retailers from offering the same, full-featured content and options to consumers across devices, allowing them to easily complete their goals, whatever they may be. Responsive design delivers an equivalent shopping experience simply because all site content comes from a single source.
Maintaining separate desktop and mobile sites also means maintaining separate site URLs. This presents an acute problem for retailers who have focused considerable resources to drive inbound link strategies to help with search engine optimization. If a mobile web page ranks higher in search and drives desktop users to mobile web pages, or vice versa, that's a sure way to alienate current and potential customers. This issue, among others, has led none other than Google Inc. to endorse responsive design as a best practice for site development.
What about apps?
Then there are smartphone apps. In certain situations apps can make sense for brands to provide their customers with unique mobile experiences that dramatically differ from traditional web sites. Apps can provide customization options and incorporate smartphone functionality, such as use of the device's camera, in ways that mobile and responsive web sites currently can't. However, in the oversaturated app marketplaces, it's often difficult for retailers to gain traction and achieve return on investment.
A recent survey by Deloitte LLP says 80% of branded smartphone apps have fewer than 1,000 downloads. Beyond this reality, retailers must also decide which smartphone platforms need targeted apps. The Apple iOS and Google Android platforms are a given, but retailers may need to build apps for Windows Mobile and RIM's BlackBerry platforms, for instance, to reach their target audience.
This leads directly into two of responsive design's biggest advantages beyond its cross-device compatibility: simplicity of upkeep and lower total lifetime costs.
"Building a responsive site requires a lot of hard work upfront, but it pays for itself over time. In the long run, there is only one team, one product catalog, one set of content," says Brad Frost, a mobile web strategist and designer at digital advertising firm R/GA.
In contrast, a retailer maintaining separate desktop and mobile sites and iPhone and Android apps has to assume the initial design and development costs for each, then deal with the logistical headaches of maintaining multiple sets of content and codebases and respond to smartphone operating system upgrades, which often occur multiple times per year.