Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 3 down vote favorite

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?

share|improve this question
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

1 Answer

up vote 3 down vote

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:

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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