Good HTML Style - PowerPoint PPT Presentation


PPT – Good HTML Style PowerPoint presentation | free to download - id: fc9d-MzMxN


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Good HTML Style


... visual elements--backgrounds, icons, borders, horizontal rules--should be ... arranging things, use tables without borders. Use borders if you want it to ... – PowerPoint PPT presentation

Number of Views:144
Avg rating:3.0/5.0
Slides: 35
Provided by: DavidMa5
Learn more at:
Tags: html | borders | good | style


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Good HTML Style

Good HTML Style
Style Guides
  • There are many HTML style guides on the Web
  • One of the best is from Yale, http//
  • This talk is based on that style guide
  • Another is from the W3C, http//
  • One of the more enjoyable sites
    is http//
  • 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

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
  • 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
  • Provide site maps and search facilities
  • International users
  • Use standard, easily understood language
  • Consider providing pages in a variety of
  • Avoid region-specific time and date formats, like

Know what youre trying to do
  • A page without a purpose is like a talk without a
  • Are you trying to sell something?
  • Air freshener Use beautiful outdoor scenes
  • Underarm deodorant Beautiful people (women and
  • Computers Attractive pictures and technical
  • 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

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
  • 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

Web pages are not books
  • Standards are evolving rapidly, but are not
  • 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
  • I used to have hundreds of bookmarks now I use
  • 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

Very general suggestions
  • Good writing was, is, and always will be
  • 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

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
  • What is the page about?
  • If you have nothing to say, dont say it
  • Use a clear, short title--it may become a
  • 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?

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
  • Can the visitor find her way to the home page?
  • Can the user tell if shes still in the same
  • Button bars are good, but dont omit text links
  • Avoid dead-end pages (those with no links)

Help visitors find pages in your site
  • If you have many pages, you can use menu
  • Look at the table of contents in a textbook
    usually, there are main section headers, with
  • ...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
  • 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
  • Think about making pages available to the
  • Consider adding a search engine to your site
  • Dont make it easy to accidentally leave your
  • Distinguish between local links and links that
    take the visitor offsite
  • Give your pages a consistent look

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

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!

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

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

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)

  • For many sites a FAQ (Frequently Asked Questions)
    page, with answers, is very helpful
  • A FAQ is especially helpful to beginners in an
  • The current best site seems to be
  • 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
  • What is the biggest benefit of using XYZ hair
  • Dont lie to your customers!

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
  • 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

Site covers
  • A site cover is a page that comes before the home
  • 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
  • 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

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
  • 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.

  • Proximitynearnessis your best tool for
    organizing things on a page
  • If things are close together, they appear to be
  • Therefore
  • If things are related, they should be close
  • 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

  • Alignment is literally lining thing up
  • Good alignment helps to unify and organize the
  • You want to avoid the scattered all over look
  • Left alignment tends to happen naturally in Web
  • Right alignment is not generally as useful
  • Center alignment tends to be boring, and is
    especially ugly when the lines are all about the
    same length anyway
  • Try to avoid more than one kind of alignment on a

  • 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
  • If your pages belong together, they should appear
    to belong together
  • However, dont use so much repetition that it
    becomes annoying

  • Contrast is when two elements are clearly
  • 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
  • Dont be a wimp--make different elements really
  • There isnt much contrast between 12-point type
    and 14-point type

Lets do that again!
  • Contrast is when two elements are clearly
  • 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
  • There isnt much contrast between 12-point type
    and 14-point type!

Types of fonts
  • Serif Fonts
  • Sans serif fonts -- no serifs
  • Monospaced fonts -- all characters are the same
  • Display fonts -- not intended for lots of text

A few more simple principles
  • Establish a visual hierarchy
  • People first see the graphics, then the text
  • Balance, organization, and visual contrast are
  • 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
  • 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
  • Be consistent
  • Dont have things scattered all over your page
  • Let your style evolve as you improve the page

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
  • 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

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

Use tables
  • HTML s are your best tool for arranging
    text and graphics on a page
  • For simply arranging things, use tables without
  • 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
  • Use percentages instead

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

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
  • GIFs can have a transparent color
  • This lets you use arbitrary shapes on any
  • UNISYS owns the patent on GIFs, and has tried to
    make people pay for using them

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
  • JPEGs dont do a good job of recreating diagrams
    and line drawings

PNG Graphics
  • PNG has three main advantages
  • Alpha channels you can have variable (partial)
  • 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

The End