Web Standardistas - HTML and CSS Web Standards Solutions


Responsive Design, Responsively Illustrated

Tablet [Detail]

Responsive Design, Responsively Illustrated - an intelligently designed single serving site by James Mellers to interactively showcase responsive design techniques - does, as we say in this country, exactly what it says on the tin.

As Mr Mellers puts it:

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.

Nice work.

1326209220 · Christopher Murphy · Follow Us on Twitter

@standardistas: Follow Web Standardistas on Twitter.