Sponsored Special Report: Web and mobile design converge

Approaches to web design are changing as consumers increasingly browse the web from mobile devices.

Internet Retailer

More than half of online shoppers use their smartphones and tablet computers in the course of making a typical purchase from an online retailer, according to comScore Inc. data. And so it is no surprise that the look and functionality of mobile and desktop sites are blending as merchants strive to provide a unified experience.

Consumers want user-friendly retail sites, and to move easily from a merchant's site on a desktop computer to a smartphone or tablet. Regardless of the device they're using, they want to be able to quickly complete their business. As consumers see it, why should the web site experience change if they access the web using a mobile device or desktop computer?

"The lines between mobile and desktop design are blurring because consumers are using both to access the Internet," says Christina Anderson, an e-commerce strategist and consultant for site design firm Americaneagle.com. "The mobile experience has led consumers to expect cleaner site designs that filter out the noise of past design styles where every inch of space was utilized for content or coloring."

Start with mobile

One design technique that has taken hold over the last year is the mobile-first approach. The concept is to begin designing a web site with layouts for mobile devices, which are the most difficult, and then design for the desktop. "Mobile site designs are the most challenging to address because retailers are trying to get all the relevant information from a desktop in a small, single-column space while maintaining a beautiful and organized user interface," says Patrick Collins, president of mobile solutions provider Merkle 5th Finger.

One way to spot a mobile-first web site is that they often feature the so-called hamburger navigation menu—a button with three overlaying lines representing the patty sandwiched between the bun.

The benefit of the hamburger button from a design perspective is that it saves space while allowing for easy navigation. It also gives the site a modern look and feel, Collins says.

The mobile-first approach and hamburger menu are most frequently applied in responsive design, a design technique that uses a single set of code to render optimized layouts across all devices.

"Many new sites are being built using responsive design, primarily due to the increase in mobile device usage and responsive design's ability to provide internal ownership across those devices," Collins says. "Responsive design adapts itself to multiple screen sizes, which means retailers don't have to have one team running their web site and another team or third party running their mobile site, which is the traditional approach."

"The resulting design influences, such as the use of hamburger buttons, are subtle, but they are making site design more intuitive to consumers' expectations," Collins says. "The key to good site design is to use elements that don't distract the customer from her objective."

Infinite scrolling is another navigation-friendly feature common to mobile sites that designers are adopting for desktop sites. Infinite scrolling lets desktop users move through content quickly because they don't have to move through the web site by clicking from page to page and wait for each page to load. Instead, content automatically loads behind the content being viewed, so that the shopper can scroll down the page to see more results.

Scrolling makes it possible for a shopper to quickly find what she is looking for, Anderson says. And the more content retailers can put in front of consumers, the better the chance that the retailer will provide the shopper the information she needs to make a purchase.

"Infinite scrolling does away with visitors having to contend with clumsy page-to-page navigation," Anderson says. "Plus, it takes pressure off desktop designers to cram in as much content as possible above the page break to make sure it gets seen, as many consumers grow more accustomed to scrolling from using their mobile devices."

Infinite scrolling does have some drawbacks. "Infinite scrolling is not always user-friendly and can affect page load time in some instances," Anderson adds. "It is best suited for novelty or fashion retailers where users may just be casually browsing rather than sites with more utilitarian products where visitors know exactly what they want."

Prioritize speed

Regardless of the device a consumer uses to go online, he expects a site that responds to his every command—and fast. "Speed should be a priority in site design because it matters to consumers," Collins says.

One of the biggest drags on web site speed is page weight, meaning the total size of all elements that have to render on a page. Collins says images on an e-commerce site typically account for about 70% of page weight. The size of images play a direct role in how long a page takes to download. It takes web browsers more time to load larger, heavier images than smaller, lighter ones.

It is not uncommon for a retailer to instruct its web server to resize a large desktop image to smaller dimensions when a mobile device's web browser requests it. Unfortunately, it takes extra time for the web server to send the image data to the mobile device's browser, resize it in the background and then download it on the page. A more efficient approach is to instruct the server to send an image that is already sized to fit the mobile device's screen. Using images scaled to the exact sizes they are to be displayed reduces the bandwidth needed to load the images into the browser, which decreases download times.

Additionally, not all images created for desktop viewing will maintain their clarity and crispness if shrunk to fit a mobile screen. "Images created to be displayed on a desktop computer can't be properly resized for a mobile device because doing so reduces image quality and can make image copy illegible," Collins says. "Retailers want to avoid shrinking desktop images for mobile devices."

One solution is to create alternative images with dimensions that will fit mobile devices' smaller screens without sacrificing image quality. "We will create alternative images and we have tools that intelligently pull those images as needed to fit the device being used," Collins says.

Videos can also slow page downloads because they're often large files. Subsequently, the question of whether to include videos on a site creates a conundrum for retailers looking to balance site speed with the visual appeal of videos and the depth of information videos can provide.

One way to successfully balance the trade-off between speed and videos' appeal is to host videos through YouTube, Americaneagle.com's Anderson says. "The performance benefit from handling videos through YouTube is that if a retailer has an embedded YouTube player on its site, it will display the video thumbnail on the web page and the video will play in the built-in device player, rather than playing in-line on the page."

Additional tips for improving video quality include embedding videos via HTML5 as opposed to Flash, which is incompatible with Apple Inc. mobile devices. "We recommend displaying video using HTML5 to ensure compatibility with mobile devices," Anderson says. "Using Flash eliminates a good portion of the audience that can view the video."

Responsive design

As more consumers access retailer web sites using a combination of mobile and desktop devices, retailers are realizing that designing separate web sites for each device is cost-prohibitive. For some, it may make more sense to use responsive design, which uses a mix of flexible grids, layouts, images and Cascading Style Sheets to automatically adapt to the accessing device's resolution, image size and scripting capabilities so the web site properly formats to the screen.

"The most user-friendly web sites are those that adapt to the device being used by the shopper, and that's what makes responsive design attractive," Anderson says. "As the screen size changes, the size of the content and typefaces adjust accordingly."

Retailers on a budget, however, can't necessarily afford to rebuild their sites to take advantage of responsive design. Maintaining a separate mobile-only site also tends to become costly in dollars and resources, Collins says. He says the less costly and faster alternative is to transform an existing site with responsive design.

Merkle 5th Finger, which offers this service, recommends retailers redesign the 10 to 15 pages most viewed by customers, including the home page, the search results and checkout pages. Doing so will make a retailer's web site more user-friendly, regardless of the device used to access it. "This approach allows retailers that can't afford to completely redo their site to still introduce responsive design," Collins says.

Social media is also influencing web site design. Smartphone users often research products on their phones and later complete a purchase using a tablet or desktop computer. Many such consumers look for social media sharing links on retail sites so they can post product information on Facebook or on a Pinterest board, Anderson says.

"Providing these options can help with conversions among mobile users because it lets them post reminders to buy the item, rather than letting them walk away with the hope they'll return," Anderson says. "Another option is to make e-mail links on product pages highly visible so shoppers can send that information to themselves."

The ever-evolving nature of consumers' web habits and tastes means that retailers can't sit still when it comes to site design. And that's particularly true at a time when so many consumers are buying, and getting to know, new mobile devices.

All these changes make ease of use increasingly important. "The more intuitive retailers design their sites to be, the better chance they have of converting a sale," says Collins.


Responsive Design WhitepaperPresented by Merkle 5th Finger
Learn how Responsive Design experts tackle speed and customer experience through this whitepaper and case study.