Boston Globe

Responsive Images in a responsive web design?

Wednesday, February 1st, 2012 | Business | No Comments

We’ve been hearing about “responsive web design” and layouts everywhere.  It’s the new “Web 2.0” it seems.

I ran across an article yesterday, Responsive Images: How they Almost Worked and What We Need, by Mat Marquis yesterday.  Mat talks about the various approaches used by the famous Boston Globe website’s responsive design to address the need for multiple sized images.

In a responsive design a single “page” can scale up to a full browser (usually a maximum of 1600px wide) down to a mobile device (128-240px).  It’s a waste to download a 1-2MB image if you only need a tiny 10-20KB image.  On a mobile device there are various types of connection types that limit what a user will wait for.

From the article:

It’s easy enough to style images so that they scale to fit within a parent container by adding img { max-width: 100%; } to one’s stylesheet. To use this effectively, though, the image must be large enough to scale up to whatever size we can reasonably expect on the largest possible display. This can mean a great deal of overhead.

› Continue reading

Tags: , , ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template