Download Slide 1

Website Development
An Overview
for USPS Webmasters
Prepared by P/C Debra Allen, AP
Lake Murray Power Squadron, D/26
Updated September 2011
Website Development
Today’s 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
– Don’t 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
• Don’t 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, don’t 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 browsers
– Browser type
50
•
•
•
•
•
•
Internet Explorer – 45.02%
Firefox – 24.26%
Chrome – 17.66
Safari – 11.76%
Opera – 0.53%
Other – 0.77%
Based on August 2011 statistics
from gs.statcounter.com
45
40
35
30
25
20
15
10
5
0
Optimum Viewing
• Target the monitor resolution
– Popular options
•
•
•
•
•
1280 x 800 – 17.5%
1024 x 768 – 14.69%
1366 x 768 – 15.69%
1440 x 900 – 8.3%
1280 x 1024 – 7.67%
Based on August 2011 statistics
from gs.statcounter.com
Active Links
• Avoid the biggest mistakes: outdated
information and bad links
– If links don’t 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
• 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
256
•Transparency
•Animation
Buttons, banner
and text
.JPG
24-bit
16.7 million
Compression
(50:1)
Scanned
photos, people
.PNG
Up to 32-bit
More than
JPEG
•Transparency
•Compression
Any, but
supports only
newest
browsers
Image Editors
•
•
•
•
•
Photoshop (Adobe) – $699
Fireworks (Macromedia) – $299
Paint Shop Pro (Corel) – $99
There are alternatives to these retail prices
TechSoup.com offers affordable,
discounted software to non-profits
– CS5 Design Premium is $150 and includes
Photoshop, Fireworks and Dreamweaver
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
– Be sure you understand the shortcomings of
password protected documents
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 they’ve
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 more than 20 years 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.