No stranger to annoying web designers, having once said apps were essential and websites weren’t, Instapaper creator Marco Arment has argued on Twitter that if you’re a web designer, “you really, really need to get a Retina MacBook Pro so you can see how bad your site looks on it and fix it”. Arment’s comments follow months of pain for web designers, who’ve suddenly found themselves battling so-called ‘Retina’ high-res displays on Apple kit, which makes web images look blurry due to upscaling.
.net wrote about the new iPad’s display back in March and Christopher Schmitt subsequently explored in depth the problem with adaptive images. But as Arment noted in his tweet and elaborated on in a blog post, such displays of any size are no longer confined to an Apple tablet – they’re now in an Apple notebook and will certainly become more commonplace over the coming months. He suggested designers can either play catch-up later, or skate to where the puck is going to be: “Even though it’s a small market today […], it’s inevitably going to increase substantially in the near future. Don’t you want to get ahead of that? Do you want your site to be ready the first time someone views it on a Retina screen, or are you okay with it looking like garbage for a few years until you happen to buy high-DPI hardware?”
If you can’t afford hardware for testing, Arment recommended at least simulating the iPad 3 with the iOS Simulator from Xcode, or enabling HiDPI mode on a large-screened Mac. This will provide an indication of which images (notably interface elements) that require 2x versions, he said. However, Arment also warned that only with relevant hardware can you truly feel what works with high-res displays: “Without having and using a real high-DPI computer, all you can do is add high-resolution images for the design you already have. You’ll miss the nuance of what looks good and what works well on a Retina Mac, because you won’t really be using one. […] I’ve been using a Retina MacBook Pro for one week, only as a secondary computer, and I’ve already changed my font, redesigned my narrow layout’s header, and conditionally replaced an image with text.”
Web design specialist Christopher Schmitt told .net that he definitely agrees with enthusiasm that "web builders need to figure out how Retina or high-resolution images change what we do sooner than later," noting that Acer and Lenovo will join Apple in releasing high-res products that are more affordable than the Retina MacBook Pro, bringing such displays to more people. In the meantime, he provides an alternative solution to anyone who can't afford new Apple kit in today's economy: "Apple has over 350 stores all over the world, and there's a good chance there's one near you. So, you can do some window-shopping to test out your sites, your client websites and the web at large on retina displays!"
Are you reworking your images for high-res displays, or are you taking a wait-and-see approach? If you are working with 2x images, what techniques are you using? Let us know in the comments.
