Developers foresee ‘Retina War’

Designer Wells Riley has in a blog post claimed that a 'Retina War' is now upon the web design community, sparked by iOS devices and other smartphones with high-res screens, and further exacerbated by the new MacBook Pro. Riley said many websites and apps will "make the leap to hybrid Retina + 1x sooner [rather] than later", and he asked how long it will be before designers abandon 1x.

Riley noted historical precedent, with designers dumping older versions of IE despite the Microsoft browser still having a large market share, or imposing a development 'tax'. He asked: "How long before designers start imposing a '1x tax' on consumers with non-Retina computers because it's too expensive and laborious to maintain two separate asset libraries?" Riley also stated that it's effectively impossible to design with 1x on a new MacBook Pro, that existing software doesn't help, and that few strong solutions are available for web designers to rapidly rework images between 1x and 2x.

Opera developer relations manager Chris Mills said he could see Riley's Retina War as a possibility "from certain camps", despite high-res displays probably not becoming the norm for years. "It is the same kind of stupid argument as 'only designing for WebKit', or 'only designing for IE4 or Netscape 4' many years before that," he added, and said designers will have to continue creating low-resolution graphics for the foreseeable future.

In the current climate, Mills told .net, a sensible solution would be separate high-res and low-res sites, or media-query usage to swap assets as relevant: "For CSS resources, you can use media queries to swap between the two. You might have to have nested media queries – two to filter hi-res and low-res devices, and then child media queries inside those to start changing layout for different screen sizes." For HTML, Mills said the problem is harder, and he considered by Matt Wilcox the best solution, for most situations. (Wilcox has also recently written a feature for Opera on responsive images, providing further insight.)

Increased costs

Mills also agreed with the suggestion that Retina displays could introduce another 'tax' on development, in the sense of increased costs to clients. "Having to create more complicated CSS and separate low-res and high-res images sets will definitely increase costs," he said. He added that he hopes CSS3 features such as gradients and shadows will reduce the number of image assets required, and suggested educating clients by providing sets of test pages with and without high-res images. "Show them to clients on low-res and high-res devices," he advised, "to illustrate what the problem is and what is needed to get around it. Because – at least for the moment – 'hi-res device' means 'iPad/iPhone/MacBook', which equals 'sexy', the sell should probably not be that hard!"

Riley, however, told .net that while he's thinking some time into the future, we will eventually reach a point, by whoever happens to be the editorial authority on the matter, where high-res is the global 'norm': "And designers and engineers aren't going to want to waste their time downscaling or pixel-fitting UI assets for the legacy 1x screens, so they will be neglected. Either they'll be served 2x—at a quadrupled bandwidth cost—or they'll be neglected altogether. We've seen web developers do this with IE6 all the time. I know there's a difference between downloading a new browser for free and buying a $1-2k computer, but time has a funny way of making people apathetic about those 'minor details'."

He therefore hoped that the industry will be able to find a way to only design at 2x, "assuming engineers and designers will lead the pack in Retina adoption, and have software intelligently scale most assets—whether they be raster or vector", which would smooth the transition. In the meantime, while Riley wouldn't recommend anyone grab a new MacBook Pro today just for Retina, he called it a "no brainer" if you're in the market for a new computer: "The only caveat, however, is you have an external monitor at 1x—non-Retina—for non-HiDPI work."

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

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.