Dovetail Logo

Delivering clean content

I will usually spend some time browsing UX blogs and I follow a number of design agencies that I feel contribute a lot to the UI/UI/WebApp community. They can be very inspiring and ideas for new techniques for enabling the end user can come from anywhere.

While reading the clearleft twitter feed, I notice they launched a new 'Channel 4 News' site, and I took a look at their portfolio page for more information. The portfolio page struck me as really simple, yet clear and the delivery of the content was bang on.

While there is a lot of text in the left column, it is seperated by paragraphs and different styles so the reader is not overwhelmed. This is a great way to deliver text content. By slowly bringing the user into the story. Content starts with a simple title, then quickly explains problem needing to be solved.

The core content is broken down with a bulleted list and a quote from a happy customer.

So all very nice, and it looks good, but what's under the hood? I presently surprised by the html code and how they achieved the quote and citation, as it looks really clean (and pretty).

Rather than the age old solution of using a few divs and slapping some spans in there for good measure, the guys went all semantic up in there!

 <blockquote> <p>The new site has given the whole newsroom at ITN a real lift and helped make the integration into a totally multi-media outlet work so much better.</p> </blockquote>  <p> <cite class="vcard"> <span class="fn">Vicky Taylor</span>, <span class="role">Commissioning Editor News and Current Affairs</span> at <span class="org">Channel 4</span> </cite> </p>  

They have used blockquote and cite to define the elements. So styles could be applied easily, and it also gives meaning to the content. This allows screenreaders (and search engines!) to make sense of the content and give it some context to it's eventual audience.

Even though we at dovetail are technologists, and spend more time editing code than content, it's important to know your audience and build for as many of them as possible.