Not a member? Why not join us or log in? (No more hassle filling in comments, less obtrusive ads and asides.)

Design Your Content ~ Part 2

Posted by Andrew Faulkner on April 11th, 2007.

Andrew Faulkner is the admin at fadtastic. Andrew prides himself on standards-based, accessible web design in the city of Nottingham, UK. He believes in aesthetically pleasing accessible design and that 'standards compliant does not equal boring.'

http://fadtastic.net/

Andrew Faulkner has posted 208 articles.

RSS Feed for fadtastic.net RSS Feed for Andrew Faulkner

Full Profile →

As promised, Part 2 is here. For those of you who missed it (or for those of you who have a memory like one of those holey metal kitchen gadget things), Part 1 discussed the reasons and philosophies behind designing from the inside out. Part 2 now aims to show you how a few design elements can beautify your content.

Notice: It is worth pointing out that there are hundreds of design weapons out there to really make your content stand out and this article cannot describe them all. Feel free to explore the web and point out some examples by leaving a comment below. I’m a great believer in simplicity and so I’ll be sticking to the basic HTML elements and how they can be used to improve your content. With knowledge of the basic, you’ll soon be able to get creative. Oh, and before you have a go at me, I know fadtastic isn’t perfect and this article doesn’t exactly practice what it preaches.

So, over with the babble and onto the juice. The following four types of content are, in my view, the backbone of a content heavy page like an article.

Header Structure

What is it?

Fairly simple, really. Headers range from H1 through H6 and define the importance of a section of a document. Headers often have a different styling to convey this importance.

Rationale for usage

The simplest things can make content readable. I believe a decent header structure to be essential for an article of over 200 words or so. It not only defines importance to the reader, but it provides a level of ’scanability’ to the article - a quick glance at the headers will often provide the user with an idea of what information on the page is likely to be of use.

Do the papers get it right?

Take a look at these 3 stories from different UK National Papers: One, Two, Three.

All of the newspapers have a title heading (good) but none have any sub-headings. I’m actually quite shocked by this. Some might say that with a newspaper story the reader will read all of it from start to finish anyway. I disagree. This may hold true to some extent with printed newspapers but I think that the newspapers are being ignorant towards their Internet readers. I’d happily bet that introducing sub-headings alone would increase their readership.

Good examples then? See most modern design blogs e.g. ALA.

The Quote

What is it?

The quote is simply extracted or highlighted text, sometimes from an external source. Variations are blockquotes, pull-quote and citations. From wikipedia:

The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.

It can be used to differentiate your content with someone else’s.

Rationale for usage

It is often useful to the reader to view quotes or highlighted excerpts from the article. A quick scan of the excerpts can provide an overall feel for the article and who it relates to within seconds.

Examples

The three stories shown earlier all fail to provide extracts or quotes (at least with any different styling) - again I’m a little shocked. The BBC make good use of various quote styles.

Graphical Information

What is it?

By graphical information, I don’t mean a stock photo that is barely related to the content. That’s often cliché and doesn’t give the reader anything really useful. What I do mean is uses of highly relevant (multi?)media to that content. This could be a photo of the covered news event, a graph (or info-graphic) showing statistical data to the reader or perhaps a video or animation explaining a scientific process.

Rationale for usage

A picture says a thousand words. It’s true, the use of media in this manner can give information to the user that could be nearly impossible to convey by the use of words alone.

A picture or graph can also break up and add interest to the content.

Examples

In the newspaper articles given above, both the Guardian and the Telegraph use photos (and captions) to aid the readers digestion of the article. Ted Goas wrote an article on fadtastic that uses this principle.

Elsewhere

What is it?

Elsewhere is used commonly throughout the blogosphere and should be used on most content pages. I’m really covering two types of content here; related material and external linking.

Related material could simply be a list of related articles within the site. It could also be a list of sites serving up similar content.

External linking would be links from the article to other sources, normally backing up the opinions in a story or offering the reader a different point of view.

Rationale for usage

If the reader has read all or part of the article, it is a safe bet to assume that the article is of some interest to them. If this is the case, why not point them to similar content?

External links are necessary to convince the reader about a point of view, offer an alternative view or maybe just inform them where you got a piece of information from.

Examples

Examples are abundant in the world of blogging. I think that the BBC does a fine job of showing related stories and related links beside the article.

Summary

Use the above. I can safely say that using the above tips will improve your content. As a bonus, I believe using these ideas has made me a better writer. I hope you use them and provide your readers with content that wants to be read.

For those of you expecting CSS examples and typography tips, I apologise. For CSS tips, simply be inspired by all the the sites that do it well. For typography tips, Matt Davies has a great guide to improving your content’s typography.

I’d love to hear your views on the above. If you have any more content tips, don’t hesitate to let us know.

Share This

Make A Comment

( 11 so far )

blockquote and a tags work here.

11 Responses to Design Your Content ~ Part 2

Comments RSS Feed

Great article Andrew. I agree that longer articles should use H-tags to break out the content into smaller sections.

What about lists (unordered and definition)? I’d like to hear some reader thoughts on when to use (and how to style) lists in content. I think lists are easier to read through quickly, as content can often be consolidated and abbreviated while still getting the entire message across.

Ted Goas
April 11th, 2007
#

Superb article! Lots of great tips and information.

However, your comparison with newspaper articles is a contentious one and I’m sure many newspaper editors would disagree with your point about headers.

Layout on the web and layout in the printed press (especially newspapers) are two entirely different sciences. Even the writing style is different.

I agree sub-headings on the web are a good thing. In print, there’s just not enough precious column inches to waste the space!

The three articles you link to are not written for the web, they’re written for print.

Aaron
April 11th, 2007
#

Thanks for the praise.

Ted, thanks for the list suggestion. I agree - a list can be used to present information in bite-size chunks to the reader.

Aaron, I don’t want to dwell too much on the header issue but here’s my view:

I agree that (sub)headers may not be fit for newspaper print, but the sites in the examples were all web versions of national newspapers. I didn’t aim to compare web and print.

The three articles you link to are not written for the web, they’re written for print.

Whether they are written for print or not (I think these are web only stories), surely it would take minimal effort to put headers into the online version? When putting print material onto the web, the material should use the web to its strengths not simply copy the story online. But that’s a different article. ;)

Andrew Faulkner
April 11th, 2007
#

Great points! Doing more with content and typography in order to optimize presentation and readability is something that is very important to me and is all-too-often overlooked.

Regarding your points about quotes, you might want to check out my pull-quote design showcase, which provides some examples of creative pull-quote styling.

Christian Watson
April 11th, 2007
#

Nice wrap-up, even though I think the title “design your content” goes a bit in different direction. I was expecting somthing rather user-oriented not developer-oriented.

In times of css its pretty easy to make anythink look like a header. What you talk about, especially on headers, is more a question of web standards.

I would find it interesting how to “design” your h1-h6 and your p tags and so forth, so that your content becomes more readible.

I for example have trouble scanning through your article because I have the feeling its visually not well structured. You have main-headers which have sub-headers which differ only in font-size, which makes them a bit hard to differentiate. It all looks kind of the same…

wotaewer
April 11th, 2007
#

wotaewer, I understand what you mean. I thought the same thing when reading the first installment of this series. Perhaps this idea of ‘designing’ content could be the topic of another article. Using icons, thumbnails, backgrounds, border, etc. in the content elements instead of just the header/footer/sidebar layout. Designing content can be a great way to keep the reader’s attention, so long as it’s done properly and not over-designed.

Anyone up for it?

Ted Goas
April 12th, 2007
#

Wotaewer, thanks for the feedback. It’s appreciated. I think with Ted’s and your comments taken onboard, I’ll write a Part 3 showing how to visually design the content.

Cheers guys.

Andrew Faulkner
April 12th, 2007
#

great, Andrew; looking forward to it.

@ Ted: constantly working on it and trying hard ;)

wotaewer
April 13th, 2007
#

At our paper, the process that exports print content as XML drops style tags indicating subheads, which consequently present on our site as plain text. It is our practice to manually style these whenever possible, as seeing them as regular text is even more confusing than not having them at all.

We are starting over with a new CMS, but now although our legacy systems are being upgraded to allow subheads to be noted in the XML, the programmers on the web development side are loathe to style tag anything other than headline, byline, caption and text.

This leaves web producers the only option of manually scanning a large quantity of stories daily in order to catch these things. Visually helpful? Absolutely. Workflow efficient? Not really.

Your suggestions are fantastic and I agree with all you have said, but unfortunately are backburnered when handling large loads of content.

Lisa
April 30th, 2007
#

Lisa,

Thanks for the honest insights into some of the issues for news editors. This article wasn’t meant to be a complete criticism of online newspapers in general, more of a suggestion of ideas for those lacking in visual sparkle.

We are starting over with a new CMS, but now although our legacy systems are being upgraded to allow subheads to be noted in the XML, the programmers on the web development side are loathe to style tag anything other than headline, byline, caption and text.

This leaves web producers the only option of manually scanning a large quantity of stories daily in order to catch these things. Visually helpful? Absolutely. Workflow efficient? Not really.

This boils down to technology, I know. I agree that if it takes, let’s say, an hour just to style the headers, it isn’t efficient enough to warrant the effort. And the story will probably not get out onto the web faster than competitors’ stories.

With XML delivering the different aspects of your articles, it surely isn’t a large step to control the style of what it outputs. Unless I’m misunderstanding you, you could develop a set of CSS rules that style every single article automatically as required with minimal effort?

Andrew Faulkner
May 1st, 2007
#

[…] rusetti. Vaikka Andrew Faulknerin / fadtasticin artikkelisarjan Design Your Content (Part 1 | Part 2) jälkimmäinen osa ilmestyi vasta huhtikuussa, on sarja kokonaisuutena maaliskuun […]

am Design » Arkisto » Artikkelikatsaus: Maaliskuu 2007
June 10th, 2007
#

↑ Jump up to the comment form

Related In Some Way, Shape Or Form

The above post has obviously kept you amused. Why not discover similar material:

The posts Design your content ~ Part 1, Content Extraction, Welcome 9rules readers!, Design over content, or is it content over design?, Who To Design For?, are related to this post.

Or why not take time out to find out about the author of the post.