February 1, 2011, 12:00 AM

Designing for the evolving web platform

Small touchscreens are all the rage, and they change the rules of site design and usability. There are more changes to come.

Lead Photo

Life was so much simpler back in 2003 for designers of e-commerce sites. They could assume most consumers would be accessing their sites from a desktop computer with a monitor roughly 15 inches wide, and 95% of them would be using Internet Explorer as a browser. Everyone used either a mouse or touchpad to navigate web sites back then.

How times have changed.

Today, millions of consumers access e-retail sites from smartphones and tablet computers like the iPad that dispense with the mouse in favor of a touch interface. Designers have to figure out how to make a web site look good on a 4-inch smartphone screen or a 27-inch desktop monitor, and on all the netbook, laptop and tablet computer screens of in-between sizes. Roughly half of online consumers are using a browser other than Internet Explorer.

"Design is a complex world," says Halley Silver, director of online services at King Arthur Flour Co. Inc., a manufacturer and e-retailer of baking tools and ingredients. "On the one hand, screens are getting bigger with consumers buying larger monitors. On the other hand screens are getting smaller with the proliferation of mobile devices and increase in smartphones. There comes a point where you can't build a site for each device."

It's not going to get any less complex for e-commerce site designers any time soon, as market watchers predict consumers will increasingly access the web with smaller, mobile touchscreen devices. Consider these projections:

  • By 2013, 58% of all mobile devices sold worldwide will use touchscreens, a percentage that will jump to more than 80% in North America and Western Europe, according to research and advisory firm Gartner Inc. Worldwide demand for touchscreen mobile devices nearly doubled in 2010 to 362.7 million units from 184.3 million units in 2009, Gartner says.
  • The number of U.S. consumers who own tablet computers, such as Apple Inc.'s iPad, will grow to 82.1 million by 2015 from 10.3 million last year, Forrester Research Inc. says. That's a compound annual growth rate of more than 51%.

And only 13% of iPad buyers purchase tablets in lieu of laptop or desktop computers, says market research firm NPD Group. That means many consumers will be visiting e-commerce sites from several types of devices: smartphones, tablet computers, personal laptops and office desktops.

Add in the end of Internet Explorer's monopoly on web browsers and the wide range of screen sizes Internet users will be peering at, and the challenge for web designers becomes even more complex.

"What we're dealing with today is what we call the splinternet," says Brian Walker, an e-commerce technology analyst at Forrester Research. "There may not be one design that will satisfy the different interfaces and devices customers are using."

The fragmenting of the way consumers access the web is a relatively recent phenomenon—the smartphone revolution only began in January 2007 with the launch of Apple's iPhone, which also popularized the touchscreen. Some retailers are responding by creating designs tailored to specific devices, while others find shortcuts that make a single site design easy to navigate no matter what hardware and software the consumer uses. Retailers will be watching closely to see which approach best balances costs and benefits.

What doesn't work

As they enter this new world, designers have to be aware that some familiar web technologies won't work on some of the new touchscreen devices.

A prime example is Flash, the Adobe Inc. technology widely used on the web to display video and animation. Flash elements won't appear to consumers accessing a web site on an iPhone, iPad or iPod Touch, because the Apple operating system software those devices use, iOS, doesn't support Flash.

About 6% of the traffic to the e-commerce site of DNA 11 comes from those Apple devices, and that led the e-retailer of pop art representations of a consumer's DNA to remove most of the Flash from the new version of its web site late last year.

"Looking at the data we realized we had a mandate to eliminate nearly all the Flash on our site," says Adrian Salamunovic, co-founder of DNA 11. "It didn't take a rocket scientist to see that we couldn't afford to give that many shoppers a bad user experience."

For DNA11.com's redesign, designers used the emerging HTML5 programming language rather than Flash. HTML5 is an upgrade of the web standard HyperText Markup Language, or HTML, that can render multimedia and graphic content without Flash. That helped the retailer ensure the site would render well on nearly all consumers' screens, regardless of device or browser.

But even here there is complexity, because the 10-year-old Internet Explorer 6 doesn't fully support HTML5. DNA 11 used jQuery, a set of JavaScript controls that simplify HTML to produce a version of the site for visitors using IE6. While most Internet Explorer users are on versions 7 and 8, 2.6% of web traffic still comes from IE6 users, says StatCounter, which tracks online technology.

Touchscreens add another complication for retailers whose sites use pop-up windows or flyouts to display sub-categories in a navigation bar or more information about a product.

On a standard web site, those information boxes appear when the visitor's mouse hovers over a particular location, such as a main category in a navigation bar. But on a touchscreen there is no mouse—and thus no mouse for the site to detect. A visitor would have to tap the category to see more detail, a very different experience for the consumer who may not be aware there is more information to be found and thus may not tap on the category heading.

Eyecatching design

comments powered by Disqus

Advertisement

Advertisement

Advertisement

From IR Blogs

FPO

Holly Pavlika / E-Commerce

How a mommy blogger would rewrite online product descriptions

Technical jargon turns off young mothers, who have a lot of buying power. Here’s how ...

FPO

Hilmi Ozguc / Mobile Commerce

Seven tips for making the most of beacon marketing

Mobile commerce experts, including mobile commerce chiefs at retail organizations, say in-store use of mobile ...

Advertisement