Marco.org

Earlier today, I tweeted:

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.

I quickly got a lot of negative responses from people pointing out that Retina MacBook Pros are a small portion of the market, and other platforms are more worthwhile to test for, represented best by Stuart Frisby’s response:

There are still more IE6 users than Retina MBP users. Should I get a dell running Windows ME too?

Or Niranjan’s:

this is like trying to redo the site for IE5! Not enough users. Once it is more than 1%, will consider.

Jeremy Meyers takes it in a slightly different direction:

um no. we should not get to the point where we are designing sites around one unique piece of hardware. please.

Certainly, many other platforms are bigger than the Retina MacBook Pro market today. Here’s the difference:

How much bigger will the IE5 or IE6 market be in a year?

How much bigger will the high-DPI market be in a year?

Even though it’s a small market today (although don’t forget about the iPad 3), 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 OK with it looking like garbage for a few years until you happen to buy high-DPI hardware?

If you don’t frequently see your site on a high-DPI screen, you may not realize quite how bad it looks when any graphical assets show at 1X. This is the first problem you need to address.

You can do that without buying a Retina MacBook Pro, such as by testing on an iPad 3, simulating the iPad 3 with the iOS Simulator from Xcode, or enabling HiDPI mode on a large-screened Mac.¹

If you do any of these alternate methods, you’ll probably be able to figure out which images need 2X versions. That’s a great first step that will get you much of the way there.

But if you can go further, you should. This is what I was talking about when I said that web designers need Retina MacBook Pros:

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. Even an iPad 3 isn’t the same.

It’s like designing iOS apps using only the Simulator without ever testing on a device. No respectable developer would ever ship an app that wasn’t extensively tested on real devices, because on the device, you learn that some of your choices just don’t look right or work well.

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. I’ve noticed that fonts, especially, respond extremely differently on the Retina screen: many of my old, non-Retina choices simply didn’t look good, and many fonts and metrics that were previously poor for screen use can be used nicely on Retina screens.

And I’m not even a web designer by trade — I just accidentally design my sites sometimes out of necessity.

Once you use real high-DPI hardware, you’ll see that there’s a lot more potential for design changes than just doubling your images.