introducing students to understanding websites

1. CREATING A WEBSITE
MCJ 200

2. PURPOSE
 What is the purpose of your website?
 Who is your intended audience?
 How to get people to your website?
 What do you expect them to do once on
your website? Are they doing it?
 What is the most popular content?

3. KEY ELEMENTS OF THE WEBSITE
 Title (can use
Photoshop)
 Headlines= serif
 Stories= sans serif
 Pictures
 Sections
 Navigation tabs
 Contact info
 Standard Layout
 Average 3 columns
 Z-pattern
 2-3 standard fonts

4. PLANNING
 Make it Easy to Find Stuff
 Put some thought into organization.
 Minimize clicking
 Include a way to get back to the home page,
on every page
 Include a menu on every page
 Readers must have a clear understanding
of where they are in your site and how to get
back “home”

5. CONTENT
 Use Graphics that
fit content of page
 Graphics are small
 Internet speeds
 Bandwidths
 Loading time
 Images= 72 dpi
 Don't distract your
visitors with blinking
or scrolling text,
animated GIFs, or
auto-loading sound

6. DISTRACTIONS
 Animation and sounds are distracting
 Avoid scrolling text
 Don't put text over image backgrounds
 Don't let flashy multimedia ruin your site
 Flashy graphics and multimedia controls may
look nice, but they're bad when they make it
hard for visitors to get the information they
want from your site

7. PAGES
 No more than 11 inches wide
 Pages are based on percentages/pixels
 99% of users have screens that are at least
1024x768 pixels
 Average of 800 pixels wide
 No more than 2 scrolls down

8. BACKGROUND
 Use contrasting colors or simple backgrounds to
make your text easy to read (Muted Colors)
 It's hard to read light text on a light background,
or dark text on a dark background.
 There are also some color combinations that
don't work.
 Avoid white, black, neon colors
 Use black fonts
 Muted Color Designs

10. LINKS
 Don't underline words if they're not links
 Make links blue or underlined, or both
 Users expect links in body copy to be blue and
underlined, because that's the way they appear on
99% of other websites.
 If you use a different color then at least the
underline is a clue that a link is a link.
 Likewise, if you remove the underline but keep the
link blue, then the color is the clue that a link is a
link.
 Explain what you're linking to.
 Don't open internal links in a new window.

11. LINKS
 Right way
 Check out our product specials, best sellers,
and gift ideas
 Wrong way
 For product specials, click here. For best
sellers click here. For gift ideas click here.

12. LINKS
 Test your links (internal, external)
 Remove dead external links periodically
 Include a "Last Modified" date on the top or
bottom of your pages