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 adaptive-images.com 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."
