Designing content out

Way back in 1997, typographer David Siegel changed the web as we knew it when he wrote about a new technique for page layouts on the web. Somewhere in the dim light of a laboratory, an HTML table was stitched together with a spacer GIF and then flooded with electricity. David gave life to using HTML tables for layout.

Designers now had a way to reproduce traditional print media’s layout conventions on the web. They cared little—if they knew at all—that Dave Raggett, who invented the table, had initially intended his creation to show tabular data. While designers partied like it was 1997, David Siegel recognised he’d created a monster and not long after wrote:

Some people say I’ve ruined the web, and to them it’s true. […] I ruined the web by mixing chocolate and peanut butter so they could never become unmixed. I committed the hangable offence of mixing structure with presentation.

David Siegel, The web Is Ruined, and I Ruined It

David’s monster spawned several killer sequels and millions of websites, all of which mixed content, structure, and presentation. It also reinforced the idea that content and structure should be based on a visual layout. This has stayed in the minds of designers ever since, much to the detriment of accessibility, flexibility, and semantics.

NB: Due to copyright and technical issues, I’ve redesigned the examples in Transcending CSS Revisited. While the examples have been updated, I’ve retained the 2006 style designs. The layouts and code to implement them have been retained.

Whereas table-based layouts impose their structure on content to achieve a design, today, we understand that it’s preferable to make content independent from the presentation. The content order of a table-based design may make sense to people who can see it, but take away the layout and the order can make the content incomprehensible. Many people—including Siegel—soon advocated against using tables for layout, but in the absence of a viable alternative, his monster was free to roam. Fortunately, CSS can now hunt down and destroy the beast.

Content-out approach

View source on many CSS layouts, and you’ll still find presentational HTML where pages have been developed top-to-bottom, left-to-right. The HTML Working Group at the W3C intended the division element would be used to group related content, but today developers use them in much the same way as tables.

Replacing tables with divisions doesn’t make the most of CSS, and unless we consider the semantics of every division, they’re no better than tables. Instead, start by using only structural elements such as headers, paragraphs, lists, and quotations. Then, work out in circles, like an onion skin, adding divisions to bring together related content.

Non-optimised CSS layout

Consider the content order of an average page. This example includes branding, two sets of navigation links, two related content areas, and one containing site-related information.

Disable stylesheets on many websites which have this structure and you’ll see the content order runs something like this:

<div id="branding">Top-level heading</div>
<div id="nav_main">Main navigation</div>
<div id="content_sub">Secondary content (left)</div>
<div id="content_main">Main content (right)</div>
<div id="nav_sub">Secondary navigation</div>
<div id="site_info">Legal and copyright information</div>

That content order is essentially the same as in a table-based layout because a developer has simply replaced tables with divisions. There are plenty of improvements to make and The Web Content Accessibility Guideline 1.0 specification tells what to do:

(6.1) Organise documents so they may be read without stylesheets. For example, when an HTML document is rendered without associated stylesheets, it must still be possible to read the document. [Priority 1]. When content is organised logically, it will be rendered in a meaningful order when stylesheets are turned off or not supported.

WCAG 1.0 specification

Navigation order is also an accessibility issue. The two navigation areas in the previous example are related, but they’ve been kept apart. One’s near the top of the HTML, the others near the bottom. Sharing a common parent but having individual identities will add semantic meaning to both lists:

<div id="nav">

<ul id="nav_main">
<li>Main navigation</li>
</ul>

<ul id="nav_sub">
<li>Secondary navigation</li>
</ul>

</div>

Both lists could be written near the beginning or end of a document and CSS can then placed wherever they’re needed using CSS.

You could write the two related content areas in the order they appear onscreen and not the order which makes sense without styles. But that wouldn’t help people who use assistive technologies, including screen readers. You should always order content, so it makes sense without styles.

You should also notice that in this example, the branding area contains a top-level heading which is separate from the content which follows:

<h1>Top-level heading</h1>

Switching the order to place this heading before the content restores the relationship between them:

<h1>Top-level heading</h1>

<div>Main content</div>

<div>Secondary content</div>

This order will benefit people who use assistive technologies and therefore cannot see the layout:

<h1>Top-level heading</h1>

<div id="content_main">…</div>
<div id="content_sub">…</div>

<div id="nav">
<ul id="nav_main">…</ul>
<ul id="nav_sub">…</ul>
</div>

<div id="site_info">…</div>

It’s time to let presentational HTML sleep the long sleep. CSS provides more opportunities for layout than was possible using tables. With CSS we’re free to change a layout without altering the content order and when stylesheets are removed, what remains is accessible, well-structured content.

CSS Naked Day

The idea of a world (wide web) without style might seem odd, but designers have increasingly been considering how their websites would work in such a world. To encourage designers to focus on the “naked” structure of their pages, Dustin Diaz proposed removing stylesheets (Wayback Machine URL) from websites for one day.

CSS Naked Day illustrated the need for designers to structure content logically before starting work implementing a design. Dustin showed that without layout, the meaning of naked content becomes apparent. He aimed to highlight the importance of semantic HTML, but CSS Naked Day also confused a good many people, who thought their browsers must be broken because only default browser stylesheets were visible.

HTML Quiz Show

Writing semantic HTML is easier when you start with content instead of the layout. Rather than ask “What elements do I need to accomplish this design?” ask instead “What is this content?” “What does it mean?”

Before you think about the language of HTML, think about the language you speak and how you would explain the content to someone. Then translate what you’ve said into HTML.

Imagine you’re on a TV quiz show called The HTML Is Right. You’re nervous, but the quizmaster starts with an easy question which helps make you comfortable.

1. Quizmaster: “What’s this?”
2. You: “It’s a top-level heading.”

Translates this into HTML and you have the highest level heading on a page:

<h1>BritPack and destinations</h1>

The HTML Is Right is a teatime quiz where questions start easy and don’t get a whole lot harder. Let’s play on.

1. Quizmaster: “What’s this?”
2. You: “A list of names, in no particular order, and each name’s a link.”

This translates into HTML as an “unordered list of names where each one is an link. It looks like this:

<ul>
<li><a href="https://rachelandrew.co.uk">Rachel Andrew</a>
<li><a href="https://hicksdesign.co.uk">Jon Hicks</a>
<li><a href="https://boagworld.com">Paul Boag</a>
</ul>

You’re feeling confident, not even sweating under the lights, the prize is already in sight.

1. Quizmaster: “For the final question in this round is, what’s this?”
2. You: “A quotation from Patrick Griffiths’s website.”

Translated into HTML and you have a blockquote element:

<blockquote>
<p>If you’ve two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.</p>
<cite><a href="http://htmldog.com">Patrick Griffiths</a></cite>
</blockquote>

At this stage in the quiz, what content “looks like” isn’t important because what matters is its meaning. Even in a basic text browser, the meaning of the content will be clear. After a short break for adverts, you’re back in the hot seat, and the host is aching to get you sweating in the pictures round.

Number 1: Par for the Horse

Quizmaster: “I’m going to show you three pictures. I want you to describe each one and translate its description into HTML. Here’s the first picture.”

You: “It’s a picture of several jockeys on horses, each wearing different coloured jerseys. The picture has a title, Par for the Horse. Translate that into HTML, and you have this.”

<h1>Par for the Horse</h1>

<ul>
<li>Red</li>
<li>Pink</li>
<li>Blue</li>
</ul>

For a bonus point you add, “If I wanted to link a horse name to its owner’s web site, I could add an anchor around the colour. Because those linked words don’t properly describe the destination, I should also add title attributes.”

<a href="https://stuffandnonsense.co.uk" title="Andy’s website">Red</a>

Number 2: Marathon

You: “It’s a race and there is an implicit order to the runners. I’d also like to list a runners’ name and entrance number, plus links to their profile:”

<ol>
<li>2312 <a href="https://rachelandrew.co.uk">Rachel Andrew</a>
<li>0605 <a href="https://allinthehead.com">Drew McLellan</a>
<li>1992 <a href="https://smashingmagazine.com">Vitaly Freeman</a>
</ol>

Number 3: A taxi queue

You: “This one is a little trickier because there’s more detail in the content. The taxi number, its driver’s name, plus a number plate and its position in the queue. This information is ideally suited to a table because it’s tabular data. I’ll use table headers to give the content more structure, use a table row for each taxi, and add a caption to the table which describes its contents.”

<table>

<tr>
<th>Taxi number</th>
<th>Driver</th>
<th>Number plate</th>
<th>Position in queue</th>
</tr>

<tr>
<td>1234</td>
<td>Dan Davies</td>
<td>DD1234</td>
<td>1</td>
</tr>

<tr>
<td>5678</td>
<td>Dylan Jones</td>
<td>DJ5678</td>
<td>2</td>
</tr>

</table>

I wish someone gave prizes for semantic HTML, but when you write it, your customers will be the biggest winners. Even if you go home with just a cuddly toy or a toasted sandwich maker, follow my content-out approach and your HTML will be lighter, more meaningful, and accessible.

What does content say?

If you’re a developer who receives static visuals to work from, designers can help you choose the most appropriate HTML elements to describe their content. Designers can add notes to a visual, perhaps on a separate layer. Meaningful descriptions might include:

• This list has no order
• An ordered list of top-selling items
• A top-level heading
• A quotation from a happy customer

Mark up your surroundings

By now, you’ve learned that the modern web requires us to think differently about how we write HTML. I’ve shown you the importance of starting with “Marking up the world.”

Earlier, I taught you about the importance of semantic HTML as the basis for implementing designs. You also learned that in the past, visual presentation dictated elements and the order in which they appeared. Now it’s time to put those lessons into practice through a series of exercises. You’ll look at several pictures and describe their content, then write HTML which describes them, starting with lists.

When you strip away stylesheets from most standards-based websites, you’ll find an abundance of definition, ordered, and unordered lists. Standards-savvy designers put lists to many different uses, including tabbed-style navigation and even product listings in online stores. Some designers also stretch list semantics and use them for placing form inputs and labels.

Lists are all around us in the real world. Sure, you’ve to-do lists and shopping lists, but look at these nine examples. A list is appropriate for many of these, and the type of list most appropriate will depend on the content each contains.

Are the books below in any order? They may have been placed on the shelf at random after pulling them from a dusty box. If that happened, an unordered list would be most appropriate. However, it’s possible their owner placed them in the order they were published or the volume number. When this is true, the ordering suggests an ordered list is most appropriate:

<ol>
<li>Scorpion’s Nest</li>
<li>Canisbay Conspiracy</li>
<li>Murder of a Student</li>
</ol>

In this next example, it’s unlikely these motorcycles were parked in colour order or by the year of manufacture. Most likely, their riders parked them in the next available space. Use an unordered list because they were parked in no specific order:

<ul>
<li>Green</li>
<li>Purple</li>
<li>Red</li>
<li>Blue</li>
</ul>

If you find history’s fascinating, the next example shows three medieval helmets. Perhaps you need to convey their ages and list them in chronological order. Many times, you’ll want to communicate more detailed information about a list of items. For each helmet, I might want to include its name and a short description.

Although definition lists should mark up definition terms and descriptions, some designers stretch their semantics to join different types of name/value pairs. In this example, I”d describe the name of a helmet using a definition term, and its description using a definition data element. This combination of terms and definitions has extended the usefulness of the definition list beyond its original purpose:

<dl>

<dt>Bassinet Helmet</dt>
<dd>To protect the neck against sword strokes a chainmail “net” is added to the back portion of the helmet.</dd>

<dt>Medieval Helmet</dt>
<dd>It had a comb like the Morion but gave better protection by the hinged cheek pieces.</dd>

</dl>

Look at the remaining examples and consider the content you want to convey in each of them. You’ll find lists are appropriate in every instance. Sadly, with only forty HTML elements available and only three types of lists, sometimes you’ll need to combine lists with other elements to give them more precise meaning.

“If I have two beans”

Use lists in combination with other elements to create HTML compounds which provide meaning which is more specific than a single element. What’s an HTML compound? To learn more about them, download The Elements of Meaningful XHTML.

I’ll use the example of a conversation between two of my favourite comedy characters, Captain Blackadder and Private Baldrick from Blackadder Goes Forth. With no conversation element in HTML, what elements should I choose to mark up this famous conversation? Headings and paragraphs aren’t precise enough to describe a conversation. You might be tempted to use a definition list, but conversion isn’t strictly a list of terms or definitions. What’s needed is a combination of elements which form a compound to describe the conversation.

What are conversations? No matter what’s said or by whom, in a conversation, people speak over a period of time. In HTML, we already have the blockquote element which can describe what someone says:

<blockquote>
<p>The British Empire at present covers a quarter of the globe, 
while the German Empire consists of a small sausage factory in Tanganyika.</p>
</blockquote>

The cite element describes the name of a person being quoted:

<cite>Captain Edmund Blackadder</cite>

What’s missing now is an element which groups the person who is speaking and what they said, in the order which the conversation took place. From the speakers and quotations at the centre, I’ll work out, wrapping blockquotes inside an element which adds order. Cunningly, that element is an ordered list:

<ol>

<li>
<cite>Blackadder</cite>
<blockquote>
<p>If I have two beans and then I add two more beans, what do I have?</p>
</blockquote>
</li>

<li>
<cite>Baldrick</cite>
<blockquote>
<p>Some beans</p>
</blockquote>
</li>

<li>
<cite>Blackadder</cite>
<blockquote>
<p>es and no. Let’s try again shall we? I have two beans, then I add two more
beans. What does that make?</p>
</blockquote>
</li>

<li>
<cite>Baldrick</cite>
<blockquote>
<p>A very small casserole.</p>
</blockquote>
</li>

<li>
<cite>Blackadder</cite>
<blockquote>
<p>Yes. To you Baldrick, the Renaissance was just something that happened to other people, wasn’t it?</p>
</blockquote>
</li>

</ol>

Combining semantic elements to form HTML compounds is an ideal way to extend the meaning of your content.

hCard from San Francisco

Look closely at this photograph of San Francisco. Like the city itself, there’s a lot is going on here. You can see a lot of streets with a lot of buildings which contain a lot of businesses. How would you mark up a city like this? “With more HTML than there’s room for in this book” would be one answer, but not the one I’m hoping for. A correct answer would be “It depends.” Specifically, it depends on the information you want to convey. Like all towns and cities, San Francisco has streets, and those streets have numbered buildings. If you”re listing the buildings in a street, an ordered list is the most appropriate element:

<ol>
<li>1345 Market St, San Francisco, 94103, California</li>
<li>1355 Market St, San Francisco, 94103, California</li>
<li>1365 Market St, San Francisco, 94103, California</li>
</ol>

What if you’re imarking up the address of a specific building? Your first thought might be the closest address element, but despite its name, there’s no element in HTML to describe a physical address and no elements can accurately describe a street, postal code, or state. Earlier, I introduced you to microformats and how their class attribute values add precise meaning. Use the hCard microformat and wrap each line of an address in a span element:

<span class="street-address">1355 Market St</span>
<span class="locality">San Francisco</span>
<span class="postal-code">94103</span>
<span class="region">California</span>

In place of an address element, you should add context for these elements by wrapping them in another span with a class attribute value of adr:

<span class="adr">
<span class="street-address">1355 Market St</span>
<span class="locality">San Francisco</span>
<span class="postal-code">94103</span>
<span class="region">California</span>
</span>

Finally, add a class attribute value of vcard to the list item around each address to allow software to parse the compound.

<li class="vcard">
<span class="adr">
<span class="street-address">1355 Market St</span>
<span class="locality">San Francisco</span>
<span class="postal-code">94103</span>
<span class="region">California</span>
</span>
</li>

Keep your eyes wide open

Looking around and understanding the semantics in everything is an interesting—if a little nerdy—way to pass the time on your daily commute. Wherever you go, look for semantics from the following:

• Advertising billboards and hoardings
• Shop window displays
• Signage

You’d be surprised how much nutritional and semantic information there is on your box of morning cereal. Pretty soon, you’ll see semantic HTML appear before your eyes everywhere you look. But, if you start hearing voices, contact your doctor.

Work from the contents

I often flick through the pages of a magazine or newspaper wondering what HTML elements would be most appropriate and how I’d implement its design using CSS. Magazine contents pages are among my favourites as their design can be as varied and the content they list.

You might first think about dividing this page into two columns, using two divisions—one for the left column, the other on the right for images. Visual thinking like this results in presentational HTML, so instead work from the content out, and the result will be semantic HTML.

There are different techniques which can help with visualising HTML in magazines and newspaper. One of my favourite methods is to write notes on a cutting or in my scrapbook. Scribble notes about the semantics of the content you see and soon deciding on the most appropriate elements will become second nature. In this example, several elements spring to mind:

What’s first? A top-level heading for the word Contents because it’s the highest level headline on the page.

Now, a second-level heading for Latest articles.

Then, enclosed by a division element is a lower-level heading, a paragraph, and a picture.

The two lists of articles and images on the right require more abstract thinking. But you may be surprised at how simple the solutions to this type of problem can be when you start with content. Each list includes the page title plus a summary. Headings describe those titles and paragraphs describes the summaries:

<h3>Great Cheese and Fruit Pairings</h3>

<p>Are you preparing for hosting a party? A Cheeseboard should definitely be on your list when you expect company, especially when you have drinks as well.</p>

Because these pages are listed in the order they appear in the magazine; an ordered list will add meaning to these lists:

<ol>

<li>
<h3>Cheese Pairing Guide 2019.</h3>
<p>You don’t have to be a professional ‘sommelier’ or ‘fromager’ to know that cheese and wine go together. That’s why we’ve compiled our ultimate guide.</p>
</li>

<li>
<h3>Cheese for a Grilled Cheese Sandwich.</h3>
<p>A classic grilled cheese sandwich has always been a favourite among kids and adults. This easy to create dish can be healthy and nourishing.</p>
</li>

<li>
<h3>Popular Cheese to Have During Summer</h3>
<p>Summer is finally around the corner! It is officially time to take out your summer dresses and shorts and bring out the chilled beer.</p>
</li>

</ol>

You’ll also need links inside those headings. After all, you can’t have a website without at least one link, can you?

<li>
<h3><a href="/">Cheese Pairing Guide 2019.</a></h3>
<p>You don’t have to be a professional ‘sommelier’ or ‘fromager’ to know that cheese and wine go together. That’s why we’ve compiled our ultimate guide.</p>
</li>

At this point, you may be wondering about the images and where they’ll appear in the flow of this document? Remember when I said those pictures would require a little abstract thinking? Look again at the pictures, and you’ll see their purpose is to highlight important articles. That purpose is no different from any of the other links you so meaningfully placed inside an ordered list.

Identify those important articles and add extra emphasis. Start by giving a list item an identity derived from the page number. Because HTML doesn’t allow an id attribute to begin with a numeral, prefix these attributes with a letter, for example p- (for page):

<li id="p-5">
<h3>5 Benefits of eating cheese</h3>
<p>Who doesn’t love a decadent pizza?</p>
</li>

To emphasise these featured articles, add an emphasis element around each page number:

<li id="p-5">
<h3><em>5</em> Benefits of eating cheese</h3>
<p>Who doesn’t love a decadent pizza?</p>
</li>

Use these identity attributes and emphasis elements to style these featured articles in a different way to other articles on the page.

Complete the HTML

Your semantic HTML has developed a well-structured flow of “contents” which is waiting to be styled. Now, take a look at the finished HTML and see if you can spot the relationships between HTML elements and the design as it will look when styled.

Transcendance

Having learned how to look for meaning in unusual places, add semantics to HTML using compounds and microformats, and how to separate content from presentation, in the following chapters, you’ll take a fresh look at your design process. I’ll show you new ways to work with wireframes and take you step-by-step through the process of turning a design into a prototype using semantic HTML and CSS.