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)– ionFishJul 19, 2012 at 3:28
Add a comment
|
1 Answer
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: