Tom Chi  

Content Follows Form

December 17th, 2005 by Tom Chi :: see related comic

So now that most of the design world has finally gotten their form and content separated, it’s time to understand what has been accomplished. The idea was that the separation made maintenance easy and more importantly, it made it possible for web content to be poured effortlessly into any form on any device.

In reality, not only has this not happened, it’s also a bad idea. Why? Simply because the form of the display device necessarily defines what types of content are appropriate to view. Anyone who has designed for a mobile device or a television screen knows that most web content does not translate well into their experience. When was the last you saw someone reading a multi-page blog post on their cell phone?

The helpful way to approach the design is to consider the fundamental attributes of the device that will be used, and then make sure that the content works. For a mobile device, ideal content is concise enough to fit on a very small screen, is contextually useful to being out and about, and can be acted upon using limited time/attention. For television, content should not require a lot of reading, and if interaction is required, it should be amenable to what a remote control offers.

This all seems pretty straightforward. Yet there are still many designers who feel that once they’ve used CSS techniques to separate form and content, they are ready to rock and roll on any device. 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. If your content is dynamically served, then you have all you need to pick and choose what bits of your content can be successfully translated and consumed in other devices. If your content is static and hand-coded, then regardless of whether you’ve done your CSS homework, you’re going to have an uphill battle altering that data to meet the requirements of other devices.

5 Responses to “Content Follows Form”
White Rabbit wrote:

Amen to that. I am tired of people trying to make everything universal. It simply isn’t practical and you don’t get to take real advantage of the platform(s) your users will actually be using.

Know thy environment.

Stu wrote:

I like the 800x600 restriction on web pages.

Columns of text shouldn’t be much wider than 30ems so you can read it quickly. It’s also about the width of a piece of 8.5 x 11/A4 paper. I for one have read a lot of information from those dimensions, so we might as well use familar sizes.

Gabe da Silveira wrote:

I’m glad we’ve reached the point where we can have this kind of discussion.

Think back 10 or 15 years. Even the promise of universal distribution of a single version of content is _huge_. But there is such a thing as lowest common denominator. Even worse, mobile browsers are so fragmented that true design is a near impossibility. In general I see a lot of promise in this area, but there are still tons of compromises to be made.

If your content is truly must-have, then its worth making it as accessible as possible. On the other hand, maybe visual branding is more critical, or robust functionality, not to mention budget constraints. The way the mobile market is right now in the US makes me inclined to wait it out and see what standards shake out before making any big moves.

White Rabbit wrote:

Maybe it’s more like this:

Make your CONTENT and DATA universal. Your INTERFACE doesn’t need to be.

Phil Wilson wrote:

The BBC write content once and then distribute it to the web, mobile and Teletext in different ways, presenting different sections and amounts of it where relevant.


Leave a Reply


OK/Cancel is a comic strip collaboration co-written and co-illustrated by Kevin Cheng and Tom Chi. Our subject matter focuses on interfaces, good and bad and the people behind the industry of building interfaces - usability specialists, interaction designers, human-computer interaction (HCI) experts, industrial designers, etc. (Who Links Here) ?