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 themGzip YUI Compressor  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

 Goes inside the head along with and link to CSS  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.

 Appears in header section  Should contain key words for page  Often tweaked from the  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 rightugly site

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

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

When color is adding meaning, make sure color is not the only way for that meaning to be imparted.

Limited Motor Control Home Participate Featured Panel Program Keynote Exhibit Contact 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