Responsive Drupal Theming

Recently I read an interesting article by Ethan Marcotte, called responsive web design.
http://www.alistapart.com/articles/responsive-web-design/
In this article Ethan explains why we should design more responsive with all
devices in mind and more flexible websites. His demopage shows the posibilities
of flexible grid and resizing images.

This flexible approach would be even more usefull for Drupal themes.
Just look at the possibilities this approach can have.

How it works

I've created a Drupal prototype, based on the demopage from Ethan.
The prototype uses an external stylesheet and CSS 3 media queries, wrapped
together in a HTML 5 doctype. These techniques are fully supported in your
favorite browsers except for Internet Explorer. There is a Javascript plugin
to make it work in IE.

The query contains two components:

1. a media type (screen), and
2. the actual query enclosed within parentheses, containing a particular
media feature (max-device-width) to inspect, followed by the target value (480px).

Conclusion

Planning your design, building everything around a fluid grid, that is what responsive Drupal theming is all about.

Kristof Orts and Matthias Vandermaesen did a session on on this at Drupalcon Copenhagen.
You can find the slides at slideshare.