Web design blog

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:

• Responsive web design
• Media queries
• CSS3

“Responsive Web Design indicates that a web site is crafted to use W3C CSS3 media queries with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also flexible images.” [Source: Wikipedia.]

A responsive website is a website that will respond and adapt to the user’s behavior and screen size. The idea is to resize and reorder the design, adapt images, typography, columns, etc., based on screen-browser size, resolution and orientation instead of providing each device a specific website.

— Stéphanie Walter

You should gather and produce content prior to starting the design, says Ben Callahan, and you should consider using a content prototype to organize the content:

A content prototype is an HTML-and-CSS-based fluid-grid prototype, consisting of layout and typography, that consists of the project’s actual content. Its greatest usefulness may be in determining where to apply media queries to make the Web design responsive.

For centuries, we have shaped our layouts and typefaces according to the meaning of the content. This has traditionally been done on fixed-width pages. We have inherited a fixed-width mentality in designing for the Web, when in fact the Web is not fixed-width. Users come to our websites for content. We should strive to present this content in the most appropriate and readable way possible.

— Ben Callahan @ Smashing Magazine