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

Adapt.js is a JavaScript library (or framework) that helps you design web sites for mobile devices:

For many developers that means using @media queries to selectively target the device screen size and orientation through CSS.

While the @media approach is a good one, it won’t work for every site. That’s why Nathan Smith, creator of the 960 Grid System, has released Adapt.js, a lightweight JavaScript library (894 bytes minified) that allows you to specify a list of stylesheets and the screen sizes for which they should be loaded. Essentially Adapt.js does the work of @media, but will work in any browser, even those that don’t understand @media.

… While using JavaScript to load CSS might seem a bit strange, even if you use @media queries you’re still going to need some kind of polyfill (usually JavaScript-based) to handle those browsers that don’t know what to do with @media rules.

— Scott Gilbertson @ Webmonkey

Advice from Webmonkey about web design for mobile devices:

CSS 3 media queries make building a mobile version of your site incredibly simple — just add a few lines of CSS to handle the smaller screen size of tablets and phones. The only problem is that not every web browser understands @media queries, and in those that don’t your elegant, responsive design is going to fall apart.

There are several ways around this problem. Since the main culprit when it comes to not understanding @media is Internet Explorer, conditional comments can load an entirely separate stylesheet for older versions of IE. But if you’re starting with a purely vertical layout (for mobile phones) and then applying your floats and positional rules for larger screens — which is the design pattern we recommend — that means you’ll need to handle older versions of other browsers as well.

— Scott Gilbertson @ Webmonkey

Tips for tapping the mobile market:

• Start with a mobile site
• If you do opt for an app, provide the wow factor
• Redirect mobile searchers to the mobile version of your site

See Econsultancy for all twenty-five items and more details