Project Management

Web designers face new challenges with iPad's Retina display

Will the iPad's new Retina display really wreak havoc on the web, as one web strategist suggests? What are the challenges and opportunities for web designers? Share your thoughts.

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.

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.

About

Selena has been at TechRepublic since 2002. She is currently a Senior Editor with a background in technical writing, editing, and research. She edits Data Center, Linux and Open Source, Apple in the Enterprise, The Enterprise Cloud, Web Designer, and...

7 comments
daanjobsis
daanjobsis

We as webdesigners and developers stand for a huge change in the way we create websites. The device landscape only gets bigger and broader, with different resolutions on each device. Apple may be the (one of the) first to implement high resolution screens in their products but all other manufacturers will follow! There is absolute no doubt about that. So in the long run we have to come up with a appropriate solution. The Apple way of creating sharp images is to double the resolution of bitmap images. The downfall is the image size: roughly 3 times the size of a normal resolution image. Way to big to become a reallife solution. In a series of tests i've done I came to the conclusion it IS possible to compress the hell out of Retina images and still get a sharper image on Retina screens. The Retina images are even smaller than normal resolution images, Sounds impossible, but true! You can read a blogpost about this phenomenon with lots of test images here: http://design.netvlies.nl/ontwerp/retina-revolution/ Hopefully a small contribution to the discussion! Daan

berman.tim
berman.tim

All this does is highlight bad websites. All good sites already look great on my new iPad. Sites that have been badly planned and developed look crap. Innovation like the new iPad just improves the overall quality of the web. Like most changes in life the weak are scared and the strong embrace change.

radleym
radleym

Once again the evil gnomes at Apple copy features from Android - this time its Fragmentation! IOS is doomed! Android developers report that the greatest challenge coding apps across versions is differing screen densities, and Apple supporters know that fragmentation is Android's downfall! Apple - find your own downfall! Stop copying and innovate!

BillGates_z
BillGates_z

Looks ok on everything else, must be that ipad.

danbi
danbi

The problem with most of the web sites is that their designer are self-certified "experts" that sometimes don't have any clue what they do. This phenomenon is exaggerated by the hard work that browsers do to make the appearance of any web page as good as possible. Programming for the for the lowest common denominator is thus understood by many as "we design for 1024x768 pixel and it's ok everywhere". Things like avoiding images for round corners etc. as much as possible is completely unknown technique.. Of course, the new iPad will not change this. It will be just one of the "higher resolution displays" those designers will see in their "analythics". There are already high resolution display users, for resolutions at or above 1600x1200 but they are largely ignored and nobody designs for these users, because they fall in the very small percentage. What the new iPad will do is to change that percentage to be higher. But considering there are lot more already sold tablets at 1024x768 or similar, it will take at least one more year before the new higher resolution displays are more widespread.

Htalk
Htalk

If we can't tell whether it's an iPad 1/2 or an iPad 3 then there could be some problems. But otherwise it's the same as supporting all the different desktop screen resolutions.. all the mobile screen sizes.

TNT
TNT

Web design has always (with a few rare exceptions) come down to designing for the lowest common denominator, not the latest technology. I don't see the iPad's new display as something to design for, unless developing an e-book for the platform. That said, I do think it is always imperative for designers to learn new tricks and to use HTML5 and CSS to do more of the heavy lifting on ones pages. It not only performs better it looks better too. So put the Wacom stylus down and step away from Photoshop. Now consider how to produce your design using the new features built into the web itself.