Designing Your Site for the Mobile Customer

Have you taken a look lately at how many of your website visitors are viewing your web pages on a mobile device? Has that number grown over the past several months? If so, you should be thinking about offering a mobile-optimized experience (if you haven’t already).

The truth is, only about 10% of all websites are optimized for mobile device viewing. By not keeping pace with the rapid growth of mobile device usage, site owners are jeopardizing their brand credibility – and for retailers in particular, they’re also missing out on a huge opportunity with mobile commerce.

Mobile traffic now comprises more than 10% of all web traffic worldwide, and by the end of 2013, mobile devices are expected to outgrow PCs when it comes to accessing the Internet. Additionally, between 2011 and 2012 mobile commerce sales doubled – a trend that is likely to continue over the foreseeable future.

The Age of Mobile is here – and your retail storefront needs to meet your customers’ demands. If you don’t respond to mobile shoppers with a responsive and easy-to-use mobile site, your customers won’t stick around for long. As this infographic from Get Elastic explains, 50% of people say they’ll visit a website less if it’s not made for mobile browsing; and 61% say they’ll quickly leave if a site isn’t optimized for mobile. At the same time 67% say they’re more likely to buy from a mobile-friendly site.

To create a mobile shopping environment that encourages your customers to stay on your site, one of the things you need to decide whether to go with adaptive design or responsive design. The biggest commonality between the two approaches is that they both allow websites to be viewed by devices with various screen sizes, with the goal of providing the best possible mobile user experience. The two methods differ in how they do this. Responsive design uses flexible and fluid grids to provide a design that adapts to the device and screen size.

Adaptive design, on the other hand, relies on predefined layouts for various devices and screen sizes. As such, responsive design is known for requiring more code to operate the fluid grids, CSS, and flexibility of the design, while adaptive design’s layered predefined approach is more streamlined, and uses scripts to deliver the right design based on device and screen sizes.

As new media expert Garrett Goodman recently explained in the Huffington Post, adaptive design is in place when the mobile device makes adjustments to make the page viewable on a smaller screen. Responsive design, on the other hand, delivers these changes on the server side — the hosting server identifies the device in use, and responds by sending a version of the site that is optimized for the device size and features.

Each approach – responsive or adaptive design – has its pluses and minuses. Responsive design is usually one-size-fits-all – for example, you won’t need to build a separate site for mobile phone users and another site for tablets. However the responsive design approach is often slower than simply building a mobile site. Responsive design demands complex coding – for instance, important features like checkout need heavy code development.

While responsive design means your webpages will auto-adjust to fit onto a smaller screen, other features won’t always render well. The links on your home page and other pages of your site will be difficult to click on using a device with a small screen. (The visitor can zoom in to enlarge the links so that they’re easier to click on, but then they won’t see the entire web page, including other products you might want to promote.)

On the other hand, when you offer a version of your site that is dedicated to mobile users (using adaptive design), you can display content and links in an easy-to-navigate format  for smartphone or tablet users, which ensures visitors won’t become confused, or click the wrong link by mistake.

To determine whether responsive or adaptive design is the best approach for your business, figure out the goals for your mobile site. Are you simply trying to give mobile customers an easy way to access your website, or do you want to create an experience that makes the most of the benefits a mobile device offers, such as location services, finger swipes, or rich graphics? If you want the more feature-filled experience, the adaptive design approach is probably best.

Whether you go with responsive or adaptive design, or a mobile app versus a mobile site, make sure all of your important site features, such as site search and navigation, will work seamlessly no matter what approach you take.

Terry Costa is vice president of marketing at SLI Systems.