Retinafy Your Sites

Retinafy Your Sites

Thomas Fuchs has released a new e-book about setting up your websites to handle variable DPI sites. You probably know Thomas as the creator of Scriptaculous as well as part of the Slash7 team (with Amy Hoy) that teaches the JavaScript master class and also run the great productivity web apps of Let’s Freckle and Charm Desk.

For those of us who may be new to dealing with media queries or responsive web design techniques, this book may be a bit of a jump. If that sounds like you, I recommend you start off your adventure (after reading our book, of course) with Responsive Web Design by Ethan Marcotte.

The book covers the background of what “retina”, or more accurately “high DPI”, screens are how to target them. It reviews bitmapped images, vector graphics, file size optimization, icons, image optimization, and troubleshooting.

Thomas is speaking from experience here. He’s already built retina-ready versions of the Slash7 “Every Time Zone” tool site using SVG, Canvas, and other tips, and their CharmDesk web app is also running with retina assets.

These techniques are relatively cutting edge, so if you need to support older MSIE versions, you may need to consider applying a Mobile First approach. This will result in browsers that do not support media queries showing the simplest version of the site. You can then used media queries to target higher dpi screens and serve unique assets.

Good luck retinafying!