Good HTML Style

1. Good HTML Style

2. Style Guides • There are many HTML style guides on the Web • One of the best is from Yale,http://info.med.yale.edu/caim/manual/ • This talk is based on that style guide • Another is from the W3C,http://www.w3.org/Provider/Style/ • One of the more enjoyable sites ishttp://www.webpagesthatsuck.com/ • Motto: “Where you learn good Web design by looking at bad Web design” • One of my favorite books on the subject: • Don't Make Me Think: A Common Sense Approach to Web Usability, by Steve Krug, Roger Black

3. Know who you’re trying to reach • What is your target audience? • The general public (Web surfers) • Like a magazine cover, your home page should lure people in • Use strong graphics and bold statements • In the fewest words possible, tell visitors what you offer • All your links should point “inward” to your pages • Occasional visitors • Navigation should be simple and obvious • Use overview pages, helpful icons, FAQs, and simple organization • Experts and frequent visitors • Provide well-organized information quickly with a minimum of fuss • Avoid fancy graphics, slow-loading pages, and “fluff” • Provide site maps and search facilities • International users • Use standard, easily understood language • Consider providing pages in a variety of languages • Avoid region-specific time and date formats, like 10-12-2002

4. Know what you’re trying to do • A page without a purpose is like a talk without a topic • Are you trying to sell something? • Air freshener: Use beautiful outdoor scenes • Underarm deodorant: Beautiful people (women and men) • Computers: Attractive pictures and technical specs • Yourself: See any book on writing resumes • Are you trying to convey information? • Use a clear organization with a table of contents • For many topics, a FAQ is often appropriate

5. New media require new formats • Books existed well before Gutenberg’s 1456 Bible • Here are some “interface standards” for books: • Books have covers • Books are bound along the left edge (in the USA) • The title is on the spine, top to bottom (in the USA) • Books have a title page • The pages of a book are numbered • Odd-numbered pages are on the right • The front matter is numbered with Roman numerals • Textbooks have a table of contents and an index • How long after Gutenberg did it take to establish these standards? • Answer: Gradually, over more than 100 years

6. Web pages are not books • Standards are evolving rapidly, but are not “finished” • The Web brings new abilities: • Publishing is cheap; anyone can do it • “When I was a boy I was told that anybody could become President. I'm beginning to believe it.” - Clarence S. Darrow • Hyperlinks allow nonlinear access to information • Search engines make finding information much easier • I used to have hundreds of bookmarks; now I use Google • The Web brings new challenges: • Users can get “lost in hyperspace” • Good navigation tools are essential • Surfers flit on by, like TV “channel surfers” • You have maybe ten seconds to convey your message

7. Very general suggestions • Good writing was, is, and always will be important • Everything you ever learned about writing well still applies • Use a spell checker • Bad spelling puts off good spellers • Practically every piece of software includes a spell checker • Don’t use a grammar checker--they all stink • If you are not a native English speaker, they may point out some trivial grammatical errors • If you don’t see the reason for their advice, it’s probably wrong • Make each page stand by itself • You don’t know how someone got here • Don’t use page titles like “Introduction” that require context

8. Questions you should answer • The reader should be able to discover: • Who wrote the page? • You find a page on lung cancer. Was it written by (a) the American Medical Association, (b) someone who works for Philip Morris, or (3) a plumber in Hoboken? • What is the page about? • If you have nothing to say, don’t say it • Use a clear, short title--it may become a bookmark • When was the page written/updated? • You find a page about a great new drug available “next month” • Another page describes the “latest version” of some software • Where is the page? • Who wrote the page? Who sponsors it? • If I print the page out, will I ever find it on the Web again?

9. Build clear navigation aids • When someone accesses your site: • What are they likely to be looking for? • How sophisticated are they? • Hardly anyone does enough user testing • A common problem: you find an interesting page, but you don’t know what pages “surround” it • Are pages organized in a simple and consistent way? • Can the visitor find her way to the home page? • Can the user tell if she’s still in the same site? • Button bars are good, but don’t omit text links • Avoid dead-end pages (those with no links)

10. Help visitors find pages in your site • If you have many pages, you can use menu levels... • Look at the table of contents in a textbook; usually, there are main section headers, with subheaders • ...but users do not like lots of little menus • Studies show that users prefer dense menus with lots of choices over little, one-step-at-a-time menus • “Site maps” (basically, an extensive table of contents) have become popular • Not everyone loads graphics by default • Image maps are nice, but keep the text links anyway • Think about making pages available to the disabled • Consider adding a search engine to your site • Don’t make it easy to accidentally leave your site • Distinguish between local links and links that take the visitor offsite • Give your pages a consistent “look”

11. Put the important stuff on top • Web pages are usually bigger than the window they are viewed in • The first thing visitors see is the top of your Web page • Many visitors will never scroll down • The top of a page should tell visitors what they need to know about the page • If a visitor is lost inside your site, she may not notice links at the bottom of the page • Often, links at top and bottom are a good idea • This is especially true for a linear set of pages, where the links are Previous, Next, and (maybe) Home or Table of Contents

12. Organize your pages • Any organization is better than no organization • A hierarchy (tree) usually works best • Put most important or most general concepts near the top • Lower pages are more specific • Trees shouldn’t be too deep • Users don’t like to step down through multiple pages to find the one they want • Trees shouldn’t be “flat” • Users don’t like to wade through a huge list of links to find the one they want • Draw a picture of your site!

13. Grid: Linear: Pages to be read in order, with Previous and Next links This design is most often seen in tutorials, or in fiction Other organizations

14. Graphics on your home page • The “home page” is your intended starting point for visitors to your site • Nice graphics make your page look better • Complex graphics make your page load more slowly • Who is your target audience? • Potential clients • Appearance is important... • ...but most users won’t wait more than 7 or 8 seconds for a page to load • Existing clients, students, employees • Getting information quickly is most important

15. Updating sites • Many types of sites must be updated frequently • Using a New! graphic may help point out changes • But how long does an item remain “new”? • Dates on items are more informative • If information is spread out over many pages, a central What’s Newpage may be a good idea • I typically put dated announcements at the top (good) and add material at the bottom (maybe not so good)

16. FAQs • For many sites a FAQ (Frequently Asked Questions) page, with answers, is very helpful • A FAQ is especially helpful to beginners in an area • The current best site seems to be http://www.faqs.org/ • Biggest problem with FAQs is that many of them are “fakes” • A company puts out a FAQ about its product that obviously doesn’t answer questions from real users • “What is the biggest benefit of using XYZ hair spray?” • Don’t lie to your customers!

17. Design standards • Without question, a company should have design standards for company Web pages • Problems: • Established groups and individuals have already developed their own standards and are reluctant to change • The wrong people may be put in charge of defining the design standards • They may know little or nothing about existing standards • They may decide on “too many” standards--things that may be a good idea individually, but don’t work well together • They may take forever to finish, so standards are coming “any day now” • They have their own goals, and ignore or forget the user

18. Site “covers” • A site cover is a page that comes before the home page • Typically, they just add another mouse click and waste the user’s precious time • If it doesn’t add any value, users don’t want to see it more than once • An informational site, such as a newspaper, can have a cover that provides links to the various sections • A reference site, such a s Yahoo!, should “have its menu posted on the front door” • A handsome site cover may add interest to an art or entertainment site

19. Use tables • HTML <table>s are your best tool for arranging text and graphics on a page • For simply arranging things, use tables without borders • Use borders if you want it to look like a table • Don’t use pixel values for heights and widths--that takes too much freedom away from the user • Use percentages instead

20. Types of graphics • There only three kinds of graphics you can use on the Web: • GIF (Graphics Interchange Format) • Good for pictures with only a few colors • There are some legal problems involved • JPG or JPEG (Joint Photographic Experts Group) • Good for photographs • PNG (Portable Network Graphics) • Modern, fancy, good for everything • Not supported by older browsers

21. GIF files • GIF is the most common file format • You can specify, in a GIF file, how many colors to use (2, 4, 8, 16, etc.) • The fewer colors, the smaller the file • This is great for charts, cartoons, etc. • GIFs are lossless--you can exactly recreate the original image • GIFs can be animated • GIFs can be interlaced • This allows pictures to appear quickly and get sharper • GIFs can have a transparent color • This lets you use arbitrary shapes on any background • UNISYS owns the patent on GIFs, and has tried to make people pay for using them

22. JPG files • JPEGs provide a superior compression scheme when there are color gradients in the image • That is, for every photograph • JPEGs are lossy-- some information is lost in the compression, and the information is interpolated (faked) when the picture is recreated • You can set the compression ratio--the more compression, the smaller the file, and the more information is lost • JPEGs do a very good job of recreating photographs • JPEGs don’t do a good job of recreating diagrams and line drawings

23. PNG Graphics • PNG has three main advantages: • Alpha channels: you can have variable (partial) transparency • Gamma correction, so you can get the same colors on different platforms • Two-dimensional interlacing • PNG also provides: • Better compression than GIF • A less convenient way to do animations • No legal hassles

24. The End