HTML Style

Bloopers

9/23/15

What is good style?

Good style, like good taste, is partly--but only

partly--a matter of opinion

Bad style is frequently easier to define
A web page has bad style if
You cant load the page
You cant use the page for its intended purpose
You cant read the page
You cant adjust the page to your needs
You cant get rid of the page
You cant navigate the site containing the page
2

Cannot load the page

Macromedia Flash is the worst offender
Pages containing Flash animations often

cannot even be loaded by browsers without

Flash
If you are going to use Flash, or other fancy
features, make sure your intended audience
has the ability to see your pages

Cannot
page
Many usersuse
turn offthe
automatic
image
loading

They may have a slow connection

They may be visually disabled
If your only hyperlink to another page is

through an image, users without images

cannot get there
Always provide text hyperlinks in addition to
your images

To submit a form via HTML, you usually

must have JavaScript turned on

The JavaScript does client-side input

checking
This is probably useful enough to justify

Cannot use with new technology

Many telephones can access the Web
Blackberry is the best known (and most expensive)
Mine is a T-Mobile Sidekick
My Sidekick does not do JavaScript
I cant get flight information from the Philadelphia

airport
I cant access some weather sites
Some sites are useable but very cluttered (e.g.
Amazon)

For the most useful sites, alternative sites have

come into existence

5

Here are two otherwise

Cannot
read very
the
nicepage
backgrounds:

Both of these backgrounds have text--can you

see it?

Still cannot read the

page
Have you seen pages that tell you what

browser to use and what to set your screen

size to?
Did you ever do it?
What do you think about that persons ego?
This page was created by someone with perfect eyesight using a 21-inch monitor set to 1600 by

1200 resolution, using an 8-point serif font, and as a result nobody but the original author has a clue
what it actually says.

Some people just like to use weird fonts

7% of white males are red-green colorblind
There are lots of places you can use absolute

measurements in HTML, and very little reason

ever to do so

Contrast
is important
Contrast is important
Use either very dark text against a very light

background or very light text against a very dark

background
Avoid contrast in the background itself

If it has good contrast on your monitor, that

doesnt mean it will have good contrast on

everyone elses
Always use more contrast than you think necessary

The ability to read depends on edge detection

Human edge detection relies on contrast--

differences between light and dark--not on color

This is a difference in color, not in contrast
differences
8

Pages
You
cant
the example,
page
that use adjust
absolute sizes--for

to adjust the size of a table to just fit on a

17-inch screen--are a serious nuisance

Scrolling vertically is acceptable, because we

dont need to scroll often to read a column of

text
If we need to scroll sideways, we need to
scroll back and forth for every single line

Relative sizes dont always work, either;

Ive run across pages containing tables that

are 110% of the page width
Even if your monitor is large and your
eyesight is good, there may be other things
on the screen that you want to see

You cant leave the page

Sometimes this occurs through malice--the

page includes JavaScript to pop up a new

window each time you close the current one
Usually its an accident: a page gives you an
automatic transfer to a new page, but with the
time set to zero:
<meta HTTP-EQUIV="Refresh"

CONTENT="0; URL=newURL">

This takes you to the new page but effectively

disables the Back button

10

You cant navigate the

site
EPSON has long been my favorite example
Suppose you want to download a printer

driver; you go to www.epson.com, and here

are your choices:
Printers & Imaging products
Electronic devices
Point of Sale Products

This represents their corporate organization

What do I care how they are organized?
11

Workarounds
Poor contrast:
Hit control-A, to select all the text on the page
Otherwise, in Preferences, select Use my chosen
colors and/or turn of image loading, then reload
page
Bad size:
Increase or decrease screen resolution

Cant leave the page with the Back button

Use the pull-down list of pages youve been to
Cant navigate the site
Use Google
12

The End

13