I’ve been learning about responsive images recently. A good article on the genesis of this is available on Eric Portis’ blog here. I’d ran into the problem many designers have recently run into and it looks like the solutions to it are rather rapidly evolving. Scott Jehl has written on the evolving W3C standards and the polyfill, Picturefill meant to address it.

When design little applications like Up On The Board I’ve often wanted to ask the browser about the pixel density of the user’s monitor. It’s a serious tough problem and while some people still appear to be going at it with user agent detection libraries/databases the standard has become media queries and device-pixel ratio.

Additionally, I really like a CSS3 feature I hadn’t known about, viewport percentage lengths. Each vw is 1% of the initial containing blocks width. So 100vw is the entire width of the parent block. I could see this being very useful for scaling up headers on articles.. This is the way to do it, standalone code here.

TL;DR I played around with the Picturefill polyfill to make responsive thumbnails here.