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
• Use the alt"text" attribute in all your ltimggt
  tags
• Many users turn off JavaScript
• This is one way to avoid pop-up windows
• JavaScript is useful for client-side input
  checking
• Server-side input checking is slower but always
  works

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 JavaScript, but very poorly
• 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 but unusable 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
  sizes in HTML, but very little reason ever to do
  so

8
ADA (Americans with Disabilities Act)

• In the case of the National Federation of the
  Blind v. Target, Judge Marilyn Hall Patel ruled
  that retailers can be sued if their websites are
  not accessible to the blind. In her opinion for
  the US District Court for the Northern District
  of California, Patel wrote that the ordinary
  meaning of the ADAs prohibition against
  discrimination in the enjoyment of goods,
  services, facilities or privileges, is that
  whatever goods or services the place provides, it
  cannot discriminate on the basis of disability in
  providing enjoyment of those goods and services.
• At issue is Target.coms lack of properly used
  alt tags throughout its site.
• Source http//arstechnica.com/news.ars/post/20060
  910-7705.html

9
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

10
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 the user wants to see

11
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
• Easy solution Dont set the time to zero!

12
You cant navigate the site

• EPSON used to be my favorite bad example (its
  gotten better now)
• I wanted to download a printer driver I went to
  www.epson.com and it gave me the following
  choices
• Printers Imaging products
• Electronic devices
• Point of Sale Products
• Which of these should I choose to find a printer
  driver?
• Their page represents their corporate
  organization
• What do I care how they are organized?

13
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

14
(No Transcript)
15
The End
I am a Web developer for a non-profit that is
trying to help families with special health needs
affected by Hurricane Katrina. Why in the world
would FEMA, a federal agency subject to Section
508 provisions, build a web site that is only
accessible via Internet Explorer for Windows? I
know of no good technical reason to do so. In
fact, if your web team is worth its salt, they
should be developing to W3C standards anyway,
which would mean that your web resources would be
available to anyone with a web browser, even an
old one on an old system! As a Macintosh user,
I'm used to this kind of marginalization, but I
find it outrageous that a resource as critical to
people in desperate straits as this one would
exclude millions of people for no reason other
than ignorance of best practices.

--Andrew Hedges