February 3, 2014, 11:59 AM

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

Topics: SRDesignFeb2014

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."

Comments

Sign In to Make a Comment

Comments are moderated by Internet Retailer and can be removed.

Not a member? Signup for free today!

Advertisement

Advertisement

Advertisement

Relevant Commentary

FPO

Jason Squardo / Mobile Commerce

Five tips for achieving high mobile search rankings

Searches on mobile devices will soon exceed those on computers, Google says. Retailers that keep ...

FPO

Sergio Pereira / B2B E-Commerce

Quill turns to its B2B customers for new ideas

Coming in April is a new section of Quill.com that will let customers and Quill ...

Advertisement