Search is an access issue

thumpinsplishInternet και Εφαρμογές Web

18 Νοε 2013 (πριν από 3 χρόνια και 7 μήνες)

80 εμφανίσεις

1

Search is an access issue

2

Find this for me…

3

Standards = Access = Flexibility = SEO

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 interface

5

>90% of our content depends on search

6

Standards = 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 = 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 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 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

Keywords


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 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 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 styles

14

Use the cascade

CSS

CSS

CSS

skin.css

Local graphics & colors

unique to this page

typography.css

All site typography


core.css

Layout DIVs for all pages



Core & typography shared
throughout the site


Unique “skins” create graphic
variations

15

Page engineering by Victor Velt, Yale University

Yale 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 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)

18

Flexible styles across display conditions

Screen

media=“screen”

Print

media=“print”

Mobile

media=“handheld”

19

Web Developer Toolbar for Firefox

20

WYSIWYG

A foundational principle of the
graphic user interface


The ironies: Violating user expectations

What users expect to emerge

from the printer


Huh?

21

What does “handheld” mean these days?

The regular web, on a mobile device

Limited mobile

22

patrick.lynch@yale.edu

patricklynch.net

Thank you