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

Some SEO experts recommend removing comments

Optimize images for web

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 DisasterUbowling.com

H1 is “Storm.” It is the largest text, but how in the world is that helping them with SEO?

It’s not.

H2 is “Crux.”

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

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.”

<img src=“images/captainamerica.jpg” alt=“?” />

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