When Apple introduced its new iPad with Retina display, we noted how it could transform web design, but also that developers had a battle on their hands.
This was because low-res images looked obviously blurry on the iPad's high-res display - more so than on smartphones. With Apple recently releasing a MacBook Pro with a high-res display, designers asked if a Retina display should now be a stock testing item, and also if a 'Retina war' was looming.
Thomas Fuchs appears to be siding with those developers who see high-res as an inevitable transition that will take place soon. He's in the process of releasing Retinafy Your Web Sites & Apps, a book that enables you to do precisely what it says in the title. According to Fuchs, making his own apps ready for high-density screens made him realise there was no 'go to' source for this: "Everything is spread out in a gadzillion blog posts and forum entries, or hidden deep in Apple's or Google's documentation. A lot of the information out there is also technically incorrect or out of date. And then there's lots of bad advice, causing unnecessary work."
Fuchs told .net the book he crafted is therefore a "no-nonsense, fluff-free" guide to getting your site or app looking great on high-density screens: "I've done lots research on how to get great results without having to write extra CSS or provide extra image versions when you can avoid it. There are also how-tos on getting image compression right and how to keep loading times fast. I'm talking about all assets that need work that may not be obvious at first, including SVG images, Canvas elements and Favicons." He added that the book is pragmatic and based on his own real-world projects.
To those designers who think dealing with high-res displays is jumping the gun or somehow pandering to Apple, Fuchs argued: "Basically all phones and tablet have high-density screens - it's not just iPhones, iPads and some MacBook Pros. For example, the vast majority of Android phones have what's called 'hdpi' by Google - screens that are about 200 dpi or higher." Fuchs said that in terms of CSS, this means that '1 CSS pixel' equals '1.5 physical pixels' on these devices. "In other words, you'll need high-resolution images for these too. Also, a lot of the information in the book regarding the scaling of images directly applies to responsive design as well."
There are also other benefits to the Retinafy approach, said Fuchs, including accessibility being improved for people who zoom in on desktop browsers and mobile, along with potentially superior print quality. "In any event, in a few years most screens will be Retina, whether you like it or not," he added.
Retinafy Your Web Sites & Apps is currently available in beta form for $19, with the full price being $29. Fuchs told us the decision to release the book early was driven by liking people having early access to information and contributing a better final version for everyone: "Having early feedback helps me find spots where I should describe things differently or in more detail."
