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.
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".
Words: Craig Grannell
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
