usability: for function, seo, and ethics. definition anything and everything that makes your...
TRANSCRIPT
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
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
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.
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