Apr 18, 2023

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 (job hunting)? See any book on writing resumes

Just about anything? Beautiful women

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 Anybody can become a web site developer!

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

Other organizations

Grid:

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

HTML XML XSLT

Lecture http://...

http://...

http://...

Links http://...

http://...

http://...

Assignment

http://...

http://...

http://...

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 Flash animations, or anything with sound, may cause visitors to leave your

site in a hurry

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 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)

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 A few years ago UNISYS discovered that it owned the patent

on GIFs, and tried to make people pay for using them That didn’t last, and the patent is now expired anyway

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