January 2012
HTML/CSS + media queries (no images, no JS*) this is a simple interactive experiment with responsive design techniques.
Resize your browser to reveal just a handful of the kind of devices you should expect web pages to be viewed on. Each device illustration is rendered using the same basic HTML which adapts its appearance to the changing viewport size, representing different devices accordingly. This is achieved using media queries to apply different CSS rules for different sizes. This experiment is intended to illustrate the basic premise of responsive web design and the power of CSS to tackle it.
This is NOT a guide for the breakpoints for all layouts. Values here were chosen arbitrarily for a discreet set of devices, you should take a flexible approach with logical breakpoints to suit your content and design aesthetics. Put another way: We should not serve specific sites to specific devices based on detection of screen size.
*The only Javascript used is the excellent -prefix-free by Lea Verou and css3-mediaqueries.js by Wouter van der Graaf. Neither script is required to create this demo, but they help keep things tidy, negating the need for multiple vendor prefixes, while keeping the scope of browser support as wide as possible.
Thanks for viewing, James Mellers
This is an interactive illustration which responds to changes in the size of the browser window. If you are viewing on a modern handheld device you can change its orientation (portrait/landscape) to see a basic example of it in action. The illustration should rotate to match the new orientation. For the full experience please view this page with a resizable browser.