Usability:
For Function, SEO, and Ethics
Definition

Anything and everything that makes your
interface searchable, findable, usable,
functional, and successful for all potential
audiences

Largely related to SEO (search engine
optimization)

Ethically considers considerations for
audiences with disabilities
Mobile Design- The Newest
Frontier
Factors Beyond Your Control

The area your searcher is located
 Local

servers will receive priority
The age of your domain
 Older
gets a slight preference

Social media popularity and sharing

Traffic information
 Time
people spend on sight
Have a Readable Design
The “F” Pattern
Suggests:
• Readers will not read every word
• The first 2 paragraphs are fundamental
• Subheadings, lists, and sidebars draw attention
Page Load Time

There are all kinds of compressors (such as Gzip or
YUI Compressor) but I haven’t really played with
them

Write code without useless, repetitive markup


Optimize images for web


Some SEO experts recommend removing
comments
Use “Save for Web” in Photoshop
Enable caching in an .htaccess file

Beyond what I want to talk about but worth
researching later
Tips for Writing Key
Words/Phrases
The more specific the better

“Orem Utah Real Estate” versus “Real Estate”

“Web Design Consultation and Services” versus “Web
Design”

“Site Architecture” versus “Object Oriented Design”

Less specific actually, but less jargoney
Tips for Writing Key
Words/Phrases
Anticipate Synonyms and Variations

Ecommerce and E-Commerce

Webdesign and Website Design

“Video game tips” and “Video game tricks” and “Video
game tutorials” and “Video game walkthroughs”

“Rhetoric and Composition” and “Writing Studies”

My site needs to take my own advice
<meta>

Goes inside the head along with <title>
and link to CSS
<meta name="keywords"
content=“Rhetoric,Composition,Writing,
Teaching,Technical Writing,Pop Culture">


No space after commas (or someone would
have to search with a space)
Not as powerful as some people think,
because it’s obviously easily abused.
<Title>

Appears in header section

Should contain key words for page

Often tweaked from the <H1>

Should change across all pages of the site
(should not be the same on all pages)

If Browser Tab reads “Untitled,” they didn’t
use Title tags

An ugly site that still does it right
<h1>

Largest, boldest, most important tag on page

Only one H1 tag per page (NOT per site)

This one is debatable but I still find it good
practice

Should contain keywords for SEO (what words might
people search to find you?)

Ideally, these keywords should be semantic variations
of the key words in the <title>

More variation means more traffic
• H1 on home page is an image
• Debatably a problem (forces what should be an H1 to
often be an H2)
• H2 is “Products”
• Should be page specific … should be the H1
• H1 on homepage is “Funny t-shirts printed on ultra soft
tees. The cool t-shirt you've always wanted!”
• H1 on “Cool” shirts page is “Our Favorite Cool T-Shirts”
Storm Crux’s Bowling News
and Reviews’ H1 Disaster
Ubowling.com

H1 is “Storm.” It is the largest text, but how in the
world is that helping them with SEO?


H2 is “Crux.”


It’s not.
Also not helpful.
The full “Storm Crux” could be the H1 (that’s the brand
name) but “Bowling News and Resources” would be
smarter.
Alt=

ALT (can only be applied to images)

Provides alternative text description for images

Will appear if image fails to load

Optimizes search engine placement



Words in alt need to describe image well
Used by screen readers for the disabled
You’ll often see alt=“”

This is doing nothing and suggests they used a
software template or program but didn’t fill in
the words

This is accomplishing nothing!
Good Alt attribute writing
<img src=“images/captainamerica.jpg” alt=“?” />
Captain America
Captain America from the
movie
“A promo shot of Chris Evans
as Captain America from the
Marvel Movie looking somber
on the battlefield.”
Good Alt attribute writing
“A large, diverse group of
cheering students, standing
up and fist-pumping on
the bleachers of a basketball
game.”
Think of the action in the
image, but more
importantly, the reason the
image is there on your site.
Custom 404 Pages
Color Blindness
Color Blindness
When color is adding meaning, make sure color is not
the only way for that meaning to be imparted.
Limited Motor Control
<div id="menu" class="container">
<ul>
<li class="current_page_item"><a href="http://markdpepper.com/wsc2014" accesskey="1">Home</a></li>
<li><a href="http://markdpepper.com/wsc2014/participate.html" accesskey=“2">Participate</a></li>
<li><a href="http://markdpepper.com/wsc2014/nff.html" accesskey=“3">Featured Panel</a></li>
<li><a href="http://markdpepper.com/wsc2014/program.html" accesskey=“4">Program</a></li>
<li><a href="http://markdpepper.com/wsc2014/keynote.html" accesskey=“5">Keynote</a></li>
<li><a href="http://markdpepper.com/wsc2014/exhibit.html" accesskey=“6">Exhibit</a></li>
<li><a href="http://markdpepper.com/wsc2014/contact.html" accesskey=“7">Contact</a></li> </ul>
A Good Idea Poorly Implemented:
• Keyboard shortcut is different across browsers
• No good way to let users know accesskeys have
been used
• Short cut is often already assigned to another
function