I redesigned karljones.com using responsive web design* principles, with three different layouts based on browser width:
- Desktop: display two columns, main and sidebar
- Tablet: display one column, collapse sidebar below main
- Mobile phone: display one column, hide sidebar
Each of the three sizes also has CSS for different font sizes, the idea being a page that reshapes itself to look good on any given device.
Try it: on a desktop browser, watch the sidebar collapse into the main column, then disappear altogether, as you drag the browser narrower. Better yet, compare a desktop browser and a mobile device browser, see the difference.
This is a start — an improvement on life before media queries — but only an imperfect and temporary solution to a long-standing (and fast-evolving) problem.
The idea of “write once, display anywhere” asks too much of media queries and CSS, much the same way that the Holy Grail asks too much of knights-errant.
What we really desire, of course, is a Brass Head — an “automaton … reputed to be able to answer any question.”
Alas, “reputed” is ever the rub, and answering “any question” exceeds our current technology. “Indistinguishable from magic” will have to wait for another day.
–KJ
* By “responsive web design” (a fashionable term, open to some degree of interpretation) I mean media queries and other CSS rules. See also Wikipedia:
