1

Search is an access issueSearch is an access issue

2

Find this for me…Find this for me…

3

Standards = Access = Flexibility = SEO

It’s all related…It’s all related…

• The core advice is remarkably similar:

– W3C on access: Create well-formed, structured content

– Google on SEO: Create well-formed structured content

W3C: www.w3.org/WAI/intro/wcag.php

Google: http://www.google.com/support/webmasters/bin/answer.py?answer=35769

4

Web search and user interfaceWeb search and user interface

5

>90% of our content depends on search>90% of our content depends on search

6

Standards = SEO = AccessStandards = SEO = Access

• CSS helps promote both access and search optimization

• XHTML provides semantic structure a crawler can understand

– h1, h2, h3, <p>, <ul>, etc.

• Allows you to order the page content logically & graphically

– DIV and ID structures contain & order content

– Text content flow can be independent of graphic layout

7

Standards = SEO = AccessStandards = SEO = Access

• Search engine crawlers are the most frequent “disabled

users” on the web

• Crawlers can only read text

• Crawlers don’t use mice and don’t understand “click

here”

• Can’t see your pictures & graphic display text

• Crawlers don’t use:

– Javascript

– Cookies

– Flash

• How will a crawler read your page layout tables?

Across rows? Down columns?

8

Search engine optimization definedSearch engine optimization defined

• Clean separation of content & presentation

• A consistent set of principles for content structure

• A consistent approach to page graphic layout & design

• An awareness of how search crawlers “read” a site

– Crawlers read & rank PAGES, not sites

• SEO is intrinsic to the site design & structure

– The principles are simple

– You can’t buy SEO, or simply “add it on” later

9

Page titles are the key starting pointPage titles are the key starting point

• Single most important element in SEO

• Provide the keywords and themes for the page

• Provide the most prominent text for the search results

• MUST contain carefully chosen keywords, consistent

with the rest of the page content

• Provide the text for user bookmarks

• Should be as unique as possible

– GOOD: Yale | Medical School History

– BAD: Yale University School of Medicine | History of

YSM

– Bad bookmark result: “Yale University School of…”

10

KeywordsKeywords

• Consistent across:

– Page title <title>

– Headers <h1>, <h2>

– Content

• Ideal keyword occurrence range is about 5-9%

• Heavy repetition of keywords de-ranks a page (looks like a

search scam)

– File & directory names: yes, they count too!

• Use meaningful plain English words, use hyphens as separators

Good: plain-english-words-work.html

• Underscores are “non-breaking,” and are not read as

individual words

Bad: this_is_not_search_readable.html

• Directory names count too

seo-advice/keywords/plain-english-words-work.html

11

SEO beyond the page content itselfSEO beyond the page content itself• Every word involved in your site structure matters also:

– File names

– Directory names

• Use plain-English words with breaking characters like hyphens

• Make sure your file names are readable by search engines:

– “sea-animals” reads as “sea” & “animals”

– “sea_animals” reads as “sea_animals” (not a recognizable word)

• Examples

– Good: sea-animals/marine-birds/greater-shearwater.html

– Poor: sea_animals/marine_birds/greater_shearwater.html

– (Nothing in the second example contributes to content relevance)

12

Meta tags and searchMeta tags and search

<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" /><meta name="DC.title"

lang="en" content="Patrick J. Lynch personal Web site" />

<meta name="DC.description" lang="en" content="Personal Web site of artist, author, designer and photographer Patrick J. Lynch." /> <meta name="DC.creator" lang="en" content="Patrick J. Lynch" /><meta name="DC.publisher" content="Patrick J. Lynch, Yale University" /><meta name="DC.format" scheme="DCTERMS.IMT" content="text/html" /><meta name="DC.keywords" lang="en" content="web design, web style guide, yale university, yale school of medicine, yale, wildlife illustration, wildlife art, wildlife photography, medical illustration" />

• A great idea, subverted by greed

• They can’t hurt, and might even help

• DON’T use them to cheat; that will get you blackballed

13

Flexible stylesFlexible styles

14

Use the cascadeUse the cascade

CSS

CSS

CSS

skin.cssLocal graphics & colorsunique to this page

typography.cssAll site typography

core.cssLayout DIVs for all pages

• Core & typography shared throughout the site

• Unique “skins” create graphic variations

15Page engineering by Victor Velt, Yale University

Yale web standards layoutsYale web standards layouts

Variations are produced by different “skins”

The HTML remains the same

skin1.css

skin2.css

skin3.css

skin4.css

16

Use the cascadeUse the cascade

All pages share the

same underlying

XHTML structure

CSS CSS CSS

core.css

CSS

typography.css print.css mobile.css

Styles shared by all pages

CSS CSS

skin-green.css skin-red.css“Skins”provide

visual or structural variation

17

Yale web standards layouts (wireframes)Yale web standards layouts (wireframes)

18

Flexible styles across display conditionsFlexible styles across display conditions

Screenmedia=“screen”

Printmedia=“print”

Mobilemedia=“handheld”

19

Web Developer Toolbar for FirefoxWeb Developer Toolbar for Firefox

20

WYSIWYGA foundational principle of the graphic user interface

The ironies: Violating user expectationsThe ironies: Violating user expectations

What users expect to emergefrom the printer

Huh?

21

What does “handheld” mean these days?What does “handheld” mean these days?

The regular web, on a mobile device

Limited mobile

22

patrick.lynch@yale.edupatricklynch.net

Thank youThank you