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
