Download Designing Your Web Site Course No. 742

Unit Web Sites and Newsletters
Course G305
Mike Brown, T.80 Cortland
What do you need to build a website?
• Web space on an internet
service provider’s computer.
• An internet access account.
• Editing software :
MS FrontPage
Word processor (MSWord)
MS Publisher
Netscape Composer
CuteHTML
• FTP Software (CuteFTP)
• Photo editing software
• Scanner and/or Digital Camera
Why Build a Web Site?
Why Build a Web Site?
• Recruiting
Why Build a Web Site?
• Recruiting
• Publicity for an Event or Facility
Why Build a Web Site?
• Recruiting
• Publicity for an Event or Facility
• Communications with members
Why Build a Web Site?
•
•
•
•
Recruiting
Publicity for an Event or Facility
Communications with members
Teach skills
Why Build a Web Site?
•
•
•
•
•
Recruiting
Publicity for an Event or Facility
Communications with members
Teach skills
Preserve History
Why Build a Web Site?
•
•
•
•
•
•
Recruiting
Publicity for an Event or Facility
Communications with members
Teach skills
Preserve History
Promote Scouting in general
Why Build a Web Site?
•
•
•
•
•
•
•
Recruiting
Publicity for an Event or Facility
Communications with members
Teach skills
Preserve History
Promote Scouting in general
Ego
Who is our target audience?
What is our audience looking
for on our website?
•Content
•Content
•Content
What to put on my Unit web page?
• Meeting Information:
Where / When
• Contact Information
• Annual Schedule
• Coming Events
• Newsletter
• Photo Album
•
•
•
•
•
•
•
Stories of Activities
Troop History
Troop Policies
Troop Roster(?)
Instructional Material
Advancement Reqt
Links to useful sites
How do we organize the content?
• Single large page
How do we organize the content?
• Single large page
• Chain of smaller pages
Main
Sub1
Sub2
Sub3
Sub4
How do we organize the content?
• Single large page
• Chain of smaller pages
Main
Sub1
Sub2
Sub3
Sub4
•“Tree” of pages
Main
Sked
Camp
Forms
Photos
Our Trip
Trip 1
Trip 2
Links
Camp Barton
Web Site
Main Page
Waterfront
Scoutcraft
Nature
History
Forms
Shooting Sports
Make your
main page
count!
How do I use frames?
Index Frame
Main Frame
Frame2
Frame1
Frame3
Frame4
Frame 2
Frame 5
Frame 1
Frame 3
Frame 6
Scrolling!
Frame 4
How do I use frames?
Don’t!
How do we provide this content?
• Text
Text
Watch what you write...
• Spend 90% of your time planning,
and the other 10% writing.
• Remember your audience.
• Remember your purpose.
• Use short paragraphs.
• And complete sentences.
• Eschew multisyllabic verbiage.
• Make sure you check speling and grammar.
• Passive voice should be avoided
• Link rather than copy.
• “Give credit for quotes, and ask permission.” - Anon.
Watch how you present the text.
• Reverse type is hard to read and
can’t be printed. Don’t use it.
• Text should contrast with background.
• Remember the color-blind.
• Don’t mix type fonts. In fact, don’t use fonts at all.
•
•
•
•
Use Italics or bold for emphasis.
Avoid underlining. Especially blue.
ALL CAPS IS HARD TO READ, TOO.
Never, ever, use flashing type!
How do we provide this content?
• Text
• Graphics
Use graphics for interest...
...but don’t get carried away.
Caution:
Use animated graphics sparingly!
Fancy Dividers are
getting old...
Pick one and stick with it
or just use the standard <hr>.
Background graphics can
enhance a site
but be careful...
Background graphics can
enhance a site
but be careful...
Don’t make the site hard to read.
How do we provide this content?
• Text
• Graphics
• Photographs
Photographs...
... do’s and don’ts
Use images of “reasonable” size
Try to keep individual images under 20K
Total size of any page should be 64K or less
No image larger than 535 x 400 pixels
Optimal size is 250 wide, at most.
Keep useful image large
We’ve been canoeing! (128K)
Use Thumbnails
Choose action photos over static groups.
Choose high-quality photos, and
use a photo-editing program to
make them better.
Final thoughts on photos...
•
•
•
•
Use .jpg for color, grey scale.
Use .gif for line art, or if need transparency
Compare formats, and pick smallest file.
Don’t use effects that look like buttons,
unless they are...
• Watch copyright...
Inlining: Inclusion by link
How do we provide this content?
•
•
•
•
Text
Graphics
Photographs
Links
Linking Considerations
• Netiquette requires that you ask permission first.
• Be sure link is appropriate.
• Properly identify external links.
• A brief description is helpful.
• Where to find links?
• Check links periodically.
• Web rings...
The dreaded “URL not found”
In-site Navigation
Get Yourself Known
• Request links from other sites
• Submit your site to search engines and
directories
Final Considerations
Protect your message...
Avoid full
Scout names
Not everyone has the latest and greatest...
• Avoid browser-specific commands.
• If “this site is viewed best with Netscape 7.0
or IE 6” - it’s too complicated...
• Flash is evil!
• Build pages for 800 x 600 resolution.
• Avoid specifying fonts.
• Do not assume everyone has a sound card.
Test your site!
A few pet peeves...
What’s he looking at?
so what?
Logomania: The desire to add irrelevant
logos all over web pages.
Splash Screens
Mystery Meat Navigation
Try for
Fast, Fast, Fast loading!
• Use more small pages, rather than few large pages
• Limit picture size and count
• Avoid graphics if you can use text.
• Always specify image size
• Resize picture before uploading – do not size in web page
• Avoid JAVA, counters, CGI’s, external pictures.
Consider Accessibility
from “Working with Scouts with Disabilities
1. Maintain a standard page layout throughout the site
2. Design for device-independence
3. Do not use frames
4. Ensure that documents are clear and simple
5. Organize content logically and clearly
6. When applicable, include textual links within web pages
(e.g. next page, return to home page, etc)
7. Use a standard set of navigational text
8. Provide a text-only version of all pages
9. Provide alternate text (ALT-Text) and/or image tags for all
images, pictures, and graphical bullets.
10. Provide for alternate versions of forms
Consider Accessibility
from “Working with Scouts with Disabilities
11. Provide text equivalents for all non-text elements
(i.e., images, animations, audio, video)
12. Provide summaries of graphs and charts
13. Don't rely on color alone and ensure that all information
conveyed with color is also available without color
14. Provide alternative content for features (e.g., applets
or plug-ins) that may not be supported
15. Hypertext links are descriptive
16. Forms are accessible by download
17. Avoid default text entry
18. Avoid background patterns
19. Background color contrasts well with the lettering
to maintain readability
Consider Accessibility
from “Working with Scouts with Disabilities
20. Include outlines at the beginning of documents. Outlines
identify the relevant features of a document, such as a
general description of its structure, function, or content;
21. Avoid the use of non-standard HTML formats
22. Avoid special tags
23. Provide for a description for all abbreviations and acronyms
So you’ve got a website.
Now what?
Keep it up!
Avoid Flags that your site is out of date
“Last Updated”… a long time ago
Avoid Flags that your site is out of date
“Last Updated”… a long time ago
Text references to out-of-date material
This page
downloaded
March 7, 2004
Avoid Flags that your site is out of date
“Last Updated”… a long time ago
Text references to out-of-date material
Dated Forum and Guestbook Postings
Avoid Flags that your site is out of date
“Last Updated”… a long time ago
Text references to out-of-date material
Dated Forum and Guestbook Postings
Use of Current Slang
Static Style Elements
Static Content
www.webpagesthatsuck.com
Newsletters
• Why have a newsletter?
• How often?
• Who does it?
• How to distribute?
A few practical tips…
• “See the above” – same rules
apply as for web pages
• Use columns or smaller pages
• Typography should enhance,
not distract.
• Include contact information
• Leaders should review content