Trying to deliver a responsive Web design, an interface that is customized to your customer's Web surfing environment, is becoming nearly impossible thanks to the latest and greatest technology. Four trends are ripping apart the principles of solid Web design that existed even a few years ago: small tablets, better looking screens, mobile phones and netbooks (remember those?). The result is retailers spending a lot of money to make great looking Web sites and then finding out that a large portion of their users have a "less than optimal" experience.
When I saw last week's StorefrontBacktalk story by Frank Hayes about how top retailers did not seem to know that Android tablets existed, I was surprised, because those results were quite different than my own research done just a few months earlier. My research focused solely on the iPad. I found that most retailers serve up their full Web sites to an iPad 2, which left me wanting more. I thought it was ridiculous that my first experience was having to pinch out to be able to read the tiny font. But in Frank's research, he had found that the top retailers serve up their mobile sites to a Nexus 7 Android tablet, which means they aren't taking advantage of the iPad's larger screen and are serving up cut-down mobile content.
So what is causing us to have such different experiences, beyond Android versus iPad? It appears that the 7-inch form factor is the culprit. Last year, some 81 percent of tablets sold were iPads with a 10-inch-class display. Seven-inch tablets didn't exist until the Kindle Fire was released late in 2011. It's not surprising to me that retailers haven't adapted their sites for a platform that didn't exist even a year ago.
But it's important to know that most Web design done today is based on pixel width. A Web developer or designer is typically creating one or more views of the content based on the number of pixels wide the content will be. Most Web sites you see today are typically built for around 1,000 pixels wide. This was done because, until recently, the "most common" screen resolution width was 1,024 pixels. So designers, looking to optimize their content for the largest group of customers, built for the average.
Although mobile phones presented a challenge when the iPhone was first released (very few retailers had modified their content to support the BlackBerry crowd previously), developers eventually responded by creating a second set of content designed for these smaller screens. They also adjusted what content was presented on these screens, because it quickly became apparent that users accessing the Web site "on the go" from their phones wanted/needed different information than those surfing from their desks. So smart retailers developed mobile apps that focus on a store finder, hours of operations, contact information and a product catalog designed to be mobile friendly.
Tablets may be the platform du jour, but we can't forget about the netbooks that were all the rage just a few short years ago. Before tablets took over, it seemed that everyone and their grandmother was buying the small, inexpensive devices that tended to carry a smaller screen resolution than their laptop counterparts. So many of these units were sold that the "average screen width" went from 1,024 pixels to 768 pixels earlier this year. So as of earlier this year, the "average surfer" is going to have to scroll left and right to see your entire site. Not good.Tablets are causing a ruckus for three different reasons. First, they typically enable users to surf in either portrait or landscape mode, which means they effectively have to be treated as two different devices. Second, tablets have now split into two classes of size (7 inch and 10 inch). And third, the technology is advancing with the new screens to pack in more pixels for every inch of display.
The new iPad packs 264 pixels into every inch of its retina display. Although that produces some amazing pictures and movies, it also means a screen with more than 1,500 pixels packed into less than 7 inches of space. The result is fonts and images that are really high quality but really tiny.
Here are some of the screen resolutions of the top tablets:
- The new iPad: 2048x1536 (10-inch class).
- iPad 2: 1024x768 (10-inch class).
- Kindle Fire: 1024x600 (7-inch class).
- Kindle Fire HD: 1280x800 (7-inch class).
- Barnes & Noble Nook HD: 1440 x 900 (7-inch class).
- Google/Asus Nexus 7: 1280x800 (7-inch class).
- Motorola Xoom: 1280x800 (10-inch class).
- Galaxy Tab: 1024x600 (7-inch class).
- Galaxy Tab 10.1: 1280x800 (10-inch class).
Starting to see the problem? Do you think a screen that looks good on a 10.1-inch Motorola Xoom is going to look as good on a 7-inch Nexus 7 display, even if they have the same resolution? The same goes for the New Galaxy Tab 10.1 versus the new Kindle Fire HD. Even if you designed your site to work well on the iPad, you are dealing with two dramatically different screen sizes in terms of pixels. According to Pew Research, 22 percent of Americans now own a tablet of some sort. The result is that unless retailers start to take the time and money to optimize their content for all of these different platforms, the Web is going to look bad to more people than it is going to look good.
This creates a bigger problem than Web developers faced during the 1990s with the lack of browser standards. Each major player in the browser world had certain features that would work with it but not its competitors. Developers and designers were forced to either play to the lowest common denominator and have a crappy looking site or write some spaghetti code that said, "if you are on Internet Explorer version 5, do this, and if you are on Firefox do that," etc. It was a nightmare for all involved, especially those doing the testing.
Based on Frank's research, it appears that most retailers have decided their customer experience will be better served on a 7-inch tablet with their mobile site versus their full Web site. The problem is that the mobile sites are designed for people "on the go." And just because someone is accessing your Web site from a 7-inch tablet, doesn't mean he or she isn't sitting on the couch watching The Voice.
Retailers need to wake up and realize that one of the biggest keys to customers' experiences with their brand electronically is the how well they optimize content for those customers. Creating both a full Web site and a mobile Web site is no longer enough. Retailers have to create content that is designed for tablets. They have to create content that is portrait or landscape aware. And they have to adapt to the market changes.
What do you think? If you disagree (or even, heaven forbid, agree), please comment below or send me a private message. Or check out the Twitter discussion on @todd_michaud.