Websites That Evolve and Adapt

Responsive web design appears to be the key to unlock the ability to tailor, truncate, or modify content accordingly for the specific limitations of the device that is being used consume it. I first read about this subject through Zeldman.com’s article “Responsive Design is the New Black“.

The article looks at the website for Simon Collison. If you scale your window horizontally while browsing his site, you will notice that extra columns appear and disappear depending upon the width of your screen. This is adaptive, or rather responsive web design, tailoring itself and accommodating a variety of viewing situations. It could be a desktop browser, a mobile device, or an iPad. One set of content, and varying ways of displaying it.

For more on this subject, read the A List Apart article on the subject: “Responsive Web Design“. CSS media queries are the magic behind all of it.

Here’s a short list of website’s I’ve found that are using this new approach:

Test your browser windows’ width to see how the content and layout accommodate your viewing device. Excellent degradation, fallback, and fluid response. I really hope to see more of this in the near future, and to begin exploring with it for my own projects. This has got to be the future. There are only going to be more and more devices, and they’ll all continue to be slightly different. I recommend the adaptive or responsive approach.

Fluid images are used in some of these site, here’s a link I found describing how to use them:
Unstoppable Robot Ninja