Lately the internet has been ripe with rumours of new MacBook Pros and what new features they’ll come with. Among rumours such as as even thinner form factor and USB 3, one of the most exciting features/rumours is the possibility of a Retina display, which would give the new thinner laptops a beautifully rich and crisp display to compliment the Retina displays of the iPad 3 and iPhone 4/4S.
The Retina display has of course been a huge success, and it’s pixel density and it’s crisp text rendering have made reading, and most text based activities, and absolute joy. The real, and only, issue with bringing the Retina display to the MacBook Pro is the huge amount of time it could take for the web to be ready for this drastic resolution change. The entire web being ready is a mammoth (and maybe impossible) task, and it seems like the majority of websites that would go Retina early on are technologically up-to-date sites, large worldwide brands, and the design savvy.
The above image shows OSX in HiDPI mode using Retina images for most of the interface. However, if you look closely you can see a few elements on the screen that aren’t designed for Retina and they look blurred, namely the top left Apple logo, and the arrows in the TextEdit UI.
Designs and interfaces that haven’t been designed for Retina displays don’t look particularly nice. At twice the resolution, images can look blurred and won’t show off the true ability of the gorgeous display. The adoption of Retina graphics for iPhone and iPad was relatively quick, with Apple allowing time for developers to get their apps ready a few weeks before the launch of the devices. But it’s a different story for MacBook Pros, as the number of websites vastly outweighs the number of iOS apps.
Developing a website for use on a number of different devices can be tricky enough with a huge amount of different resolutions and devices to cater for, but with the addition of the iPhone 4/4S and the iPad 3, designing iOS apps became a much larger task with two different resolutions to design for. Now this problem, if you actually class it as a problem, crossed over to the web when the Retina iPhone and iPad’s came along, but it wasn’t a widespread situation.
Browsing websites on your iPhone 4/4S or iPad 3 can sometimes deliver the occasional blurry image, but a Retina MacBook Pro would mean that theoretically web designers would have to deliver every image used on a website at twice the size, which will increase the size of the files being downloaded from the server. There are some great tools available that can download the high-res version of images when needed, like retina.js. Another way of getting around this problem/situation is to use SVG’s as images, which are scalable vector graphics. Having each image as an SVG won’t require multiple resolutions as the images can scale comfortably to each resolution it’s delivered to.
While the Retina MacBooks are just rumours, it seems like the most sensible solution is to fully adopt CSS in place of image replacement techniques for backgrounds, buttons and other CSS-able web elements, saving high res Retina-images for logos and other important branding. The most important thing is to not think of this as a problem, and more of an opportunity for the web to become even more beautiful. It might just take a while for the whole of the web to get on board.