Styled Headings for Authors and Users

How Do Users Read on the Web?

It's a trick question, but the answer's no joke. As a Contribute administrator, you serve your site's authors, who in turn try to serve the site's users. You might not be writing content, but your Dreamweaver templates, style sheets, and administrative settings help determine how users read every word of your content. So it's good to know how users read. And, the fact is, they don't.

Usability expert Jakob Nielsen found that 79% of users were scanning web pages, unsure if a given page was the one they wanted or if another one might be better. They engaged in "information foraging," and only settled down to reading when they thought they'd reached their goal. Obviously, you want to speed them toward that goal, so you should try to ensure that your pages scan well: use straightforward prose, provide lists where possible, and structure content under relevant headings.

But better headings come with a catch. The Contribute Style menu (on the left side of the Edit toolbar) offers an easy way to apply the HTML heading tags h1 through h6 to text. Unfortunately, the default appearance of the HTML heading tags is so clunky that they're nearly unusable. That's why few authors apply them, despite their importance to structure and scanning, and despite their availability on the Contribute toolbar. Instead, I've seen users apply bold, underlining, and color to text, trying to create decent headings from scratch. But there's a much more elegant solution: a style sheet makeover of the h1–h6 tags, which you can automatically apply using the Style menu.

Offer a set of headings worth using, and everyone wins:

Authors are:

• More likely to structure content
• Less likely to manually format headings
• Likely to create headings with consistent appearance

Users can:

• Scan more effectively
• Get much more attractive pages
• Get better results from many search engines

Prerequisites

Before you get stared with style sheets, check out these TechNotes:

• An Overview of Cascading Style Sheets (TechNote 15230)
• How to Create an External Cascading Style Sheet (TechNote 12922)

Default Heading Appearance

Let's take a look at the problem. Here are Heading 1 through Heading 6 (h1–h6) in their default, unstyled state:

It's hard to imagine where these would work well: Heading 1 is enormous, Heading 6 is tiny, and the top and bottom margins are excessive. If you look closely, you'll notice that the size of Heading 1 is equivalent to CSS font-size:x-large. The rest of the headings step down to the equivalent of xx-small.

You'll fix the sizes—and a lot more—by making a series of style assignments. If you haven't already done so, create an external style sheet for your site using the instructions in TechNote 12922. Then, using either the Dreamweaver Code View editor or the CSS Styles panel, try the following modifications. For the sake of simplicity, I'll show the style definitions as Code View edits.

A Suite of Styled Headings

Six discrete sizes are too many for most site designs. I've found it better to reassign headings to three sizes—two apiece—and tweak other aspects of their appearance to keep the levels distinct. But first, let's correct a few things across the board, by assigning a sans-serif font and reducing margins for all headings at once:

h1,h2,h3,h4,h5,h6{
   font-family:sans-serif;
   margin-top:1em;
   margin-bottom:.5ex;}

Next, distinguish each heading level, while keeping a consistent look across the set.

h1{
   background-color:#eee;
   
   padding:0 .5ex;
   border-top:1px solid #999;
   border-left:1px solid #999;
   margin-left:-.5ex;}

h1 is beefed up with a background tint and a border on the top and left. Because headings are block elements, not inline, the background color and top border fill the width of the content region. Notice that there's no need to specify font-weight:bold, since headings are always bold by default. You've added left and right padding for legibility's sake, but compensated for it with a negative left margin. The result is a slightly hanging indent, which keeps the heading text lined up with the body text that follows.

h2{
   
   padding:0 .5ex;
   border-top:1px solid #ccc;
   border-left:1px solid #ccc;
   margin-left:-.5ex;}

h2 is much the same as h1, minus the background color and with a slightly lighter border.

h3{
   
   border-top:1px solid #ccc;}

This time you've dropped h3 to a smaller size and a border on the top. Without a border on the left, there's no need for the padding and negative margin trick.

h4{
   
   border-top:1px dotted #ccc;}

For h4, you've weakened the border a bit more, by using dots instead of a solid line.

h5{
   font-size:x-small;}

h5 steps down in size and doesn't use borders.

h6{
   color:#666;
   font-size:x-small;}

With h6, you do a final fade to gray.

Creative Possibilities

The headings shown above are merely examples, meant to point out a few possibilities. Presumably, you've already got a nice site design, with carefully coordinated images, fonts, colors, and borders. Your new, improved headings should harmonize with the rest, but it's up to you to decide the approach. Here are few more ideas to work with.

Border Lines

You can get good mileage out of simple, clean border treatments, going from double to single lines and to dotted styles, with or without the use of color:

h1{
   color:#063;
   
   font-variant:small-caps;
   letter-spacing:.1ex;
   border-top:3px double #396;
   border-bottom:1px solid #396;}

Notice the use of small caps and additional letter spacing, to improve text legibility.

Floating Tiles

h1{
   background-color:#eef;
   
   padding:0 .5ex 1px .5ex;
   border-top:1px solid #ccc;
   border-left:1px solid #ccc;
   border-right:2px solid #999;
   border-bottom:2px solid #999;}

h2{
   background-color:#dde;
   
   padding:0 .5ex 1px .5ex;
   border-top:1px solid #ccc;
   border-left:1px solid #ccc;
   border-right:2px solid #999;
   border-bottom:2px solid #999;
   margin:1ex .5ex .5ex 0;
   float:left;}

A subtle shift in border width and color has turned these headings into tiles. The float attribute, applied to the h2 heading, lets it ride alongside its content.

Background Gradients

h1{
   background-color:#eed;
   
   border-top:2px solid #ddc;
   filter:progid:dximagetransform.microsoft.gradient
      (gradienttype=1,startcolorstr='#ffffffff',endcolorstr='#ffeeeedd');
   width:100%;}

Gradients are created by an Internet Explorer filter, which takes a direction, start color, and stop color as values. A gradienttype of 1 specifies left-to-right blending; a value of 0 means top-to-bottom. The meanings of startcolorstr and endcolorstr are clear enough, but the octet values might seem odd. The first pair of values (ff) define opacity, which can progress along with the colors.

One quirk of Microsoft's gradient filter is its need for an explicit width. You can provide a value of 100%, since headings are normally full-width anyway. Because gradients are proprietary Microsoft filters, we need to accommodate Mozilla/Netscape with a backup background of #eed.

References

• Jakob Nielsen: How Users Read on the Web
• Jakob Nielsen: Why Web Users Scan Instead of Read
• Jakob Nielsen: Writing for the Web
• usability.gov: Use Well-Designed Headings
• Human Factors International: Use HTML Markup Correctly
• MSDN Library: Gradient Filters

About the author