Your Website Looks Like Garbage On A MacBook Pro Retina Display

July 18, 2012 – 3:37 pm

I ordered a new MacBook Pro with Retina display a few weeks ago. You can read my post Should You Buy a MacBook Pro With Retina Display? Here is Why I Did for more details why.

After a few weeks of using the new laptop, I have to say that so far I’m very pleased. I’ve had several Apple & PC laptops in the past and this one has not failed to impress.

The only real problem? The display is too good. What do I mean? Most websites and apps were not developed for such a high resolution.

Ten essential Retina-enabled OS X apps for the new Macbook Pro
The high-pixel-density Retina display runs at a resolution of 2,880 x 1,800, allowing for four times the number of pixels as the previous model. But most software isn’t built for resolutions that high, so Apple has doubled up the pixels on old apps. On the one hand, that means you can still use those apps, but on the other hand it means that edges are jagged and don’t look great.

At first, the only real apps that supported the crazy high number of pixels were the apps made by Apple.

There’s version of Chrome that supports the high resolution, but you have to switch over to a developer build of Chrome to get it. More information about getting a different version can be found at the Chromium site. At some point in the near future I’m sure the standard version will support Retina, but for now, I switched over to the developer build and taking a risk running a build that hasn’t been fully tested.

Below is a side by side comparison of Safari vs. Chrome (before upgrade to developer build that has better support for Retina):

Click to enlarge

Below is a comparison of the current version of Chrome and the developer build that supports the Retina display.


Click to enlarge

Chrome with Retina Support:

Click to enlarge

There is another article I read that has a good comparison of different browsers: Blurry Text On MacBook Pro With Retina Display

There are several ways to accommodate high resolution displays like the Retina display, but none of them are easy to implement and require the creation of higher resolution images and some CSS or Javascript trickery to accommodate the displays. CSS Image Replacement for High-DPI Retina Display and CSS AND IMAGES FOR RETINA DISPLAYS are a few articles to check out.

So, in summary, the MacBook Pro with Retina display is a great machine. Sure, there have been reports of various problems, which is to be expected, but that’s the risk you take when purchasing new technology products. At $2,199 it’s not cheap, but with flash storage, 7 1/2 hour battery life, crazy fast processors and an amazing display, it is, in my opinion, one of the best high performance laptops on the market.

Now, if software companies could release new versions of their apps that support the display and everyone would update their website to support high resolution displays, life would be great!

  1. 3 Responses to “Your Website Looks Like Garbage On A MacBook Pro Retina Display”

  2. Wonder how many people will bother with this at all, since Macs are still no more than 10% or so of the overall market and the retina ones will likely be less than 1-2% for the next couple years at least.

    By Kyle Rohde on Jul 18, 2012

  3. Kyle – that’s a very valid point to put some context in place.

    For companies that develop apps for the Mac, the change is big, because I’m sure that most of the Mac lineup will move to higher resolution displays in the near future.

    For websites that already follow best practices, such as utilizing text vs. text in images, the changes won’t be as big. In fact, just updating the key templates on a website will make a huge difference.

    The reason I think you’ll see the changes sooner rather than later is that the creative departments are using Retina displays. If it looks like garbage on their computers, they’re going to invest (or convince other executives) to invest the resources to fix it.

    By Dustin Jacobsen on Jul 18, 2012

  4. Good point – in our little advertising world, it’s hard to forget not everybody has an iPhone, iPad and a MB Pro, iMac or G5 tower with dual 32″ monitors.

    By Kyle Rohde on Jul 18, 2012

Post a Comment