Best Practices for Structuring Your Web Content

Ben MacNeill, User Interface Designer

eXtension

Why worry about page structure?

• It’s not just a web page anymore

• Your content is going to be interpreted by a variety of clients, scripts and devices

• You need to wrap up the content in a meaningful way

How do You Structure Web Content?

• Use meaningful markup

• Establish a structural hierarchy

• Remember simple accessibility guidelines

• Don’t worry about appearances

Anatomy of a web page

Content

Structure

Semantic markup

Presentation

Cascading Style Sheets (CSS)

Behavior

Javascript, Animations

Anatomy of a web page

Content

Structure

Semantic markup

Presentation

Cascading Style Sheets (CSS)

Behavior

Javascript, Animations

Assume the design is going to get stripped away

All that’s left for the reader is your writing and markup

Rule of Thumb

Content viewed as a web page

Same Page, No Styles

Side-by-side Comparison

Styled for aweb page

Un-styled(only content + markup)

Semantic Markup

• HTML elements are the building blocks of web documents: <h1>, <p>, <li>, <a>

• These elements have meaning

• Convey meaning to their contents

Looks nice, but what’s under the hood?

Meaningful Meaningless

<h2>What is eXtension?

</h2>

<span class="subhead">What is eXtension?

</span>

Meaningful vs. Meaningless Markup

Meaningful (Semantic)

No Structure,No Meaning

A wiki markup example

== What is eXtension == '''What is eXtension'''

Header element Bold

Good markup is easy

• if it’s a heading, use a heading element <h1> or == ==

• if it’s a list, use a list element <ul><li>item or *item

• if you want to give something emphasis, use <strong> or '''item'''

Avoid misusing markup - definition lists

• Just another kind of HTML list

• wiki markup for a <dl> is a colon :

• looks like you are simply indenting, but actually wrapping it in special list markup

Avoid misusing markup - tables

• Tables should only be used for tabular data. Never for layout.

• Can severely impair readability on mobile devices.

• Interferes with screen readers.

Why separate content and presentation?

• It's not 1999

• All the CSS is in one place.Global design changes are easy.

• Your content is more portable forfeed readers, mobile, printing

• Biggest offenders: <font>, <table> and inline styles <p style="color: red;">

Page Hierarchy

• Create visual order on the page with markup

• Readers don’t read, they scan

• Headlines and subheads are anchors

The F Pattern

source: Jakob Nielsenwww.useit.com/eyetracking/

article/blog product search results

Hierarchy content tips

• Descriptive, meaningful accurate page titles are essential

• First two paragraphs need to contain the most important information

Navigation

• 80%+ of users come from search

• Treat each piece of content as a standalone page

• Don’t add custom nav schemes

• A series? Link to the series summary.

• Related articles? Contextual links in body of the text. (both add Google juice)

Contextual Navigation

If you need navigation

Put it after your content

Otherwise, it will show up at the top of mobile devices, feed readers, search engines, screen readers

Accessibility

• Semantic markup makes your content very accessible.

• Lists and headers are very helpful

• Additional items:

- link text and titles ("click here" is not descriptive)

- image alt texts (searchable by Google)

Portable (extensible)

• You don't know where a reader is going to see your content

• Feed readers

• Mobile devices

• Search results

• Even Printing (old-school)

What you want your reader to see

What your reader wants to see

Feed Readers

Content on Mobile DevicesA web page on a mobile device

The same page optimized for a mobile screen

Search Engine Results

Printing

Readability

• Simple issues to keep in mind

• Don't make paragraphs too long - keep them scannable

• Your page title shows up in search results. Make it descriptive and accurate.

Recap• Semantic markup

• Avoid misusing markup

• Establishing page hierarchy

• Content based links over navigation

• Accessibility

• Markup makes it portable

Big Benefits

• Accessible

• Portable(can be viewed in any format)

• Discoverable(good writing combined with good markup increases Google juice)

I Love Markup

• Please contact me if you have any questions

• Ben MacNeill, NCSUben.macneill@extension.org