Responsive Images Recap

Here's another recap on the state of responsive images. This one from the Filament Group, who was involved in the Boston Globe redesign. It discusses their solutions and the problems with them and then the newly suggested picture html element and a call for the need of bandwidth detecting media queries. I'm still concerned about bandwidth detection. I think somehow there should be a setting that lets users decide if they want high res images (when supported) or the faster low res images. If I'm just browsing on a laptop tethered to a phone with 4g and paying for every kilobyte, I may not want to download a large image just because I can. I agree we need better ways to server appropriately sized images, but I don't want to force anything on a user. Although a popup asking them if they want every large image is not practical either… I'm glad this discussion is continuing though!

Embedded Link

The state of responsive images | Feature | .net magazine
Designer/developer Mat “Wilto” Marquis takes a look at the img tag, explains why a largest-size-fits-all approach to images is untenable and discusses different solutions in this ongoing saga

Josh Clark responds to Jakob Nielson's Mobile Stance

Nielson recently stated that he thinks we should keep building a mobile version of a site that is trimmed down and optimized for mobile, and a full version. This contradicts the growing momentum in the industry regarding among other things Responsive Web Design. Josh Clark, another expert in Mobile and Usability, correctly dissects Nielson's stance and explains why he's seeing things backwards in this article at Net Mag.

Embedded Link

Nielsen is wrong on mobile | Opinion | .net magazine
Designer, developer and mobile maven Josh Clark tells us that rather than stripping down, we should be asking how we can do more with the mobile experience

Responsive Images Recap

Thanks to Chris for this high level evaluation of the state of responsive images. THis post lays out descriptions pros and cons of each of the 3 foreseeable options: a new image format, a new syntax/html element or use existing technology.

Embedded Link

On Responsive Images | CSS-Tricks
There are three ways we can go about dealing with responsive s : 1) a new format 2) a new syntax 3) rely on existing hacks.

LukeW | Multi-Device Layout Patterns

Luke has cataloged popular responsive design patterns he’s noticed lately. This writeup is definitely worth a read if your even thinking about responsive web design.


Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we’re not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.

LukeW | Multi-Device Layout Patterns.

TypeButter jQuery plugin for kerning

WIth the craze that Responsive Web Design is stirring up and all the fuss about optimizing the delivery of size appropriate images we're also getting bombarded with high def retina displays and having to worry about image resolutions. But type is scalable and crisp at all resolutions and Zeldman proposes that web type is in a position to top images as the dominant element for aesthetic appeal for a while… Let's pretty our web fonts if they are supposed to be aesthetic, no?

Embedded Link

Web Type Will Save Us (Or, Who’s Afraid of the Big, Bad Retina Display?) – Jeffrey Zeldman Presents The Daily Report
Here we go again. First it was: “OMGZ0RZ, teh mobilez are coming – quick, we need to reduce all image sizes for small-screen layouts!” Now it's. “Mobile devices are cropping up with high-density s…

How I’m skinning my resposive cat // “Talking of Design” : Kev Adamson’s Blog

We need more articles like this that talk about process and how they are applying these new web mantras like ‘Mobile First’ and ‘RWD’ and ‘Design in the Browser’. These mantras lead us to think these techniques are very black and white, but there is a lot more to it than that. Like most everything else on the web: it depends.

design width and breakpoint spectrum

How I’m skinning my resposive cat // “Talking of Design” : Kev Adamson’s Blog.