What the new iPad means for design
The new iPad's display is so good that businesses need to change the way they design. Here's how.
Editors' note: This is a guest column by Mobify CEO Igor Falestki, whose bio is below.
The new iPad hit the shelves on March 16, flew off the shelves, and these shiny new devices are now in the hands of more than 3 million people.
If you somehow missed all the hype, the
Yet what feels like beautifully simple technology for consumers can give Web site owners a new set of headaches. The precise rendering of images on the Retina display reveals rough edges across the Web. Text may be pin-sharp, but put that text alongside photos, and those images don't look so hot. Logos appear blurred. Even shopping cart buttons become grainy.
Web designer Dave Shea explained it this way: "The iPad Retina display will make all your existing graphics look like pixelated clip art." This means that Web sites need to scale up for the new iPad, but is it worth it?
The business case
For brands and e-commerce sites, the cost of adapting for the new iPad can be steep, particularly since, as a New York Times Bits blog post pointed out, the new iPad is "just a single device out of the many computers, smartphones, and tablets out there with less 'resolutionary' screens."
However, brands can't underestimate the power of the tablet in e-commerce, as consumers are increasingly pulling out iPads and other tablets to shop. These interactive devices offer up a richer shopping experience that smartphones and computers can't match. A 2011 Online Publisher Association study reported that 52 percent of tablet owners prefer to shop online using their tablets, while only 40 percent preferred using a traditional computer.
For retailers, the tablet is a critical touchpoint, and the new iPad takes the visual experience to a new level. There's added incentive to optimize the tablet experience as consumers using tablets are a lucrative customer segment, spending more than 20 percent per purchase than desktop shoppers.
On top of consumer demographics are the impressive hockey-stick projections for tablet adoption rates: 55 million iPads were sold through December 2011 and Forrester projects that tablets will reach 112.5 million U.S. consumers (about one third of U.S. adults) by 2016.
While new competitors have entered the market since 2010, Apple is still expected to enjoy 62 percent of the tablet market this year; other vendors have yet to catch up with the iPad's advancements.
Chances are virtually all Web sites will need to eventually catch up to the iPad's high definition display; however, it's more critical for those brands that lean on imagery to sell their products, such as fashion and apparel retailers, restaurants, hospitality companies and more.
Here are four steps that can be taken today to adapt your Website to the new iPad Retina screen:
1) Prioritize important images. Start optimizing whichever images on your site are eye candy for your audience. Most likely these are product images; for example, in fashion and apparel, you'll want to make sure that your photos give customers a full view of the product details right down to the fabric texture, stitching, seams and garment quality.
Most Web production workflows already start with higher-resolution images that are scaled down for the web. Therefore, the right images are already available; they just need to be made accessible to the iPad Retina screen.
2) Turn text into text. On the Retina display, any text that is not text (i.e. overlay text, button text, text in headers, sidebars, search bars) looks terrible compared to the ultra crispness of actual text. To solve this, designers can either: a) work with the higher-resolution display and turn image text into actual text with the appropriate placement and styling or b) manage multiple versions of images with the text. While either approach will work, turning image text into actual text offers the better path for scalable design.
3) Boost button sizes. "Buy Now," "Learn More, "Sign up Here" buttons are critical to the efficacy of any website as they navigate visitors to the desired outcome. On the new iPad Retina display, practically all buttons look grainy and blurred. The best buttons feature the least adornment. Bezels reflections, gradients, and other effects reduce clarity. When using buttons, make the contrast between elements as high as possible; white text on dark, solid backgrounds provides the best view.
4) Increase logo size. Really -- make the logo bigger! Logos are common images that stand out poorly on the Retina display because they're on every page and often highly optimized for performance. "Regular" images on most sites are not good enough quality to be displayed clearly on the new iPad.
Living in a mixed HD, non-HD world
Just as televisions evolved from SD to HD, more mobile devices will eventually sport high definition displays like the Retina display on
the new iPad and the iPhone 4 and
The challenge at the moment is making HD images available for high-resolution displays, while also preventing non-HD devices from unnecessarily downloading the larger images. This is where a client-side adaptation framework comes in -- to detect the extra high-resolution displays and serve them higher quality images.
The decision to optimize for the new iPad ultimately resides with each Web site owner. Apple's latest tablet offers a beautifully powerful touchpoint to consumers and brands that upgrade to the new Retina display will stand out across the Web.