io13-logoDuring 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.