CAP Web Sites 101
PAO Academy
Aug. 5-6, 2008 @ Kissimmee, Fla.
Jim Tynan
Deputy Director of Creative Services
CAP Web Sites 101
Road Map
Purpose
Basic Design Concepts
– Navigation
– Web fonts & text presentation
– Page size & layout
– Repetition & contrast
– White space
– Writing style
Web Tips
New CAP Internal Site
CAP Web Sites 101
Web Humor
You know you’re a Web designer when …
You have bags under your eyes so big you’d have to
check them in at Logan Airport
You are pro-facebook because 95% of the myspace
pages burn your retinas
Your hand is permanently stuck in the shape of a mouse
You practically take caffeine intravenously
You spend $200 on a font for your personal website
because “it’s the only one where the lower-case g is just
right!”
Looking at a menu make you go “hmmm, ITC Baskerville
italic” rather than “mmmm, lunch!”
You know that “bleeding” doesn’t hurt
When deciding on the right crop doesn’t involve a choice
between corn or wheat
CAP Web Sites 101
Purpose
First step in designing a Web site
is to define it
What is the site’s purpose?
– Inform, entertain, recruit, instruct, showcase
Who is your audience?
– Members, parents, teachers, community,
emergency response officials
How will the site serve your visitors?
– Facilitate, direct, links, communication (blogs),
command involvement
www.gocivilairpatrol.com
CAP Web Sites 101
Navigation
Several basic styles of navigation
identified by position and orientation on
a page
– Top, left side, right side, bottom, horizontal,
vertical
Top and left side navigation most
common
Bottom navigation is used when pages
are long
– Eliminates the need to scroll back to the top of a
page to access a link
CAP Web Sites 101
Navigation
On complicated sites divide navigation
into primary and secondary categories
– Putting all the possible links, both primary and
secondary, on one page makes page far too
complicated and nearly impossible to use
CAP Web Sites 101
Navigation
CAP Web Sites 101
Web Fonts
Text in Web pages is displayed by browsers using
the fonts available in the viewer's computer
– Most PC users have Arial and Times New Roman
– Apple computers usually have Helvetica and Times
– Arial is similar to Helvetica and Times is similar to Times
New Roman
– Vast majority of text presented on Web pages is limited to
these fonts for both practical and technical reasons
Headlines and main topic headers use a sans
serif font that is easy to read
Text body a serif font, such as Times or Times
New Roman
– Considered easy to read in smaller size
CAP Web Sites 101
Web Fonts
Many designers find the standard Times,
Times New Roman, Arial, Helvetica fonts to
be dull and will try to improve a site by
using alternative fonts
CAP Web Sites 101
Text Presentation
Web is visual medium and the main method
on information presentation is text
Normally, people do not read text one word at
a time. Text is read in groups of words. The
size of the text is a key element in
determining how easy it is to read sentences
– Large text is just as difficult to read as text that is
too small
– Large text is hard to read because people can
only read one or two words at a time
CAP Web Sites 101
Text Presentation
Small text is difficult to
read because many
computer screens
cannot clearly display
the tiny characters.
Also, small print is hard
to see under the best of
circumstances
CAP Web Sites 101
Text Presentation
CAP Web Sites 101
Text Presentation
You may be a Web-design redneck …
If you think a light bulb moment is when you open the refrigerator door.
If you think a JPEG is a large party kegger.
If you think Web sites are where lots of spiders hang out.
If you think Photoshop is a new form of vocational training.
If you think a complimentary color scheme is plaids and stripes.
If you think Clipart is something you cut out of the Sunday funnies.
If you think toner is rubbed on before going outside.
If you think software is your under garments after washing with fabric softener.
If you think typography is related to the hill behind your house.
If you think InDesign is a new wave rock band, you might be a design redneck.
If you think advertising is a new way to pick up chicks.
If you think TV Guide qualifies as a reference manual.
If you think copyright is a term from your Hooked on Phonics lessons.
If you think Gestalt is a blessing in German for sneezing, you might be a design redneck.
You may be a design redneck if you think AA stands for something besides an Associates degree.
If you think typography is related to the hill behind your house.
If you think InDesign is a new wave rock band, you might be a design redneck.
If you think advertising is a new way to pick up chicks.
If you think TV Guide qualifies as a reference manual.
If you think copyright is a term from your Hooked on Phonics lessons.
If you think Gestalt is a blessing in German for sneezing, you might be a design redneck.
You may be a design redneck if you think AA stands for something besides an Associates degree.
CAP Web Sites 101
Text Presentation
You may be a Web-design redneck …
If you think typography is related to the hill
behind your house
If you think a JPEG is a large party kegger
If you think Web sites are where lots of spiders
hang out
If you think TV Guide qualifies as a reference
manual
CAP Web Sites 101
Page Size & Layout
A challenge for Web builders is the
variability of screen sizes
Decision based on several factors
– Most computer monitors are set for a width of
1024 pixels or wider
– Many older monitors, especially those smaller
than 19", are set at a width of 800 pixels
– Some may be at 640 pixels
– RECOMMENDATION: 1024x768 or 800x600
CAP Web Sites 101
Repetition
Repetition is not only saying the same
thing several times to get a point
across. It is also the use of a consistent
theme throughout a Web site
– While all the pages on a Web site do not have to
be exactly the same, there should be enough
similarities to create a consistent look and feel to
the site
– This consistency is one of the things that help
make a site easy to navigate
CAP Web Sites 101
Contrast
Most obvious example of contrast is the color of
text against a background. It is much easier to
read text that contrasts highly with the
background
Tests indicate white wording on a black
background is harder to read than the black text
on a white background
High contrast between text and background
makes the text easier to read
– Black text on white easiest
– White on black, even though it is high contrast, is harder to
read
– Certain color combinations, such as red and blue, should
be avoided because they result in extremely high
perception problems
This is a good example of text and background not having enough contrast!
CAP Web Sites 101
White Space
Note: White space
isn't always white!
– “White space" is a
graphics design term
and it refers to the
space between
objects in a design
– Area between text
and a photograph is
"white space" even it
is another color
CAP Web Sites 101
White Space
CAP Web Sites 101
White Space
CAP Web Sites 101
Writing Style
People rarely read Web pages
word by word
– They scan the page, picking out individual words
and sentences
In one research test, 79 percent of test users always
scanned any new page they came across; only 16
percent read word-by-word
CAP Web Sites 101
Writing Style
Web pages have to employ scannable text
– Highlight key words with typeface and color
variations
– Meaningful sub-headings (not "clever" ones)
– Bulleted lists
– One idea per paragraph (users will skip over any
additional ideas if they are not caught by the first
few words in the paragraph)
– Use the inverted pyramid style, starting with the
conclusion
– Half the word count (or less) than conventional
writing
CAP Web Sites 101
Writing Style
CAP Web Sites 101
Web Tips
"This site best viewed with _____”
– Don't suggest to your visitors that their
monitors are set wrong or that they are
using the wrong browser. Sites should be
designed to work right on all combinations
of equipment and software
"Under Construction”
– Web sites are assumed to be periodically
updated, changed, or otherwise always
“under construction.” This just annoys
people. You are telling them that you'd
rather aggravate them than finish the site.
Remember, people take detours around
roads that are under construction
CAP Web Sites 101
Web Tips
Background music
– Takes too long to download, many people cannot
hear it, and it will probably sound bad
Animated GIFS
– Old fashioned, take time to download
– When carefully selected and chosen for a
specific goal or purpose they can be effective
Scrolling text or marquees
– Often can’t be seen because browsers don't run
the JavaScript that makes them work or your
page's visitors might have JavaScript turned off
CAP Web Sites 101
Web Tips
Splash pages
– Latest element to be classified as obsolete
– Usually involves downloading a "useless
page" that has no pertinent information
outside of a "Click Here" or "Enter" button
– If you’re going to use one, make sure your
splash page has some useful information
Content is king!
– Create content that relates to your purpose
– Solid links
CAP Web Sites 101
Web Tips
Avoid lengthy scrolling
Don’t copy an existing site design
– But use it as a starting point
No broken links – no broken images
Images in jpg or gif format
– Pay attention to loading times, file sizes
Provide contact info link on every
page
– Unit info, phone numbers, e-mail addresses,
etc.
CAP Web Sites 101
Web Tips
Identify your unit info on front page
CAP Web Sites 101
Web Tips
Use a copyright notice
– © 2008 by Maxwell Composite Squadron
Every page links back to home page
– Bottom-line navigation
Don’t use “under construction”
Web software?
– Nvu (EN-VIEW) @ www.nvu.com (Mozilla)
– CoffeCup 2006 @ www.coffeecup.com ($50)
– Microsoft Expression (Front Page) & Adobe
Dreamweaver
IMPORTANT ANNOUNCEMENT!
New CAP Internal Site
http://members.gocivilairpatrol.com