Good HTML Style
26-Jul-16
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/



Another is from the W3C,
http://www.w3.org/Provider/Style/
One of the more enjoyable sites is
http://www.webpagesthatsuck.com/


This talk is based on that style guide
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
2
Know who you’re trying to reach

What is your target audience?

The general public (Web surfers)


Occasional visitors



Navigation should be simple and obvious
Use overview pages, helpful icons, FAQs, and simple organization
Experts and frequent visitors




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
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
3
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
4
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
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



Hyperlinks allow nonlinear access to information
Search engines make finding information much easier


“When I was a boy I was told that anybody could become President.
I'm beginning to believe it.” - Clarence S. Darrow
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
6
Very general suggestions

Good writing was, is, and always will be important


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



Everything you ever learned about writing well still applies
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
7
Questions you should answer

The reader should be able to discover:

Who wrote the page?


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 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?
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?
8
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)
9
Help visitors find pages in your site

If you have many pages, you can use menu levels...


...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


Look at the table of contents in a textbook; usually, there are main
section headers, with subheaders
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”
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



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”


Put most important or most general concepts near the
top
Lower pages are more specific
Users don’t like to wade through a huge list of links to
find the one they want
Draw a picture of your site!
12
Other organizations

Grid:
HTML
XML
XSLT
Lecture
http://...
http://...
http://...
Links
http://...
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
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
14
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 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 doesn’t answer questions from real users


“What is the biggest benefit of using XYZ hair spray?”
Don’t 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 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
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 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
18
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
19
Types of graphics

There only three kinds of graphics you can use on the
Web:
 GIF (Graphics Interchange Format)



JPG or JPEG (Joint Photographic Experts Group)


Good for pictures with only a few colors
There are some legal problems involved
Good for photographs
PNG (Portable Network Graphics)


Modern, fancy, good for everything
Not supported by older browsers
20
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.)





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


The fewer colors, the smaller the file
This is great for charts, cartoons, etc.
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
21
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
22
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
23
The End
24