HTML Style Bloopers - Advance Java Web Technology - Lecture Slides, Slides of Computer Science

Download HTML Style Bloopers - Advance Java Web Technology - Lecture Slides and more Slides Computer Science in PDF only on Docsity!

HTML Style Bloopers

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

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

Cannot read the page

• Here are two otherwise very nice backgrounds:
  • Both of these backgrounds have text--can you see it?

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 doesn’t mean it will have good contrast on everyone else’s - 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 color, not in contrast

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 you want to see

You can’t 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?

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
• Can’t leave the page with the Back button
  • Use the pull-down list of pages you’ve been to
• Can’t navigate the site
  • Use Google