Content follows form – or does it?…

Over at OK/Cancel (a very fine comic, by the way) they say that content should follow form, as there’s no use showing a very long piece of text on a mobile phone. I agree – to a certain extent.

I’m not sure that the writer (the estimable Tom Chi) has a full grip on what web standards (CSS

In practice, the CSS step is helpful for dealing with maintenance of web layouts/styles, but truly valuable separation happens in a different place – it happens simply in deciding to store/serve your data using a database instead of hand-coding static content.

But this isn’t the only way to do it. Consider a long piece of text. I’ve shortened it into 4 “paragraphs”. You’ll have to imagine lots more text in each paragraph.

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

So, on a screen (computer monitor, TV, projector screen etc) this would be fine. But on a mobile phone or other small output device, it would be too much to read. In comes CSS, like the Lone Ranger, to sort out all our problems. Add a class to each paragraph:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Then you can use CSS to select which paragraphs to send to each device, like this:

@media screen
{
p.par1, p.par2, p.par3, p.par4
{
display: block;
}
}
@media handheld
{
p.par1
{
display: block;
}
p.par2, p.par3, p.par4
{
display: none;
}
}

More information on media types can be found here. There, problem sorted.

You could go a lot further and use the very powerful child selectors (due to get even better in CSS3) to automatically select the first X number of paragraphs for display to different media. An, of course, a smattering of DOM manipulation could add a link to the full-length article for devices that don’t get all the text by default.

So, while content can follow form, with CSS it doesn’t have to.