Practical Ecommerce

5 Ways to Enhance an Ecommerce Site for Tablets

Online retailers must design sites that work well and look great on tablets as those devices emerge as a favorite for online shoppers. Designing for tablets include adaptive layouts, touch-sensitive navigation, great images and graphics, and fast load times.

Some 25 percent of American’s now own and use a tablet computer like Apple iPad, Google Nexus 10, Samsung Galaxy Note, Amazon Kindle, and Microsoft Surface, according to an August 2012 report from the Pew Internet & American Life Project. Tablet adaption is outpacing smartphones’ growth rate from a few years ago, and there are many reports indicating that online shoppers like using tablets to make purchases or browse for future purchases.

Conscientious online retailers will want to redesign their stores to accommodate tablet shoppers. There are at least five things that merchants can do to make an ecommerce site look and work better on tablets.

Adapt to the Device

Years ago, website designers and developers would build several versions of a site, in fact, there was even a time when it was a good idea to build separate sites for Microsoft’s Internet Explorer and its primary competitor at the time, Netscape Navigator.

More recently, designers built completely separate versions of a site for mobile devices. These mobile sites frequently offered only some of the content available on the full version of the site.

This multisite trend was very frustrating for users who were familiar with the layout and features of a company’s “full site,” but who could not access those features or find what they wanted on the mobile (.mobi) version. Users wanted one web, if you will, for all devices.

Thus, a better approach for presenting a good looking site to tablet — or other mobile — users is to build a one that responds to the size of the client device or window and adapts some of the content to provide a mobile browsing experience.

In responsive design, the developer or designer uses flexible layouts — frequently flexible grids — in conjunction with CSS features like media queries to build pages that respond to the user’s environment, including screen orientation, and interaction or behavior.

In a well-planned responsive or adaptive design, there is continuity between the layouts, where smaller, faster-loading versions of some content may be used in the mobile environment. Or some content can be held back and then added via Ajax when a user requests it, but the site, whether displayed on an iPad or a desktop is still the same, with the same features, and a similar layout.

An excellent example can be seen in the United Pixelworkers website. This retail site is changes its size as it is viewed in different devices, but it uses consistent layout style, graphics, and features.

The United Pixelworkers site renders well on all devices.

The United Pixelworkers site renders well on all devices.

Provide Finger-friendly Navigation

Navigation is an important part of designing sites that look beautiful on tablets. In fact, making a site easy to navigate on a tablet’s touchscreen might be the single most important thing that an online retailer can do to improve how a site looks and acts.

First, ensure that navigation is not dependent on hovering. Hovering is an awesome effect on laptops and desktops, but it doesn’t presently exist on tablets.

Next, consider consolidating the navigation under a single tab or button. Here again, the excellent United Pixelworker’s website serves as a good example. The site also uses what is becoming the standard icon for consolidated navigation — three horizontal lines.

The United Pixelworker’s site navigation is shown under a single icon on the tablet version of the site.

The United Pixelworker’s site navigation is shown under a single icon on the tablet version of the site.

Finally, content sliders that are used for navigating to features should be swipe-enabled. Tablet users want to navigate with their fingers. Make that easy for them.

Use Lightweight and Beautiful Images

Designs built to display well on tablets should not be designs devoid of images and graphics. In fact, the opposite might be true.

Tablets are by nature tactile devices. Users want to “touch” the products when they shop from a tablet. What’s more, tablet devices, like the iPad, are designed to render photographs and images wonderfully.

To build a great looking site on any device, use great looking photography and graphics. But, you may want to adapt that photography for the device. This can be done with scripts that load smaller, lighter in terms of file size, images when the shopper is using a smaller device, like a tablet. Don’t shy away from photography, but find ways to load it quickly.

Replace Graphics with CSS as Appropriate

Having just pointed out that sites built for tablets should fearlessly use images and graphics, it is worth noting that not everything needs to be a graphic.

In the past, web designers might use an image for backgrounds, gradients, icons, or logos. While this is still perfectly acceptable, it is not possible to do many, if not most, of these kinds of graphics using CSS. These CSS-based graphics should load much, much more quickly than images, meaning that a store’s site will pop into view more quickly. Now that is beautiful.

As an example, Ecsspert has demonstrated how to produce several well-known logos with CSS alone.

Ecsspert recreated the Twitter logo using CSS descriptions.

Ecsspert recreated the Twitter logo using CSS descriptions.

Optimize for Faster Load Times

How quickly a page loads on a tablet device can have an impact on how well users like a site. In some sense, one part of what makes a site good for tablets is how fast that page is visible and usable.

When designing a site for tablets, optimize it. This means consolidating images into sprites — a collection of images that can be displayed separately but loaded once — concatenate or combine style sheets and scripts to reduce the total number of HTTP calls that the site must make.

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


Sign up for our email newsletter

  1. madjoel January 9, 2013 Reply

    Optimizing for faster load times is something we should all be trying to do across our multisite initiatives, but if your site is image heavy (read: e-commerce) then a responsive approach is maybe not the best experience for the end user.

    Certainly any standard, corporate info site can and should be created with responsive design. However if your goal is conversions, you will still need a dedicated mobile site and a dedicated tablet site in order to create the best environment for conversions.

  2. robin_aitken January 11, 2013 Reply

    A technique for improving the user experience on devices with limited screen real-estate that has not been mentioned is voice enablement. Most devices are voice-enabled and yet very few sites encourage their visitors to use it. Why? Well, most sites are using a keyword search engine which whilst returning a set of results, still requires the user to navigate further through layers of attributes to find exactly what they are looking for.

    When using voice input most people do not tend to speak in "keywords" instead they prefer simply to ask a question in natural language, as they would when speaking to a store associate – for example "black short-sleeved dress under $100" – specifying far more information in the query. Imagine having a search engine that could understand the query above or "high yield black toner for Lexmark X543 DN" and return EXACTLY the products intended. Then the navigation that proves so difficult on small devices become far less important – users find products more quickly, which ensures customers queries are satisfied first time, which in turn drives improvements to conversion rates and customer satisfaction. Results have shown that people who use the search box when visiting a site are more likely to buy – and buy more over time due to the better search experience. are one example of a company who has implemented this type of search (try my first example above on the site) using EasyAsk eCommerce Edition Many others are realising that simply by making the search box large and prominent, and having a technology that can interpret questions correctly, the mobile/tablet user interface presents fewer problems!