Fox River Ad Club
October 16, 2007

Easy choices

or

or

Hard choices

or

or

or

Knowing helps you:
3. Compare bids from vendors
4. Ensure clients get what they need
5. Avoid that glazed-over look when
websites are discussed in meetings

Well-constructed Websites
3. Code Quality
4. Search Engine Optimization
5. Manageability

Well-constructed Websites
3. Code Quality
4. Search Engine Optimization
5. Manageability

Well-constructed Websites
3. Code Quality
A. Standards-compliance
B. Accessibility
C. Semantic Markup

Well-constructed Websites
3. Code Quality
A. Standards-compliance
B. Accessibility
C. Semantic Markup

World Wide Web Consortium (W3C)
Sets standards for technology such as:
• HTML
• CSS
• XML

Standards-compliance Benefits
• Easier indexing by search engine spiders
• Accessibility
• Lower TCO
• Cross-browser, cross-platform, cross-
device
• Future-proof code

Well-constructed Websites
3. Code Quality
A. Standards-compliance
B. Accessibility
C. Semantic Markup

Accessibility Tips
• Avoid images for important text
• Use alt tags and title tags to describe
images and links
• Avoid overuse of PDFs
• Use JavaScript sparingly
• Only use HTML tables for tabular data

Accessibility Benefits
• Appeal to broader audience
• Search engine optimization
• Meet growing expectation

Well-constructed Websites
3. Code Quality
A. Standards-compliance
B. Accessibility
C. Semantic Markup

<h1>This is a heading</h1>
<p>This is a paragraph of text I’d like
displayed on my website.</p>
<a href=“anotherpage.html”>click
here</a>

<h1>This is a heading</h1>
<p>This is a paragraph of text I’d like
displayed on my website.</p>
<a href=“anotherpage.html”>click
here</a>

<p>This is a heading</p>
<p>This is a paragraph of text I’d like
displayed on my website.</p>
<a href=“anotherpage.html”>click
here</a>

NOT SEMANTIC SEMANTIC
<table>
<h1>
<tr>
My Page Title
<td>
</h1>
My Page Title
<p>
</td>
This is my page content
</tr>
</p>
<tr>
<td>
This is my page content
</td>
</tr>
</table>

NOT SEMANTIC SEMANTIC
<table>
<h1>
<tr>
My Page Title
<td>
</h1>
My Page Title
<p>
</td>
This is my page content
</tr>
</p>
<tr>
<td>
This is my page content
</td>
</tr>
</table>

Semantic Markup Benefits
• Lightweight, quick-loading sites
• Lower maintenance/redesign costs
• Improved accessibility
• Search engine optimization
• Printable version of site

Well-constructed Websites
3. Code Quality
4. Search Engine Optimization
5. Manageability

Well-constructed Websites
3. Search Engine Optimization
A. Quality code
B. File organization and naming
C. META tags
D. Sitemap XML

Bad URL
www.mydomain.com/page.php?id=99

Good URL
www.mydomain.com/products/boardshorts/
mens-quicksilver-shorts.html

Well-constructed Websites
3. Search Engine Optimization
A. Quality code
B. File organization and naming
C. META tags & keywords in content
D. Sitemap XML

Well-constructed Websites
3. Code Quality
4. Search Engine Optimization
5. Manageability

Well-constructed Websites
3. Manageability
A. Revisions are inefficient and expensive
B. You love design, not revisions
C. CM is expected, not a luxury

Client Annotates Client Faxes Account Manager
Client Prints Web
Client Finds Typo Printed Page with Corrections to Passes Fax to
Page
Correction Account Manager Programmer
Account Manager Programmer
Programmer Programmer Asks
Client Review Notifies Client Notifies Account
Implements for Clarifications on
Changes Changes are Manager Changes
Changes Handwritten Notes
Completed are Completed

Well-constructed Websites
3. Manageability
A. Revisions are inefficient and expensive
B. You love design, not revisions
C. CM is expected, not a luxury

Well-constructed Websites
3. Code Quality
4. Search Engine Optimization
5. Manageability

Company: www.agencyfusion.com
Blog: www.agencybyte.com

Additional Topics
3. RSS
4. AJAX
5. Google Alerts

Copyright 2007 Brett Derricott
All rights reserved.