Designing for Retina Display

Designing for Retina Display

The new MacBook Pro Retina Display is a technological marvel. I can’t even begin to explain how clear and perfect all Mac apps look. But this is not a review of the new Apple notebook. You can find a great review over at Cult Of Mac.

Notice how I said “all Mac apps..” The reason I didn’t say all APPS is because not all apps have upgraded their UI for Retina Displays. This includes browsers and websites. In fact, chrome looks absolutely awful! Text and images are noticably blurry and pixelated. Why? Because the Retina Display needs images twice as large to display the proper pixel ratio. This is exactly what happened to our responsive websites when the iPhone and iPad began using retina displays.

(Side note: I tried to take a screen shot to show you how this looks, but since Adobe hasn’t updated their apps, the screen grabs come out much larger when opening in photoshop)

So what does this mean for web designers? Well, Designing for Retina Display Macbook Pro will add to production time. The main issue will be graphics and photos. Once browsers update their UI, fonts will look amazing. Just as they do in Safari. But the backgrounds, buttons, banners and gradients all over the web, were created with a certain maximum resolution in mind. As hardware evolves, we as designers must evolve too.

How do we solve this? Well, the same way we serve 2x’s images to retina displays on mobile devices. With CSS media queries.

@media all and (-webkit-min-device-pixel-ratio : 1.5) {     #container header[role="banner"] .logo a {         background-image: url('../img/logo2@2x.png');     } }

The CSS above will serve an image 2x’s larger to all devices using retina displays.

CSS gradients, box-shadow and rounded-corners, which we use today, will also help to ensure our graphics look just as good on Retina Displays.

We are already doing this in our responsive designs for mobile. But now we have to do it all across the board. Obviously this is going to be more time consuming, but it must be done to ensure our graphics look as crisp as possible. Even if it is only for the small amount of retina display users.

It’s going to be at least a couple of years until the entire notebook and desktop market catches up with Apple’s displays. This technology will not be an industry standard for some time. So we will still need to take into consideration devices that do not utilize the Retina quality displays.

CSS is a great solve, for now…But what happens when Apple or another company improves on the Retina display? Are we going to serve three different types of images to different devices??? No, thats just crazy. As time goes on, there needs to be a way for images to adapt to rapid advancing technology.

Enter SVG (Scalable Vector Graphics). “Scalable Vector Graphics (SVG) consist of circles, rectangles, and paths created in XML and combined into drawings on web pages. You can apply solid colors, gradients, and a sophisticated number of filters to SVG—although not all browsers implement all filter types. You can incorporate text, as well as images, and you can copy and clone your SVG as much as you want.” – A List Apart.

By using SVG, we can serve one image to all types of devices and displays. And they will always look crisp. From mobile phones to Smart Tvs and Retina Displays to whatever comes next.

Be prepared, and start practicing saving out two versions of images, for now. You also may want to practice your SVG skills. Because once your client gets their hands on a Retina Display device, you’re going to hear about it.