The browser is a hostile development environment and supporting a wide range of desktop browsers can be tough work.

One of the immediate challenges we discovered when we first started the responsive news prototype was the large range of devices that we would have to support. It terrified us. This article is about a solution we use to alleviate this problem.

This is worth looking at.

Unlike most of the solutions I reviewed last summer, Apple is applying the data-hires attribute to the parent container instead of to the images to themselves. Also, the images borrow from native iOS development and have consistent sizes. So the high-res version of ‘ipad_title.png’ can be found at ‘ipad_title_2x.png’.

As far as I can tell, there is no attempt to prevent duplicate downloads of images. New iPad users are going to download both a full desktop size image and a retina version as well.

The price for both images is fairly steep. For example, the iPad hero image on the home page is 110.71K at standard resolution. The retina version is 351.74K. The new iPad will download both for a payload of 462.45K for the hero image alone.

The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded.

Converts navigation to a select dropdown on small screen. We’ve done this before.

Great post from Mark Boulton.

A nice resource for seeing how a site looks at different sizes.

An interesting technique, but I’d love to see it flipped on it’s head to be mobile-first.

A nifty fluid grid that maintains a list of links in equally-sized squares.

An amazingly thorough survey of responsive image techniques. Thank you Jason!

A little background on responsive images and why we need them.

@lukew’s write-up of @scottjehl’s talk from BDConf

An awesome post by Chris Palmieri.

Some of his points are valid, but most only if viewed in light of a very narrow interpretation of responsive web design.

A responsive jQuery slider.

CSS-based table layouts for mobile joy.

If only I could get past non-semantic class names.

A good survey of the work being done out there.

I get singled out for my work on Colly.com and the article I wrote for .net magazine.

Looks like a really smart little library. Nicely done.

Wherein Colly pimps me pimping his site. Responsive layouts FTW!