My friend Viktor at We Made You Look pointed me to this article at Cloud Four on Responsive IMGs. The article makes a case for what is the problem with IMG tags when doing responsive web design. What you want in a truly responsive web design when it comes to images, is to only load images of the size needed for the viewing display. Using IMG tags one can set the src attribute to the smallest possible image, and then through scripting change the src attribute to what ever is appropriate once the display size is known. For small screens this works well, however for bigger devices this slows the loading down as it has to do two requests (and loads) for each image (unless the script manages to change the src before the browser starts fetching the image). There are of course other techniques for responsive images, by for instance using CSS and media queries, but the article deals with the problems with the IMG tag specifically not other techniques. I prefer using media queries which to me makes most sense from a technology standpoint, but I agree it is far from ideal. However it is what is available now, and should therefore be used!
He goes on to start a discussion about what would be appropriate to future proof the IMG tag – i.e. what is needed in order to make sure responsive web designs also work for devices, screen sizes, and resolutions, that we do not know of yet. He makes his own list of what he believe is needed and encourage readers to add to it.
Cloud Four is an excellent blog on web and mobile development and design, and is definitely worth a visit!
Here’s an awesome article on how The Boston Globe implemented their HTML5 web page botonglobe.com using responsive design. For those who do not know responsive design, it is basically a way to create and design a web page to respond or adapt to the resolution of the web browser viewing it. It does not only take into consideration of rescaling images or text elements, but rather restructures the layout to best fit the screen. In the article they describe the technical challenges they went through: implementing Media Queries for outdated browsers; fast Responsive Images; how to sandbox third party ads to not mess with the page, etc. I am also very happy to read that they do no User-Agent detection, but rather do feature detection which is often advocated for HTML5 development, and that I do. The benefits of that is nicely explained in the quote
It is clear that we did not plan under any circumstances for anybody to be opening it on a GameBoy, but, when somebody did recently, it worked great on a GameBoy.
It’s really nice seeing big projects starting to come out using HTML5 and responsive design. It definitely shows how it is unnecessary to write native apps for several platforms to get a great user experience.
Stumbled upon this through Small Surfaces. A bunch of videos from Device Design Day, in San Francisco. You can find all videos here, but especially liked the one below by Dan Saffer. I liked it mostly for its brevity, because he is not the best speaker. But it’s only 9 minutes long, and captures the way I perceive the way we think at Mobile Life. He says basically that we are part of the world, and by designing we change the world and therefore us. (Very very simplified, that I could go into length with.)