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.