HTML Style Bloopers

1
HTML Style Bloopers
2
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

3
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

4
Cannot use the page

• Many users turn off 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
  requiring JavaScript, but be sure your users are
  aware of the requirement

5
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

6
Cannot read the page

• Here are two otherwise very nice backgrounds

• Both of these backgrounds have text--can you see
  it?

7
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

8
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--differenc
  es between light and dark--not on color
  differences

This is a difference in color, not in contrast
9
You cant adjust the page

• Pages that use absolute sizes--for example, 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

10
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
• ltmeta HTTP-EQUIV"Refresh"
  CONTENT"0 URLnewURL"gt
• This takes you to the new page but effectively
  disables the Back button

11
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?

12
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

13
The End