Interactive

It’s summertime – campers are roasting marshmallows over fire pits across the country, flies are being swatted, some people are waterskiing and who’s thinking about Christmas? Retailers for one. But you should be too.

Modern web technologies (“modern” meaning the last ten years or so) have given us wonderful gifts; one of these has been the separation between the wrapping paper and the present, the visual presentation layer and the structured content underneath. If you looked under the hood at a website ten or twelve years ago, you’d find a lot of things like this:

<p><font face="Arial" color="#990000" size="+1">
Hello there
</font></p>
 

Today, you’ll see something much simpler, just this:

<p>Hello there</p>
 

With an accompanying CSS rule in another file that looks something like this:

p {
	font-family:Arial;
	color:#900;
	font-size:115%;
}
 

HTML was never really intended to control what things looked like, it was intended to structure content, create relationships and hierarchies, in an era when no one had the same operating system, monitor size, colour or anything. A lot of hacks were added to give a little colour, typographic control and overall visual pleasantness. But this confused content with presentation, and made updating a site quite painful. Want to change the colour? 45,000 instances across 360 files. Change the font size? Same.

So something called Cascading Style Sheets, or CSS, were invented to handle all the visual presentation, and stored, for the most part, quite separately from the content. So an HTML file, the content, links to a CSS file which determines what it should look like. This is both incredibly simple in concept and incredibly powerful. One change to a CSS file, and everything in the site gets updated. A classic website, the CSS Zen Garden, started demonstrating this back in ’03 by presenting the exact same HTML files with different CSS files. So only the “wrapping paper” separates http://csszengarden.com/?cssfile=/213/213.css&page=0 and http://www.csszengarden.com/?cssfile=062/062.css (bonus feature: the latter example rendered entirely different on a single web browser [Internet Explorer 6, of course] by devious design).

Why does any of this matter? Why are we talking ancient history?

It matters more than ever now, when, in many ways, you know less and less about your website users. Are they using Internet Explorer 6, 7, 8, 9 or, wait for it, 10? Firefox 3, 4 or 5? Chrome? Safari? Opera? That’s just on the desktop. What about mobile Safari on an iPhone? Or an iPad? Or Android? Which Android? A phone or a tablet? How about RIM’s PlayBook? HP’s TouchPad, released this month?

These are all wrapping papers your present is going to be, well, presented on today. With the right tools, and planning, all of these wrappings can be developed and delivered nicely with a bow. The same structure, the same good content, can work in all these new environments, wherever your visitor is and however they need it. On a phone, you need larger targets and a more vertical arrangement of elements; on a widescreen desktop, you can use the horizontal space to put more items side by side; on a tablet, you have a hybrid.

Which of these is the “real” website? Which one is “normal” or the default anymore? That’s the exact debate going on right now: with smartphone and tablet growth far outstripping desktop and laptop sales, is the smartphone the best baseline? Should we start there, and design outwards? Or do we need to consider everything all at once, together?

You want your website to be a beautiful gift that’s fun to unwrap; now you can have it.