You’ve heard the news—fewer people are shopping via their desktops these days. Specifically, between the first quarter of 2011 and the first quarter of 2012, the share of website visits from PCs dropped from 94% to 88%, while the share of visits from tablets rose from 1.7% to 6.5%, according to the first release of the EQ, Monetate’s new quarterly report with exclusive research on ecommerce trends.
While this trend may have some retailers sweating like Rebecca Black on a Thursday, others are taking a proactive approach to their customers’ evolving behaviors. In particular, one strategy—responsive design—has been utilized by several of the innovative clients I have the pleasure of working with.
Put most simply (yet hopefully eloquent enough to make my friends at Monetate Engineering proud), responsive design involves dynamically altering a site’s layout and presentation based on the user’s device size, and orientation. This is accomplished almost exclusively through CSS and media queries; the media query determines the browser’s screen resolution and orientation, then fires a corresponding CSS stylesheet. Thus, rather than taking a desktop site and simply scaling it down proportionally—which would render text and images extremely small and, in some cases, distorted—you can create an experience better suited for the medium via which your visitor is browsing.
So, you may ask, should we scrap our plans for an entirely separate, device-specific site (often referred to simply as a “mobile site”)? Not necessarily. In some instances, a case could be made for the effort and resources needed to maintain a distinct mobile site, rather than utilizing responsive design. For example, as Ethan Marcotte notes, a separate site may be preferred if the desired goals for non-desktop users differ from those for the rest of the audience base.
If you decide that responsive design is in fact the go-to strategy to address the rising tide of non-PC commerce, let your customers define the key pieces of functionality they want in a tablet or smartphone shopping experience. For example, our clients have been targeting their tablet traffic and testing some of the following elements to determine their effect on conversion:
• Search box size/presentation – Does the search bar help overcome other stripped down functionality, or do visitors avoid typing on their touch screen?
• Navigation drop downs – Does removing drop down functionality (which typically doesn’t function properly on touch screens due to the lack of a hover state) impact conversion negatively, to the point where click-to-hover functionality should be built?
• Alternative payment presentation – Alternative payments like PayPal eliminate the need for visitors to retrieve their wallet/credit card; does displaying them earlier/more prominently help your customers?
• Thumbnail image size/layout – As users move from the desktop to smaller devices (and orientations), do they prefer fewer visible products that are larger in size or multiple columns of smaller product thumbnails?
The results of the tests above can not only provide context and direction on what CSS changes should be incorporated into your responsive design, but also decrease roll-out time and ensure that your tablet experience meets the ever-changing demands of your customers.
Monetate will be exploring the considerations and best practices around responsive design in the weeks to come, so stay tuned for a white paper and more.