Apple’s Retina display actually debuted on the iPhone 4 back in 2010 and kicked off the web design challenge of creating graphics that displayed well on the much-enhanced screen resolution, which doubled the pixels people were used to seeing on handheld devices. The appearance of the Retina display on the new iPad was expected, but still managed to wow those getting their hands on it for the first time.
Joshua Topolsky of the Washington Post described it as “absolutely stunning.” The 2048 x 1536 resolution offers more pixels than an HD home theater setup:
The retooled Apple-developed applications and icons really do pop on this thing. When you are looking at Web pages or books, text looks smooth and clean - it’s almost a bit surreal how clear it is. Think of a glowing piece of paper, and you’re getting there.
All of this is great, but it does represent some serious challenges to designers — now faced with meeting the expectations of the droves of users who will be surfing the web on iPads, in addition to iPhones. This is the issue addressed in the .net blog, “Apple’s new iPad will transform web design,” by Craig Grannell. Grannell interviewed web strategist Brad Frost, who said the iPad Retina display would “wreak havoc on the web.” How to maintain performance for the majority of users and take advantage of advanced displays is the question. Web designers may have to create multiple sets of artwork for some projects or look for ways to compromise between the two. Here, Grannell, quotes Frost’s comments on the matter:
“Avoid images by using CSS gradients, rounded corners, box-shadows, and so on, and use HTML special characters and icon web fonts to reduce the dependency on images,” he recommended. “But use these techniques with consideration, because not every browser supports them. Progressively enhance a core experience to introduce these techniques and test it hard on real devices and in real situations.”
Recently, Ryan Boudreaux has covered many of the latest CSS3 features that could be used to ease the transition between standard and pumped-up resolutions.
- CSS3: Dynamic graphics using new transition and transform properties
- CSS3: How to implement the box-shadow property
- CSS3 Gradients: Setting color stops
- CSS3: Layering multiple shadows creates lightweight pages
- CSS3: New possibilities with text shadowing and 3D text
How do you think web designers and developers will deal with these seriously advanced display resolutions? What do you think are the best techniques to use for both standard and Retina displays? Let us know your thoughts in the comments area and feel free to suggest design challenges that you would like to see addressed in this blog.