Website Development

Todays Topics:
1. 2. 3. 4. 5. 6.

Planning or Redesigning a Website Tips on What to Avoid Elements of Good Web Design Optimizing Images Maximize the Power of Search Engines Resources

Website Planning
Answer some basic questions Who is your audience What is your goal How do you plan to maintain and update the website Evaluate the administrative implications of features that you want to use Identify a means of succession to insure availability of future webmasters

Your Audience
Define your target audience
Is the site for members only Is the site going to be used to recruit new members How will your audience use a website What level of technology is your audience using

Your Goal
Identify your goals and prioritize them Publicize member-only activities Publicize Public Boating Course Publicize civic contributions Internal PR tool to boost retention Remember, the Internet and your website are just tools

to use in achieving your goals

Additional Thoughts
There is no cookie cutter approach
A good website is a work in progress A good website should be easy to navigate with clean,

legible design Ultimately it should function as an efficient & easy means of exposure

Administrative Needs
Maintaining and updating Backup your site Dont do it alone Intricate features Do you have the knowledge, skill, time Can complicated functions be maintained by others Train others to assume responsibility in the future

Redesign; Or Not
Two elements to website design Graphic Design Structural Design Redesign if it fails to reflect your squadron
Redesign if it is not user-friendly Dont over design your pages are the visual benefits

of the design worth drawbacks it creates

Vital Elements
Information to attract people who share a common

interest Information to help new users feel connected to the site & to encourage return visits Contact information for the organization and for the webmaster

Pitfalls to Avoid
Too many words
Unreadable text Large graphics Long pages Animated images

Too Many Words

Studies show that people read about 25% as much text

on a monitor as on a printed page Write concisely Break up large chunks of information use the capability of the technology

Unreadable Text
Use appropriate font types and sizes
Select contrasting colors so your text does not get lost

in background colors or images Watch out for backgrounds

Use a color chart to test:

http://www.zspc.com/color/index-e.html Think about printing issues

Large Graphics
Too long to download, your visitors will not wait

around to see Downsize the image, dont just crop it Reuse graphics where possible

Long Pages
One or two screens of material per page results in

greater comprehension Organize longer articles into screen-size blocks and use links to move between them Some items require a single page, if so navigation can ease user use
Links within the page Links to return to the top of the page

Animated Images
Use restraint
Know your audience Do they find it annoying Does the animation have a purpose and does it achieve

that purpose Does it add to the experience This caution, applies to sound, too

Elements of Good Design

Quick-loading pages
Consistent pages Ease of navigation Browser safe Active links Frequent updates

Quick-loading Pages
Keep load time under one minute: Some experts say a

page should load within 8 seconds 3 click rule: the limit for clicking to reach your goals

Consistent Pages
100k is a good rule-of-thumb
Limit the amount of text 300-500 words is reasonable, experts say Important stuff at the top

Ease of Navigation
Navigation and menu structure vital The average visit lasts less than 30 seconds Limit top level navigation menus to 7-10 items

Nest other links on sub-menus Insure visitors knows where they are at all times Open off-site locations in new windows

Consistency in navigation & appearance helps identify

your site

Browsers
Target the browser
Accommodate variety of
2% 6%

browsers Browser type

2% Microsoft Firefox Netscape Other

Internet Explorer 90% Firefox Netscape & Non-Firefox Mozilla other

Based on a February 2005 survey published at statmarket.com

Optimum Viewing
Target the monitor resolution
Proper resolution 8% 800 x 600 10% 1024 x 768 1280 x 1024
28%
800 x 600 1024 x 768 1280 x 1024 Other

54%

Stats from thecounter.com/stats/2005/January/res.php

Active Links
Avoid the biggest mistakes: outdated information and

bad links
If links dont work, why use the site

Websites can offer positive and negative reinforcement Avoid shovelware only put material that

legitimately can be transferred to the website; not everything belongs on the web

Optimize Images
Crop the image Dont exceed 300-400 pixels in width Reduce the image resolution 72 pixels per inch maximum Reduce the number of colors in gifs, use web safe

colors
Try 128 instead of 216 or 256 216 common colors that a Mac and PC display correctly

Image Example
Here is an example of

how an image editor can help you clean up your graphics.

Image Types
Type Colors Supports Best for

.GIF 8-bit
.JPG 24-bit .PNG Up to 32-bit

256

Transparency Animation
Compression (50:1) Transparency Compression

Buttons, banner and text

Scanned photos, people Any, but supports only newest browsers

16.7 million

More than JPEG

Image Editors
Photoshop (Adobe) $649
Fireworks (Macromedia) $299 Image Composer (Microsoft) Shipped with Front Page 98 and 2000 Paint Shop Pro (Corel) $129

Search Engines
Make pages search friendly Place key words in these locations

Page title Meta tags Description Keywords Headings First paragraph Alt tags

Searching: Page Title

Up to 255 characters
First 64 are very important Every page needs a good descriptive title
<html> <head> <title>Web page title</title> <meta name=description content=Description goes here.> <meta name=keyword content=List of keywords goes here.> </head>

Searching: META Tags

Description 25 words or less Keywords 255 characters or less Concentrate on description Lowercase letters Separate tags for each page Commas, with or without Keywords also should be in the body of the page

Searching: Submission Tips

Treat search engine submission and directory

submissions separately Submit individual web pages to search engines. Submit your home page to the major directories. 5-7 web pages at a time to the major search engines to avoid a spam penalty Get main URL accepted into a directory before trying to get other pages listed

Offline Promotion
Use URL in your squadron newsletter
Use URL in Safe Boating Course promotional

materials Use URL on your squadron letterhead Send news release to local media about your website Print URL on promotional items

Website Evolution
Content development Seek continuing input from your members Regular updating New & expanded content Create support by building awareness Promote availability

Legal Issues
USPS rules and regulations
Copyright laws apply Privacy & security of your members

Accessibility
Use logically organized content, headings, lists &

consistent structure, alt tags to describe images and animations Use text that makes sense Validate html coding Complete guidelines & checklist:
www.w3.org/WAI

Finally
A good website may not jump off the page, but it should reassure visitors that theyve come to the right place and it should work well on all major browsers.

Resources

www.tucows.com www.wpdfd.com www.echoecho.com www.webdeveloper.com/html/html_metatags.html www.searchenginewatch.com www.htmlhelp.com/reference/css/ http://imagiware.com/RxHTML.cgi www.webmonkey.com www.htmlgoodies.com www.geocities.com/siliconvalley/campus/1924/ Google the term: web design tutorial

Acknowledgements
Information and insight for this presentation were gleamed from over a decade of experience in web development at the University of South Carolina.
In addition, I would like to recognize the following sources for materials in this presentation:

Mike Shores, trainer with CompuMaster Material from www.techsoup.org, including articles by Susan Tenby, Terry Grunwald, Rick Christ and ONE/Northwest Web design workshop materials produced by Rockhurst University Continuing Education Center, Inc.