Good HTML Style

28-Apr-12

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 is http://www.webpagesthatsuck.com/

Motto: Where you learn good Web design by looking at bad Web design Don't Make Me Think: A Common Sense Approach to Web Usability, by Steve Krug, Roger Black
2

One of my favorite books on the subject:

Know who youre 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 Navigation should be simple and obvious Use overview pages, helpful icons, FAQs, and simple organization Provide well-organized information quickly with a minimum of fuss Avoid fancy graphics, slow-loading pages, and fluff Provide site maps and search facilities Use standard, easily understood language Consider providing pages in a variety of languages Avoid region-specific time and date formats, like 10-12-2002
3

Occasional visitors

Experts and frequent visitors

International users

Know what youre 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 Use a clear organization with a table of contents For many topics, a FAQ is often appropriate
4

Are you trying to convey information?

New media require new formats

Books existed well before Gutenbergs 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

Informative books 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

5

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 You have maybe ten seconds to convey your message
6

Surfers flit on by, like TV channel surfers

Very general suggestions

Good writing was, is, and always will be important

Everything you ever learned about writing well still applies Bad spelling puts off good spellers Practically every piece of software includes a spell checker If you are not a native English speaker, they may point out some trivial grammatical errors If you dont see the reason for their advice, its probably wrong You dont know how someone got here Dont use page titles like Introduction that require context
7

Use a spell checker

Dont use a grammar checker--they all stink

Make each page stand by itself

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, dont say it Use a clear, short title--it may become a bookmark
You find a page about a great new drug available next month Another page describes the latest version of some software Who wrote the page? Who sponsors it? If I print the page out, will I ever find it on the Web again?
8

When was the page written/updated?

Where is the page?

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 dont 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 shes still in the same site? Button bars are good, but dont omit text links Avoid dead-end pages (those with no links)
9

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 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 Image maps are nice, but keep the text links anyway Think about making pages available to the disabled

...but users do not like lots of little menus

Not everyone loads graphics by default

Consider adding a search engine to your site Dont 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
10

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

11

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 Users dont like to step down through multiple pages to find the one they want Users dont like to wade through a huge list of links to find the one they want
12

Trees shouldnt be too deep

Trees shouldnt be flat

Draw a picture of your site!

Other organizations

Grid:
HTML Lecture Links
http://... http://...

XML
http://... http://...

XSLT
http://... http://...

Assignment http://... http://... http://...

Linear:

Pages to be read in order, with Previous and Next links This design is most often seen in tutorials, or in fiction
13

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 Potential clients

Who is your target audience?

Appearance is important... ...but most users wont wait more than 7 or 8 seconds for a page to load Getting information quickly is most important
14

Existing clients, students, employees

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 Whats New page may be a good idea I typically put dated announcements at the top (good) and add material at the bottom (maybe not so good)

15

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 doesnt answer questions from real users

What is the biggest benefit of using XYZ hair spray?

Dont lie to your customers!

16

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 dont 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
17

Site covers

A site cover is a page that comes before the home page

Typically, they just add another mouse click and waste the users precious time If it doesnt add any value, users dont 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

18

Design principles

In The Non-Designers Design Book: Design and Typographic Principles for the Visual Novice, Robin Williams discusses these four principles:

Proximity: Related items should be grouped together Alignment: Nothing should be placed on the page arbitrarily-every item should have a visual connection with something else on the page Repetition: Some aspect of the design should be repeated throughout the entire piece Contrast: If two items are not exactly the same, make them different--really different.
19

Proximity

Proximitynearnessis your best tool for organizing things on a page

If things are close together, they appear to be related Therefore:

If things are related, they should be close together If things are not related, they should not be close together

Avoid spacing everything equally Dont stick things in the corners or alone in the middle of a page Avoid having too many groups on a page Make sure headers look like headers, and things that arent headers dont look like headers
20

Alignment

Alignment is literally lining thing up

Good alignment helps to unify and organize the page You want to avoid the scattered all over look Left alignment tends to happen naturally in Web pages Right alignment is not generally as useful Center alignment tends to be boring, and is especially ugly when the lines are all about the same length anyway

Try to avoid more than one kind of alignment on a page

21

Repetition

The purposes of repetition are:

To unify the page or group of pages To add visual interest

Few things look more boring than long, unbroken pages of text Things that look boring often arent given a second look

Repetition is like consistency, only more so

You probably already try for consistent fonts, headers, etc. Some visual elements--backgrounds, icons, borders, horizontal rules-should be repeated throughout a Web page, or a related group of Web pages If your pages belong together, they should appear to belong together However, dont use so much repetition that it becomes annoying
22

Contrast

Contrast is when two elements are clearly different You can create contrast by using different sizes of type You can create contrast by using different kinds of fonts You can use thin lines and thick lines You can use horizontal lines and vertical lines You can use contrasting colors: cool (bluish) and warm (reddish) colors You can use widely spaced text and closely spaced text Dont be a wimp--make different elements really different There isnt much contrast between 12-point type and 14-point type
23

Lets do that again!

Contrast is when two elements are clearly different You can create contrast by:

Using different sizes of type Using different kinds of fonts Using thin lines and thick lines Using horizontal lines and vertical lines Using contrasting colors: cool (bluish) and warm (reddish) colors Using widely spaced text and closely spaced text

Dont be a wimp--make different elements

really different

There isnt much contrast between 12-point type and 14-point type!
24

Types of fonts

Serif Fonts
Sans serif fonts -- no serifs Monospaced fonts -- all characters are the same width

Display fonts -- not intended for lots of text

EVEN IN A GOOD FONT, LARGE AMOUNTS OF TEXT IN ALL CAPITALS IS DIFFICULT TO READ
25

A few more simple principles

Establish a visual hierarchy

People first see the graphics, then the text Balance, organization, and visual contrast are vital People scan text left to right, top to bottom Only the top four inches may be visible Use pastel shades for backgrounds or minor elements Garish illustrations and (especially) animated graphics or blinking text pull the users eyes away from the content If everything is emphasized, nothing is emphasized Dont have things scattered all over your page Let your style evolve as you improve the page
26

Direct the readers eye

Beware of distractions

Be consistent

Establish a consistent look

Every page on your site should share some style elements with all the other pages

The idea is that the user should know, without thinking about it, that shes still in the same site Use the same logo, or the same set of navigation buttons, on every page Use a consistent color scheme and set of fonts

Your pages dont have to all look identical (and shouldnt), but they should have a common style CSS style sheets can be a big help in defining a consistent look

But you need to test them on a variety of browsers

27

Legibility and readability

Readability: How easy it is to read a lot of text Legibility: How easy it is to read headlines In general, a serif font is more readable (in medium sizes) Because of the coarse resolution of modern screens, a sans serif font is more readable in small sizes Very high contrast (difference in brightness, not color) makes text more readable Do not change the default size of body text; the user has it set to the size she wants

Increasing the size for headers or for emphasis is OK Usually, one serif font and one sans serif font is enough
28

Dont use more than a couple of different fonts

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 Dont use pixel values for heights and widths--that takes too much freedom away from the user

Use percentages instead

29

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 Good for photographs Modern, fancy, good for everything Not supported by older browsers
30

JPG or JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

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 This lets you use arbitrary shapes on any background

GIFs can have a transparent color

UNISYS owns the patent on GIFs, and has tried to make people pay for using them
31

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 ration--the more compression, the smaller the file, and the more information is lost JPEGs do a very good job of recreating photographs JPEGs dont do a good job of recreating diagrams and line drawings
32

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 Better compression than GIF A less convenient way to do animations No legal hassles

PNG also provides:

33

The End

34