Good HTML Style

1
Good HTML Style
2
Style Guides

• There are many HTML style guides on the Web
• One of the best is from Yale,http//info.med.yale
  .edu/caim/manual/
• This talk is based on that style guide
• Another is from the W3C,http//www.w3.org/Provide
  r/Style/
• One of the more enjoyable sites
  ishttp//www.webpagesthatsuck.com/
• Motto Where you learn good Web design by
  looking at bad Web design
• One of my favorite books on the subject
• Don't Make Me Think A Common Sense Approach to
  Web Usability, by Steve Krug, Roger Black

3
Know who youre trying to reach

• What is your target audience?
• The general public (Web surfers)
• Like a magazine cover, your home page should lure
  people in
• Use strong graphics and bold statements
• In the fewest words possible, tell visitors what
  you offer
• All your links should point inward to your
  pages
• Occasional visitors
• Navigation should be simple and obvious
• Use overview pages, helpful icons, FAQs, and
  simple organization
• Experts and frequent visitors
• Provide well-organized information quickly with a
  minimum of fuss
• Avoid fancy graphics, slow-loading pages, and
  fluff
• Provide site maps and search facilities
• International users
• Use standard, easily understood language
• Consider providing pages in a variety of
  languages
• Avoid region-specific time and date formats, like
  10-12-2002

4
Know what youre trying to do

• A page without a purpose is like a talk without a
  topic
• Are you trying to sell something?
• Air freshener Use beautiful outdoor scenes
• Underarm deodorant Beautiful people (women and
  men)
• Computers Attractive pictures and technical
  specs
• Yourself See any book on writing resumes
• Are you trying to convey information?
• Use a clear organization with a table of contents
• For many topics, a FAQ is often appropriate

5
New media require new formats

• Books existed well before Gutenbergs 1456 Bible
• Here are some interface standards for books
• Books have covers
• Books are bound along the left edge (in the USA)
• The title is on the spine, top to bottom (in the
  USA)
• Books have a title page
• The pages of a book are numbered
• Odd-numbered pages are on the right
• The front matter is numbered with Roman numerals
• Textbooks have a table of contents and an index
• How long after Gutenberg did it take to establish
  these standards?
• Answer Gradually, over more than 100 years

6
Web pages are not books

• Standards are evolving rapidly, but are not
  finished
• The Web brings new abilities
• Publishing is cheap anyone can do it
• When I was a boy I was told that anybody could
  become President. I'm beginning to believe it. -
  Clarence S. Darrow
• Hyperlinks allow nonlinear access to information
• Search engines make finding information much
  easier
• I used to have hundreds of bookmarks now I use
  Google
• The Web brings new challenges
• Users can get lost in hyperspace
• Good navigation tools are essential
• Surfers flit on by, like TV channel surfers
• You have maybe ten seconds to convey your message

7
Very general suggestions

• Good writing was, is, and always will be
  important
• Everything you ever learned about writing well
  still applies
• Use a spell checker
• Bad spelling puts off good spellers
• Practically every piece of software includes a
  spell checker
• Dont use a grammar checker--they all stink
• If you are not a native English speaker, they may
  point out some trivial grammatical errors
• If you dont see the reason for their advice,
  its probably wrong
• Make each page stand by itself
• You dont know how someone got here
• Dont use page titles like Introduction that
  require context

8
Questions you should answer

• The reader should be able to discover
• Who wrote the page?
• You find a page on lung cancer. Was it written by
  (a) the American Medical Association, (b) someone
  who works for Philip Morris, or (3) a plumber in
  Hoboken?
• What is the page about?
• If you have nothing to say, dont say it
• Use a clear, short title--it may become a
  bookmark
• When was the page written/updated?
• You find a page about a great new drug available
  next month
• Another page describes the latest version of
  some software
• Where is the page?
• Who wrote the page? Who sponsors it?
• If I print the page out, will I ever find it on
  the Web again?

9
Build clear navigation aids

• When someone accesses your site
• What are they likely to be looking for?
• How sophisticated are they?
• Hardly anyone does enough user testing
• A common problem you find an interesting page,
  but you dont know what pages surround it
• Are pages organized in a simple and consistent
  way?
• Can the visitor find her way to the home page?
• Can the user tell if shes still in the same
  site?
• Button bars are good, but dont omit text links
• Avoid dead-end pages (those with no links)

10
Help visitors find pages in your site

• If you have many pages, you can use menu
  levels...
• Look at the table of contents in a textbook
  usually, there are main section headers, with
  subheaders
• ...but users do not like lots of little menus
• Studies show that users prefer dense menus with
  lots of choices over little, one-step-at-a-time
  menus
• Site maps (basically, an extensive table of
  contents) have become popular
• Not everyone loads graphics by default
• Image maps are nice, but keep the text links
  anyway
• Think about making pages available to the
  disabled
• Consider adding a search engine to your site
• Dont make it easy to accidentally leave your
  site
• Distinguish between local links and links that
  take the visitor offsite
• Give your pages a consistent look

11
Put the important stuff on top

• Web pages are usually bigger than the window they
  are viewed in
• The first thing visitors see is the top of your
  Web page
• Many visitors will never scroll down
• The top of a page should tell visitors what they
  need to know about the page
• If a visitor is lost inside your site, she may
  not notice links at the bottom of the page
• Often, links at top and bottom are a good idea
• This is especially true for a linear set of
  pages, where the links are Previous, Next, and
  (maybe) Home or Table of Contents

12
Organize your pages

• Any organization is better than no organization
• A hierarchy (tree) usually works best
• Put most important or most general concepts near
  the top
• Lower pages are more specific
• Trees shouldnt be too deep
• Users dont like to step down through multiple
  pages to find the one they want
• Trees shouldnt be flat
• Users dont like to wade through a huge list of
  links to find the one they want
• Draw a picture of your site!

13
Other organizations

• Grid

HTML XML XSLT
Lecture http//... http//... http//...
Links http//... http//... http//...
Assignment http//... http//... http//...

• Linear
• Pages to be read in order, with Previous and Next
  links
• This design is most often seen in tutorials, or
  in fiction

14
Graphics on your home page

• The home page is your intended starting point
  for visitors to your site
• Nice graphics make your page look better
• Complex graphics make your page load more slowly
• Who is your target audience?
• Potential clients
• Appearance is important...
• ...but most users wont wait more than 7 or 8
  seconds for a page to load
• Existing clients, students, employees
• Getting information quickly is most important

15
Updating sites

• Many types of sites must be updated frequently
• Using a New! graphic may help point out changes
• But how long does an item remain new?
• Dates on items are more informative
• If information is spread out over many pages, a
  central Whats New page may be a good idea
• I typically put dated announcements at the top
  (good) and add material at the bottom (maybe not
  so good)

16
FAQs

• For many sites a FAQ (Frequently Asked Questions)
  page, with answers, is very helpful
• A FAQ is especially helpful to beginners in an
  area
• The current best site seems to be
  http//www.faqs.org/
• Biggest problem with FAQs is that many of them
  are fakes
• A company puts out a FAQ about its product that
  obviously doesnt answer questions from real
  users
• What is the biggest benefit of using XYZ hair
  spray?
• Dont lie to your customers!

17
Design standards

• Without question, a company should have design
  standards for company Web pages
• Problems
• Established groups and individuals have already
  developed their own standards and are reluctant
  to change
• The wrong people may be put in charge of defining
  the design standards
• They may know little or nothing about existing
  standards
• They may decide on too many standards--things
  that may be a good idea individually, but dont
  work well together
• They may take forever to finish, so standards are
  coming any day now
• They have their own goals, and ignore or forget
  the user

18
Site covers

• A site cover is a page that comes before the home
  page
• Typically, they just add another mouse click and
  waste the users precious time
• If it doesnt add any value, users dont want to
  see it more than once
• An informational site, such as a newspaper, can
  have a cover that provides links to the various
  sections
• A reference site, such a s Yahoo!, should have
  its menu posted on the front door
• A handsome site cover may add interest to an art
  or entertainment site

19
Design principles

• In The Non-Designers Design Book Design and
  Typographic Principles for the Visual Novice,
  Robin Williams discusses these four principles
• Proximity Related items should be grouped
  together
• Alignment Nothing should be placed on the page
  arbitrarily--every item should have a visual
  connection with something else on the page
• Repetition Some aspect of the design should be
  repeated throughout the entire piece
• Contrast If two items are not exactly the same,
  make them different--really different.

20
Proximity

• Proximitynearnessis your best tool for
  organizing things on a page
• If things are close together, they appear to be
  related
• Therefore
• If things are related, they should be close
  together
• If things are not related, they should not be
  close together
• Avoid spacing everything equally
• Dont stick things in the corners or alone in the
  middle of a page
• Avoid having too many groups on a page
• Make sure headers look like headers, and things
  that arent headers dont look like headers

21
Alignment

• Alignment is literally lining thing up
• Good alignment helps to unify and organize the
  page
• You want to avoid the scattered all over look
• Left alignment tendsto happen naturallyin Web
  pages
• Right alignment isnot generallyas useful
• Center alignment tends tobe boring, and is
  especiallyugly when the lines are allabout the
  same length anyway
• Try to avoid more than one kind of alignment on a
  page

22
Repetition

• The purposes of repetition are
• To unify the page or group of pages
• To add visual interest
• Few things look more boring than long, unbroken
  pages of text
• Things that look boring often arent given a
  second look
• Repetition is like consistency, only more so
• You probably already try for consistent fonts,
  headers, etc.
• Some visual elements--backgrounds, icons,
  borders, horizontal rules--should be repeated
  throughout a Web page, or a related group of Web
  pages
• If your pages belong together, they should appear
  to belong together
• However, dont use so much repetition that it
  becomes annoying

23
Contrast

• Contrast is when two elements are clearly
  different
• You can create contrast by using different sizes
  of type
• You can create contrast by using different kinds
  of fonts
• You can use thin lines and thick lines
• You can use horizontal lines and vertical lines
• You can use contrasting colors cool (bluish) and
  warm (reddish) colors
• You can use widely spaced text and closely spaced
  text
• Dont be a wimp--make different elements really
  different
• There isnt much contrast between 12-point type
  and 14-point type

24
Lets do that again!

• Contrast is when two elements are clearly
  different
• You can create contrast by
• Using different sizes of type
• Using different kinds of fonts
• Using thin lines and thick lines
• Using horizontal lines and vertical lines
• Using contrasting colors cool (bluish) and warm
  (reddish) colors
• Using widely spaced text and closely spaced text
• Dont be a wimp--make different elements really
  different
• There isnt much contrast between 12-point type
  and 14-point type!

25
Types of fonts

• Serif Fonts

• Sans serif fonts -- no serifs
• Monospaced fonts -- all characters are the same
  width
• Display fonts -- not intended for lots of text
• EVEN IN A GOOD FONT, LARGE AMOUNTS OF TEXT IN ALL
  CAPITALS IS DIFFICULT TO READ

26
A few more simple principles

• Establish a visual hierarchy
• People first see the graphics, then the text
• Balance, organization, and visual contrast are
  vital
• Direct the readers eye
• People scan text left to right, top to bottom
• Only the top four inches may be visible
• Use pastel shades for backgrounds or minor
  elements
• Beware of distractions
• Garish illustrations and (especially) animated
  graphics or blinking text pull the users eyes
  away from the content
• If everything is emphasized, nothing is
  emphasized
• Be consistent
• Dont have things scattered all over your page
• Let your style evolve as you improve the page

27
Establish a consistent look

• Every page on your site should share some style
  elements with all the other pages
• The idea is that the user should know, without
  thinking about it, that shes still in the same
  site
• Use the same logo, or the same set of navigation
  buttons, on every page
• Use a consistent color scheme and set of fonts
• Your pages dont have to all look identical (and
  shouldnt), but they should have a common style
• CSS style sheets can be a big help in defining a
  consistent look
• But you need to test them on a variety of browsers

28
Legibility and readability

• Readability How easy it is to read a lot of text
• Legibility How easy it is to read headlines
• In general, a serif font is more readable (in
  medium sizes)
• Because of the coarse resolution of modern
  screens, a sans serif font is more readable in
  small sizes
• Very high contrast (difference in brightness, not
  color) makes text more readable
• Do not change the default size of body text the
  user has it set to the size she wants
• Increasing the size for headers or for emphasis
  is OK
• Dont use more than a couple of different fonts
• Usually, one serif font and one sans serif font
  is enough

29
Use tables

• HTML lttablegts are your best tool for arranging
  text and graphics on a page
• For simply arranging things, use tables without
  borders
• Use borders if you want it to look like a table
• Dont use pixel values for heights and
  widths--that takes too much freedom away from the
  user
• Use percentages instead

30
Types of graphics

• There only three kinds of graphics you can use on
  the Web
• GIF (Graphics Interchange Format)
• Good for pictures with only a few colors
• There are some legal problems involved
• JPG or JPEG (Joint Photographic Experts Group)
• Good for photographs
• PNG (Portable Network Graphics)
• Modern, fancy, good for everything
• Not supported by older browsers

31
GIF files

• GIF is the most common file format
• You can specify, in a GIF file, how many colors
  to use (2, 4, 8, 16, etc.)
• The fewer colors, the smaller the file
• This is great for charts, cartoons, etc.
• GIFs are lossless--you can exactly recreate the
  original image
• GIFs can be animated
• GIFs can be interlaced
• This allows pictures to appear quickly and get
  sharper
• GIFs can have a transparent color
• This lets you use arbitrary shapes on any
  background
• UNISYS owns the patent on GIFs, and has tried to
  make people pay for using them

32
JPG files

• JPEGs provide a superior compression scheme when
  there are color gradients in the image
• That is, for every photograph
• JPEGs are lossy-- some information is lost in the
  compression, and the information is interpolated
  (faked) when the picture is recreated
• You can set the compression ration--the more
  compression, the smaller the file, and the more
  information is lost
• JPEGs do a very good job of recreating
  photographs
• JPEGs dont do a good job of recreating diagrams
  and line drawings

33
PNG Graphics

• PNG has three main advantages
• Alpha channels you can have variable (partial)
  transparency
• Gamma correction, so you can get the same colors
  on different platforms
• Two-dimensional interlacing
• PNG also provides
• Better compression than GIF
• A less convenient way to do animations
• No legal hassles

34
The End