Grassroots Business Association

"Web Design Tips & Tricks"

These are the class notes given out for our Feb. 18th, 2009 meetup on "Web Design Tips & Tricks" presented by the guys at Dumbeyes. Notes added were takend by Megan and are inluded here in [square brackets].

Dumbeyes
1122 E Pike St. #1473
Seattle, WA 98122
206.965.8952
dumbeyes.com

USER EXPERIENCE

  • Strive to follow the principals of Progressive Enhancement to enure usabilit/accessibility across all devices, browsers and user disabilities. [To see how your site looks raw you can turn off the style in your browser. In Firefox its: View --> Page Style --> No Style]
    • Progressive enhancement principles: separate content/structure, presentational aspects, and behavior.
    • Basically, keep your HTML light, well-structured, meaningful, and avoid presentational attributes/tags.
    • Keep your site 'presentation' to a separate (CSS) Cascading Style Sheet file.
    • Apply unobtrusive javascript functionality that simply enhances the site.
    • Avoid enhancements/ effects which take over hte user's browser functionality.
    • Apply known conventions of usability (e.g., a 'play' button should look lik ea 'play' button on a stero, etc.)
    • Make the entrance page of the site very "light" so it loads quickly.
      • [Avoid Flash unless it is a purely decorative element on your site. Google cannot "see" Flash so users will be unable to find your site. Additionally, not all users have Flash players installed.]
  • Keep navigation consistent on every page.
    • Make all links obvious and easy to read, include hover states to create user feedback.
    • Try to make all pages just one click away at all times.
    • Depending on layout create a footer that includes links to all pages.
    • If your site has a complex directory/ category structure, include 'breadcrumb' navigation links so users can instantly understand where they are. [Amazon.com makes good use of breadbrumb navigation links.]
    • Always complete the alt attribute for images included in your content.
    • Give users a visual indicator if you are taking them out of your site, especially if you are opening a new browser window/tab.
  • Put the most important info and pictures above the "fold" width: 800 pixels, height: 600 pixels. [Google Analytics will show you the screen resolution of your users.]
  • Create Web Text versus text as images.
  • Use larger images and try to avoid too many thumbnails. The less clicks the better.
  • Use contact forms on your contact page. [Email links on web pages are vulnerable to malware bots, which can spam your mail box or entire mailing list. A contact form also gives you the opportunity to offer users subject lines from drop down form elements, making it easier to communicate with you.]
  • Create a favicon to give the site a more professional look. [There are online favicon generators.]

CONTENT

  • Update site as much as possible especially on entrance/ home page. Use frameworks like (CMS) content management system, Wordpress, Blogger. [Blogs are more likely to be indexed by Google, good way to make your site visible.]
  • Use solid backgrounds on product pictures.
  • Depending on the kind of site you have, try to keep the copy short, engaging and concise. (People rarely 'read' sites. They skim them.)

SEARCH ENGINE OPTIMIZATION

  • Add description text and keywords to header of each page and metatags on each image (alt attributes), etc.
  • Always complete the alt attribute for images included in yoru content.
  • Add Google Analytics to your site to track hits and user's behaviors. http://www.google.com/analytics
  • Get as many sites as possible to link to your site.
Copyright 2008 Grassroots Business Association