View
3.192
Download
4
Category
Preview:
DESCRIPTION
We'll introduce the idea of the three parts of the modern web page structure - content, presentation and behavior - and focus on how to improve the structure of the content. We focus on the content structure because everything else will get stripped away as your content moves across the web. When your page is accessed by mobile devices, feeds and search engines all that matters is your writing and the html markup. Make them count.
Citation preview
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
Recommended