Apple's new iPad will transform web design

R/GA web strategist Brad Frost last week suggested the new iPad's Retina display would wreak havoc on the web. In an article on his blog, Frost stated that despite the web already struggling with bloated downloads, designers would feel compelled to boost image resolutions, in order to combat a likely slew of crisp, Retina display-optimised apps. "The user on the bus can be on slow Wi-Fi or 3G and might just need to get the damn assets downloaded. They shouldn't be punished with downloading a massive Retina-ready image," said Frost. "We need a way to properly address this."

Designers we spoke to echoed Frost's concerns, but also hinted that Apple's lead (which others are sure to quickly follow) also presented opportunities for change.

"Web developers will start thinking about Retina resolutions for sites now, but won't know what to do about it for a while," thinks ZURB partner Jonathan Smiley. He tells us that creating a site for the new iPad's Retina display requires an understanding of the appropriate media queries, pixel ratios, knowledge of your options, and backend tools to help deliver the right content. "Throw on top of that mobile optimisation, even if the new iPad supports 4G, and it's a pretty tricky picture."

Icon artist and designer Jon Hicks says that the new iPad would undoubtedly have an effect on the industry: "Not only on vector artwork adoption, but also in the tools to create such content. Expect to see devs concentrating on making graphic apps produce good optimised SVG, in the same way animation tools have built up around CSS animations." Hicks adds that with high density displays, "all the problems of restrictions of creating artwork that works with anti-aliasing and pixel grids no longer exist – it's like working for print again".

Double the workload

During the transitionary phase, however, Smiley reckons that while there's awesome opportunity, "some people will have to lead the charge and show everyone how this can all work," and notes that "it's no easier for web developers to cater for this than app developers who need two sets of assets – and there are still plenty of iPhone apps that don't work on Retina screens two years after the iPhone 4 appeared".

Designer Sarah Parmenter mirrored Smiley in thinking designers might "have to start creating multiple sets of artwork, for web projects, as standard," but also reckoned "we're at a stage where the compatibility of CSS3 is excellent, on WebKit especially," and so was hopeful designers can increasingly be creative with what can be achieved 'natively' in the browser. She also noted that services such as Pictos Server can assist with scalability of things such as icons. "I'm sure we'll see more solutions in the coming months. And I think an interesting discussion to be had is whether web designers start adopting the @2x approach as standard or whether it gets classed as an additional service on-top of what we already do," she added.

For Frost, any decisions designers come to must carefully balance performance and the improvements offered by advanced displays. He told .net that when the iPhone 4 arrived, there was a "massive scramble at our office to update icons and graphics to accommodate the Retina display. For these brands, image is really important and it was shocking to see just how badly fuzzed out a lot of imagery became." Additionally, though, Frost noted that "tablets are still mobile devices, affected by slow connections and relatively underpowered processors." 

The goal, according to Frost, is to keep things as lightweight and resolution-independent as possible. "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." He outlines further tips in Optimizing Web Experiences for High Resolution Screens, but told us the overriding rule is to "make contextually-considerate experiences", and this "requires a lot of thought and care".

What are your plans for working with high-density displays such as that on the new iPad? Let us know in the comments, and check out the new iPad 3 review.