Transcript Bad HTML Style

Bad HTML Style
4-Apr-17
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 can’t load the page
You can’t use the page for its intended purpose
You can’t read the page
You can’t adjust the page to your needs
You can’t get rid of the page
You can’t 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


Java applets are much less popular than formerly



Some users just turn off Flash
Microsoft users don’t get modern Java by default
If you are going to use Flash, applets, or other fancy
features, make sure your intended audience has the
ability to see your pages
Provide the essential information on your site in a
form everyone can use!
3
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 <img> 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
4
Cannot use with new technology

Many “telephones” can access the Web


My Sidekick does JavaScript, but very poorly




Blackberry, Sidekick, iPhone, and now Android
I can’t get flight information from the Philadelphia airport
I can’t 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
5
Cannot read the page

Here are two otherwise very nice backgrounds:

Both of these backgrounds have text--can you see it?
6
Still cannot read the page

Have you seen pages that tell you what browser to use and what
to set your screen size to?





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



Did you ever do it?
What do you think about that person’s ego?
There are various other kinds of color blindness
Color is often a good differentiator, but it should never be the only
differentiator
There are lots of places you can use absolute sizes in HTML, but
very little reason ever to do so
7
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 ADA’s 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.com’s lack of properly used “alt” tags
throughout its site.
Source: http://arstechnica.com/news.ars/post/20060910-7705.html
8
Contrast is important

Contrast is important



If it has good contrast on your monitor, that doesn’t mean it
will have good contrast on everyone else’s



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
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 differences
This is a difference in contrast, not in color
This is a difference in color, not in contrast
9
You can’t 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 don’t 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 don’t always work, either; I’ve 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
10
You can’t 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 it’s 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


Easy solution: Don’t set the time to zero!
User workaround: Use the drop-down menu next to the Back
button to choose a page before the immediately previous page
11
You can’t navigate the site


EPSON used to be my favorite bad example (it’s 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?
12
Workarounds

Poor contrast:




Bad size:



Increase or decrease screen resolution
On Mac OS X, use the mouse scroll wheel to zoom in or out
Can’t leave the page with the Back button


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
Use a Firefox add-on (I use Web Developer) to turn on or off various page
styles
Use the pull-down list of pages you’ve been to
Can’t navigate the site

Use Google to search for particular information within the site
13
14
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
15