HTML Style Bloopers - PowerPoint PPT Presentation

1 / 13
About This Presentation
Title:

HTML Style Bloopers

Description:

EPSON has long been my favorite example ... to download a printer driver; you go to www.epson.com, and here are your choices: ... – PowerPoint PPT presentation

Number of Views:47
Avg rating:3.0/5.0
Slides: 14
Provided by: DavidMa5
Category:
Tags: html | bloopers | epson | style

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com