1. Sun Foundation Web Design Guidelines and Style Book
What is the goal of this stylebook?
Our aim is to create a user-centered design model that will keep
current users and draw new ones.
Who is the audience for this stylebook?
Our stylebook is addressed to all the volunteers who will dedicate
their time to updating and maintaining the Sun Foundation site.
Table of Contents
P. 2. Introduction: How to Use Guidelines.
P. 3. Planning: How to Get Started.
P. 4. Design: How to Create the Desired Effect
P. 5 - 10. Production: How to Build the Pieces.
P. 11. Maintenance: How to Keep Users Coming Back.
P. 12 - 14. Assessment: How to Evaluate the Site.
P. 15. Bibliography: Research Used to Develop This Style Book.

2. P. 2. Introduction
How should these guidelines be used?
 To provide the best web design solutions, always use our
guidelines with a user-centered mindset.
 Specifically, employ user feedback to determine if there is
a better solution than the one offered here.
 Always consider how a decision will impact the user.
How are these guidelines organized?
 The organization is according to the web site
development process.
 There are5 phases in this process: Planning,
Design, Production, Maintenance, and Assessment.
What are these guidelines based on?
 The basis is current, published research in the field
of web design.
 Refer to the Bibliography.
How can I print these guidelines?
 A printable version of the Sun Foundation Web Design
Guidelines and Style Book has been provided.
 You will find the link at the bottom of the index page.

3. P. 3. Planning
What do I want the site to accomplish?
 The site should effectively communicate the identity, credibility,
and purpose of the Sun Foundation.
 It should also successfully recruit both students and volunteers
to participate in Sun Foundation programs.
 This should be achieved by a clear explanation of the above
elements to users.
 In addition, plan ways to make the site useful, relevant,
interesting and engaging to users.
Who are my users, and what do they want and need?
 Users come from a rural area and use small monitors,
slow modems, and usually have older I. E. or Netscape
browsers. They include people of all ages.
 They need a site that loads quickly with limits on file size
and color settings. Specifically, create images to load
progressively. Code them to include height and width
specifications, and include alt tags. Exclude frames so
users can bookmark easily.
 They want important information to be the easiest to find.
They also want to easily perform tasks: volunteering,
registering for classes and researching topics of interest.
How can I take advantage of the web medium?
 Select a tone that is at times serious and at times fun.
 Select a visual presentation that addresses the artistic and earthy
quality of the foundation.
 Provide search features and links to similar sites.
 Provide ways to actively engage users.
 Create quality, thought provoking content without bias.

4. P. 4. Design
Is the home page designed effectively?
 It tells visitors what the site does
 It offers a directory of the site’s main contents.
 It offers a summary of the most important news and promotions.
 It provides a search feature.
Does navigation design enable users to move around easily?
 Labels clearly indicate link function.
 Links look the same, are in the same place, and go the same
place from/on every page.
 Each page has the same link to home and high-level site
categories.
 Links don’t distract from page title or graphics.
 Site map is provided.
Is content organized so users easily find what they need?
 Use effective headings that tell users what follows.
 Use inverted pyramid writing style, and limit/chunk text.
 Use abstracts or contents tables at the top of long pages.
 Separate links from text blocks.
 Design for readability: font Arial, 12pt. or higher, and
paragraphs aligned left.
 Provide a way to print related pages.
What consistent, visual style is used to appeal to my audience?
 The image-safe area is 600x400 pixels to avoid scroll.
 The top and left parts of all pages are for identity and
navigation.
 Images project an identity of nature and artistry.
 Content is presented efficiently and clutter-free.

5. P. 5. Production
How do you prepare the site?
 Use the following directory structure:
The Sun Foundation
Home Page
• http://www.sunfoundation.org/index.htm
Purpose
• http://www.sunfoundation.org/index.htm
Mission
• http://www.sunfoundation.org/index.htm
List of Major Contributors
• http://www.sunfoundation.org/index.htm
Historical Background
• http://www.sunfoundation.org/index.htm
Strategic Targets
• http://www.sunfoundation.org/Strategic_Targets.htm
References
• http://www.sunfoundation.org/BioDiversity/Index.htm
Links
• Ants
• http://www.sunfoundation.org/BioDiversity/ants.htm
• Links
• http://www.sunfoundation.org/BioDiversity/links.htm
• Tools
• http://www.sunfoundation.org/BioDiversity/tools.htm

6. Calendar of Events
• http://www.sunfoundation.org/Calendar.htm
Staff Bios Page
• http://www.sunfoundation.org/Board_Staff_Bio.htm
Links
P. 6. Production cont.
How do you prepare the site? cont.
 Use the following directory structure: cont.
• Administrative Bios Page
• http://www.sunfoundation.org/Key_Personnel_Biographies.htm
• (Key Biographies)
• http://www.sunfoundation.org/Key_Personnel_Biographies.htm
• Board Members
• http://www.sunfoundation.org/SUN_FOUNDATION_BOARD_MEMBERS.htm
Programs
• http://www.sunfoundation.org/Programs%20and%20Services.htm
Links
• Clean Water Celebration
• http://www.sunfoundation.org/Clean%20Water.htm
• Funky Frogfest
• http://www.sunfoundation.org/Clean%20Water.htm#frogfest
• Organtic BioHumas Farming
• http://www.sunfoundation.org/OrganicFarming.htm
• Living Upstream
• http://www.sunfoundation.org/Living%20Upstream.htm
• School Regranting Program
• http://www.sunfoundation.org/Regranting%20Program.htm
• Blacksmithing Workshops
• http://www.sunfoundation.org/Blacksmithing.htm
Links
• Beginning

7. P. 7. Production cont.
How do you prepare the site? cont.
 Use the following directory structure: cont.
• http://www.sunfoundation.org/Blacksmithing.htm#beginning
• Trammel Lighting Devices
• http://www.sunfoundation.org/Blacksmithing.htm#trammel
• Flora and Design
• http://www.sunfoundation.org/Blacksmithing.htm#flora
Tour of the Grounds
• http://www.sunfoundation.org/tour%20the%20grounds.htm
Links
• Rock and Fossil Collecting
• http://www.sunfoundation.org/Rock_Fossil%20Collecting.htm
• Ceramics
• http://www.sunfoundation.org/Ceramics.htm
• Insects
• http://www.sunfoundation.org/Insects.htm
• Blackfeet Tepe
• http://www.sunfoundation.org/Tipi.htm
• Pavilion
• http://www.sunfoundation.org/Pavilion.htm
• Performance Barn
• http://www.sunfoundation.org/Performance%20Barn.htm
• Great White Oak
• http://www.sunfoundation.org/White%20Oak.htm
P. 8. Production cont.
How do you prepare the site? cont.
 Use the following directory structure: cont.
• Signed Boulder
• http://www.sunfoundation.org/Boulder.htm

8. Membership
• http://www.sunfoundation.org/Membership.htm
Link
• Individual Contribution Form
• http://www.sunfoundation.org/Contrib_Form_Indiv.htm
• Business Contribution Form
• http://www.sunfoundation.org/Contrib_Form_Bus.htm
• Arts and Science In The Woods Registration Form
• http://www.sunfoundation.org/2000ASW_Registration.htm
• Art And Science Consent Form
• http://www.sunfoundation.org/Consent_Form.htm
• Alternative Ways of Giving
• http://www.sunfoundation.org/ways_of_giving.htm
NewsLetter
• http://www.sunfoundation.org/Newsletter.htm
Links
• Clean Water Celebration
• http://www.sunfoundation.org/Clean_Water.htm
• Living Upstream
• http://www.sunfoundation.org/Living_Upstream.htm
• Organic BioFarming
P. 9. Production cont.
How do you prepare the site? cont.
 Use the following directory structure: cont.
• http://www.sunfoundation.org/OrganicFarming.htm
• School Regranting Program
• http://www.sunfoundation.org/Regranting_Program.htm
• Art And Science In the Woods Program
• http://www.sunfoundation.org/98ASW_Details.htm
• Art and Science In th Woods Class List
• http://www.sunfoundation.org/98ASW_Classes.htm
• Art and Science In th Woods Sponsors
• http://www.sunfoundation.org/98ASW_Sponsors.htm

9. • Wish List
• http://www.sunfoundation.org/98ASW_Wish_List.htm
Sponsors
• http://www.sunfoundation.org/Sponsors.htm
Link
• Art and Science In the Woods Sponsors
• http://www.sunfoundation.org/2000ASW_Sponsors.htm
Feedback
• http://www.sunfoundation.org/feedback.htm
Table Of Contents
• http://www.sunfoundation.org/toc.htm
 Use the above file naming conventions so names describe
contents, and you know what files contain without opening.
 Use generated page templates.
 Separate content from interface.
P. 10. Production cont.
How do you prepare the site? cont.
 Make content printable separately.
 Use relative links – not full URLs so links
test easier.
 Use meta tags with useful key words and
page descriptions.
How do you prepare images?
 Use jpg for photos and gif for limited colors.

10.  Reduce file size by using smallest images
that still look nice.
 Reduce color palate as much as is practical.
 Use 72dpi files of 5k or smaller.
 Have 20k or less total on image files per page.
 Reuse images to take advantage of browser cache.
How do you achieve final testing?
 A 28.8k modem should load page in 15 seconds.
 Check the site in Internet Explorer, Netscape, and Opera.
 Test the site on the destination server.
 Observe users accomplishing a set of tasks.
 Make a backup CD.
P. 11. Maintenance
What do you need to do now that the site is up and running?
 Tell users what’s new when content changes.
 Check and maintain links weekly.
 Respond to users who give feedback.
 Track site activity monthly using ***ask mark***
 Adapt the site every three months applying user feedback
and site activity statistics to update for usability.
How do you continue to attract and engage users?

11.  Update meta tags when appropriate.
 Announce the site to relevant news groups and bulletin boards.
 Advertise on major sites.
 Advertise in magazines, on radio and on television.
P. 12. Assessment
When do you use this assessment tool?
 Use this tool prior to any major site revisions.
 Use this tool after any major site revisions.
How do you use this assessment tool?
 The following is an example using the tool on
the currently (2-18-01) published Sun Foundation site.
 Successful assessment should be 90% or higher Yes.
 Current site assessment is 21% Yes.

12. Sun Foundation Site Analysis Check-list:
1. Does the home page tell visitors what the site does? No
2. Does the home page offer a directory of the site’s main contents? Yes
3. Does the home page offer a summary of the most important news and No
promotions?
4. Does the home page provide a search feature? No
5. Does the site have consistent and effective navigation including a site map, No
and appropriate links to other primary pages?
6. Does the site have internal and external search features? No
7. Does the site use standard link colors (blue with purple or red visited) with no No
orphaned pages or broken links?
8. Are navigation and information separated? No
9. Does the site provide links to related sites? Yes
10. Does the site provide the proper Sun Foundation identity and purpose? Yes
11. Does the site establish credibility for the Sun Foundation? Yes
12. Does the site provide news coverage about Sun Foundation events? No
13. Is the site valuable, useful, or fun? Yes
14. Is the site innovative? No
15. Does the site involve the visitor and does it respond to the visitor? No
16. Does the writing engage the reader and provoke thought? No
17. Does the site provide quality content? Yes
18. Is the content free of bias (gender, race, religion, etc.)? Yes
19. Is the site visually appealing? No
20. Does the site get and sustain the user’s attention? No
21. Do the design and style reflect and compliment the content? No
22. Do the design and style of the site enhance the delivery of information? No
23. Is there consistency in the design format? No
24. Are the pages clean and uncluttered? No
25. Is the site properly organized so that primary topics are separated and similar No
subtopics are linked appropriately?
26. Are the most frequently visited pages easiest to access? Yes
27. Is there a limit on the content of each area? No
28. Is the content organized in inverted pyramid format? No
29. Is text chunked and formatted for readability? No
30. Is there an abstract or Table of Contents at the top of all long pages? No
31. Are headers useful? No
32. Do the pages load in 15 seconds or less? Yes
33. Does the site look appropriate in a reasonable variety of browsers? Yes
34. Does the site utilize simple, sensible, lowercase URL’s? No
35. Does the site exclude framed pages that are difficult to bookmark, etc.? Yes
36. Does the site avoid multiple fonts and new technology that users are not No
prepared to use?

13. 37. Does the site require minimal scroll even with small monitors? No
38. Does the site avoid distractions like continuous animation or sound files? Yes
39. Is there a text only option for viewing? No
40. Is it possible to print content without navigation or other unnecessary objects? No
41. Is the author of each page clearly identified? No
42. Is the site updated so all information is current? No
43. Is the site properly spell checked? No

14. P. 15. Bibliography
Brown , Luanne. On the Road to Good Web Design
http://msdn.microsoft.com/workshop/design/layout/girvin.asp 1996.
Henke, Harold. Design of HCIzine Web Page
http://www.scis.nova.edu/~henkeh/assign2.htm 1996.
Neilsen, Jakob. Designing Web Usability. Indianapolis:New Riders Publishing, 2000.
Nielsen, Jacob. Top Ten Web Design Mistakes. Jakob Nielsen's Alertbox
http://www.useit.com/alertbox/9605.html. 1996.
Web Design Guidelines http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572
1999.