# Presentation: 109294

## CAP Web Sites 101

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

**Notes:**
Inform, entertain, recruit, instruct, showcase – members (cadets & officers), parents, teachers, community

## www.gocivilairpatrol.com

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

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

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

## Slide 9

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

## 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****                              ****Web Fonts**

## Slide 12

## 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**

## Slide 15

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

## Slide 23

## CAP Web Sites 101                         White Space

**CAP Web Sites 101****                         ****White Space**

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

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

- 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                         Writing Style

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

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

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

## 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](http://www.coffeecup.com/)_ ($50)
- Microsoft Expression (Front Page) & Adobe Dreamweaver
**IMPORTANT ANNOUNCEMENT!**

## New CAP Internal Site

**http://members.gocivilairpatrol.com**