Recently the retina MacBook Pro was released at WWDC 2012. It has a resolution of 2880 by 1800. This makes websites look really bad if they haven't been optimized for the new high-res display, as noted by Marco Arment. What are some thing I need to do to optimize my website for retina displays?

  • For one, make sure you are drawing the objects on a scale-based system (not pixel-based). It should be the same ratio for small/large browser resolutions. Images... include decent-resolution images. You could get fancy and display versions of the site based on the resolution (it can be detected using JS: pageresource.com/jscript/jscreen.htm) – ionFish Jul 19 '12 at 3:28

You'll need to mix high resolution graphics, css and things like @font-face, obviously if you create a website specifically for retina displays it will create a lot of data to download with larger images etc, but what you can do is using CSS create optimised verstions for retina and non-retina visitors.

There are some great tutorials online including these:

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.