Important Information

1. Important Information • This presentation was created by Patrick Crispen. • You are free to reuse this presentation provided that you • Not make any money from this presentation. • Give credit where credit is due.

2. Guidelines for GOODWeb Design a presentation by Patrick Douglas Crispen

3. Our Goals • See why Web design guidelines are necessary • Discover how to find the defacto standard for every aspect of your site's design • Discuss Jakob Nielsen’s "Top Ten Guidelines for Homepage Usability" • Learn how to design good Web pages and Web sites from the start • See how your choice of page font impacts your pages' readability (and why you should stay away from serif fonts like Times New Roman) • And much, much more …

4. Good News / Bad News • The good news is that anyone can create a Web page or Web site. • The bad news is that anyone can create a Web page or Web site.

5. Regardless of whether you use Macromedia Dreamweaver, Microsoft FrontPage, or simply code by hand, there are some guiding principles you need to remember whenever you designanythingfor the web.

6. Why We Need Principles • Some bristle at the thought of codified guidelines for good design, concerned that such guidelines stifle individual creativity. • They don’t realize what you and I already know: bad web design isn’t creative, it’s bloody ANNOYING!

7. Some Truths • Yours is not the first web page or site your students will have visited. • When your students visit your page or site, they come with preconceived expectations about how it should look and work. • These expectations come from your students’ cumulative experiences with other web pages and sites. • Violate these expectations and you will, at best, anger your students or, at worst, lose them altogether.

8. The Tyranny of the Fortune 500 • As Jakob Nielsen wrote back in November 1999, “If you are thinking about how to design a certain page element, all you have to do is to look at the twenty most-visited sites on the Internet and see how they do it.” • “If 90% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability.” Source: http://www.useit.com/alertbox/991114.html

9. Finding the Top 20 • comScore Media Metrix frequently publishes a “Top 50 U.S. Web and Digital Media Properties” guide. • Look for it in the “Big Picture” section of http://cyberatlas.internet.com/ • May be hard to find

10. Part One:Top Ten Guidelines for Homepage Usability From Jakob Nielsen’s “Alertbox,” May 12, 2002http://www.useit.com/alertbox/20020512.html

11. Make the Site's Purpose Clear: Explain Who You Are and What You Do • Include a one-sentence tagline. • This is more for unexpected visitors than students • Write a window title with good visibility in both search engines and, more importantly, bookmark lists. • Group all “school business” information in one distinct area.

12. Help Users Find What They Need • Emphasize your site’s top high-priority tasks. Homework lists, special announcements, class calendars, etc. should be prominent – located higher on your homepage than CVs, personal photos, etc. • Include a search input box.

13. Reveal Site Content • Show examples of real site content. Use pull quotes where possible. • Begin link names with the most important keyword. • Offer easy access to recent homepage features. If you change your site frequently, have an archive of the stuff you’ve recently removed or updated.

14. Use Visual Design to Enhance, not Define, Interaction Design • Don't over-format critical content, such as navigation areas • Use meaningful graphics

15. Part Two: Designing GOOD Web Sites from the Start It is easy, as long as you follow a few basic steps.

16. The “Paper” Rule • The first step to good web design is to turn off your computer and pull out a couple of pieces of paper. • Most poorly designed sites are poorly designed from the start.

17. The Three Parts of Web Design • Information design • Interaction design • Presentation design

18. Information Design ? • Message • Audience • Purpose • Background • Structure

19. The Audience Is Key • Once you identify your audience, designing the web page or web site is a snap! • Example: the Bertrand Russell Intermediate High School Concert Choir

20. Part Three:Basic Design Rules Stuff that no one ever tells you

21. Homepage Usability • Most of the tips you are about to see come straight from Homepage Usability by Jakob Nielsen & Marie Tahir. • ISBN: 073571102X • US$39.99 ($27.99 at Amazon.com)

22. Oh sure, it LOOKS good ... • Reading from a computer screen is about 25% slower than reading from paper. • Write 50% less text than you would normally write for a brochure or paper.

23. Serif versus sans-serif • On paper, we are all used to reading serif fonts – fonts with a “tail” (like Times New Roman.) • On screens, however, sans-serif fonts are easier to read. • The most readable screen font is Verdana (which ships with Internet Explorer.)

24. The basic scheme • For the main content area of your pages, ALWAYS use black text on a white background. • We have to defer to both David Ogilvy AND the Fortune 500 on this one. • The rest of your page can be colored, but leave the main content area alone! • If you have to change fonts, use a sans-serif font like Verdana, Helvetica, or Arial. • Or, if you code by hand, use a font family like <font face="Verdana, Arial, Helvetica, sans-serif“> • Better still, use CSS [which we’ll talk about in a bit.] • Don’t change the link colors!

25. How wide? • While bigger monitors continue to pop-up, most people are still using 800 by 600. • You have to account for the scroll bars. • Stay under 760 pixels wide, especially with your graphics (600 wide if you are making something for Blackboard or WebCT.)

26. How big? • Try to follow the “30/30 rule”: keep your main homepage – graphics and everything – to under 30 kilobytes in size. That way it will load in under 30 seconds over a very slow dial-up. • Your secondary pages can be larger. • I break this rule ALL the time.

27. Your Main Homepage • Your logo (if you have one) should be in the upper left corner • Average size: 80 x 68 • Include a tag line that explicitly summarizes what your site does. • Design your homepage so that is clearly different from all your other pages.

28. Communicating Information about Your School or Department • If you’re making a site for your school or department, include a homepage link to an “About <name of organization>” section. • Include a “Contact Me” or “Contact Us” link on the homepage that goes to a page with all contact information for you or your organization.

29. Links • Differentiate links and make them easy to scan. • By default, links are differentiated by being blue and underlined. DON’T CHANGE THIS! • Don’t use generic instructions, such as “Click Here” as a link name. • Don’t use generic links, such as “More …” at the end of list items. • If a link does something other than go to another Web page … make sure the link explicitly indicates what will happen.

30. Stay away from frames ... • Many browsers cannot print framed pages appropriately. • Frames are so hard to learn that many authors write buggy code when they try to use them. • Search engines have trouble with frames because they don’t know what composites of frames to include in their index.

31. Stay away from frames ... • Some browsers make it difficult to bookmark frames. • Many Websites that offer users a choice between regular and framed versions have found that most users prefer frames-free designs.

32. Use CSS • CSS separates the style from the content • CSS makes your pages download faster • Browsers multitask downloads • CSS makes your site more accessible • CSS guarantees a consistent look-and-feel across your entire site • CSS is a sneaky way to make printer-friendly pages • The new Macromedia Dreamweaver MX 2004 automatically supports CSS out of the box!

33. Two Essential CSS Books • Cascading Style Sheets: The Definitive Guideby Eric A. Meyer • ISBN: 1565926226 • $34.95 retail / $24.47 at Amazon.com • WONDERFUL starting point

34. Two Essential CSS Books • Eric Meyer on CSS: Mastering the Language of Web Designby Eric A. Meyer • ISBN: 073571245X • $45.00 retail / $31.50 at Amazon.com • Buy this only after you have read The Definitive Guide (mentioned on the last slide.)

35. Part Four:Accessibility Welcome to the wonderful world of Section 508

36. What is Section 508? • Section 508 of the Rehabilitation Act requires all federal agencies (with the exception national security systems) to ensure that electronic and information technology is accessible to employees and members of the public with disabilities. • This only applies to electronic and information technology that is procured by a FEDERAL department or agency. • BUT, most companies and educational institutions around the world voluntarily comply with section 508, especially when it comes to those companies' or institutions' Web sites.

37. Why Comply Voluntarily? • Why? One word: traffic. • If you can make your Web pages more accessible, especially to people with disabilities (like, say, Auburn University alumni), more people are going to be able to visit your Web pages.

38. How Do You Comply? • Just go to http://www.webaim.org/standards/508/checklist • The folks at WebAIM took the 16 Web design rules in section 508 and converted them into an easy to read checklist.

39. How Can You Teach Accessibility? • Fresno State offers some WONDERFUL tools and resources for teaching accessibility. • Just visit http://fresnostate.edu/webaccess/

40. Part Five:Sites that Ignore These Guidelines Including a few sites shamelessly stolen from WebPagesThatSuck.com

41. http://www.tuxedogov.org/ • Auto loading MIDI is ANNOYING! • No title • Table borders are unnecessary • “Welcome To” should have a top vertical alignment • And the “Welcome To” graphic is unnecessary • Navigation is centered • Unorganized menu

42. http://www.jcsheriff.com/ • The title doesn’t include the state. • The gun is wholly inappropriate. • The Flash is … um … • Click on “webmaster” and you get a “not found” note.

43. http://www.auburn.edu/ • It’s Auburn! • Actually, it’s a decent site, but … • The image doesn’t match the links • Rollover navigation link callouts are confusing • Images in bottom corner look like ads (and will be ignored) • Any others? (Besides the fact that IT’S AUBURN?!)

44. Are There Any Other Sites You Want to Look at? And, no, we’re not going to look at http://www.ua.edu/[ROLL TIDE!]

45. Regardless of whether you use Macromedia Dreamweaver, Microsoft FrontPage, or simply code by hand, there are some guiding principles you need to remember whenever you designanythingfor the web.

46. Our Goals • See why Web design guidelines are necessary • Discover how to find the defacto standard for every aspect of your site's design • Discuss Jakob Nielsen’s "Top Ten Guidelines for Homepage Usability" • Learn how to design good Web pages and Web sites from the start • See how your choice of page font impacts your pages' readability (and why you should stay away from serif fonts like Times New Roman) • And much, much more …

47. Guidelines for GOODWeb Design a presentation by Patrick Douglas Crispen