On Responsive Images
The new iPad launch caused a flurry of activity as web developers are trying to get to get grips with the Retina display.
- Responsive Images: How they Almost Worked and What We Need
- From A List Apart, well worth reading as always. The article was written by a developer on the groundbreaking Boston Globe responsive redesign team.
- Pragmatic responsive design
A very good slideshow from Stephanie Rieger. She suggests using a small number of stylesheets and media queries targeting max-device-width (rather than device-pixel-ratio). then having in-line media queries in individual stylesheet like
Because Android hi-DPI devices return window.devicePixelRatio > 1, to correctly detect Retina make sure the value is >= 2. Also worth using email@example.com naming convention because it is the standard used in native iOS development.
- “retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays”
- How Apple.com will serve retina images to new iPads
- Cloud four analyses the approach Apple themselves take on their website. “Screw the bandwidth” seems to be their approach.
- Responsive IMGs — Part 1
- From the same site, some thoughts and techniques.
- Image-y nation
- Jeremy Keith uses a technique similar to the ancient lowsrc. I like this approach. Here’s the script
- W3C Responsive Images Community Group
- an attempt to bring some sanity to the matter.