Pete LePage

High DPI: Tips and Tricks

By Pete LePage / On May 22, 2013 / In web development

Tagged ConferencesWeb DesignBestPracticesmobileviewportio13highdpiretina

During the presentation that John Mellor and I did at I/O this year covering building beautiful websites for high DPI displays, we summarized our talk into about 7 key points.

If you follow these seven simple guidelines, you’ll find your site looks great on any high DPI display.

• Setting width=device-width means you only have to care about device independent pixels
• If you don’t set the viewport to width=device-width, or if you use a fixed width, you’re in a world of hurt.
• The devicePixelRatio on high DPI devices can range from 1.3 to 3 and is about more than just phones or tablets, there are laptops too!
• Use vector images wherever possible
• Use @media queries to specify appropriate background images
• Highly compressed 2x images work well in many cases
• For sharp canvas images, beware of webkitBackingStorePixelRatio

You can find the video on YouTube at http://youtu.be/alG-UwRWV_U, and we’ve also posted the slides at http://goo.gl/j5Z5W.