How do we handle images in responsive designs?
Establishing Context
0:00 - What do we mean by Responsive Design?
1:20 - What do we mean by Mobile First?
Responsive Technology
3:00 - CSS mechanisms
4:55 - HTML mechanisms
Solutions?
6:55 - Solution requirements
8:28 - Current Solutions
9:30 - HTML only?
10:07 - JS attempts
15:04 - Involving the server
Adaptive Images
20:13 - Adaptive Images
22:27 - How it works
27:23 - Customising (including iPad3)
27:55 - Limitations
36:50 - AI successes and failures
The Future
39:36 - The Future for responsive images
41:43 - HTML Picture Tag - what is it?
44:22 - Problems with Picture
47:09 - Problems with our responsive approach?
This is a run-through of a talk I originally gave at Standards Next a few weeks ago. It's not as smooth as that talk as I'm a few weeks out of practice and pretty tired right now; but hopefully it's useful to you (it's also 10min longer than the real talk was, sorry!).
adaptive-images.com
w3.org/community/respimg/
standards-next.org
NOTE: This talk was based on AI 1.4, the latest version is 1.5 which includes enhanced support for Retina devices.