53
Creating content
32
Guide to Creating Website Information Architecture and Content :: Version 2.2 :: 01.22.09
Creating content
Why planning for content is important
Your content is the reason visitors come to your site — and continue to return.
Given adequate time to prepare, your prose and images can be sparkling, helpful
and motivating. While content is often defined as text, it is important to remember
that it includes the visual elements of the site as well.
Planning for content creation
We have found that in the website “design” process, content is often an
afterthought. Frequently, the content process is only started when big blank spaces
in pages become apparent. Not only can this delay your site delivery, but it can
affect the quality of your site. When the content process is rushed, it is often written
without carefully considering the site users’ goals and interests.
Creating content and following an approval process can be time consuming.
Therefore, we recommended you begin the content process as soon as the outline
of the navigation is available (see pages 20–22). With the navigation outline in hand,
you can see each of the opportunities to add new content or revise existing content,
particularly for your main overview pages.
User-oriented content
Just as your pages need to be organized based on the questions your audience
will ask, your prose needs to be written and your images selected based on your
audience’s expectations and proficiencies.
For example, if a primary audience is undergraduate applicants, it is safe to assume
that most are not familiar with the University’s procedures. Therefore, to serve
this audience, you should avoid using internal jargon or acronyms. Remember,
many University sites have key audiences who are not familiar with your office or
department’s daily practices.
Whenever appropriate, keep the tone conversational and friendly; photos should be
inviting.
Consistency is a major key
Once you settle on a tone for your content, be it friendly and casual, or formal
and official, this needs to be carried through the site as much as possible. This is
particularly true on the overview pages.
Each overview page should give the impression that your group is speaking with
one voice. This includes referring to your group either in the first-person or the third-
person voice, but not both.
Use consistent sentence structures and organize lists of links in parallel ways from
page to page. This will help visitors become familiar with the way you communicate
your information, and they won’t have to relearn your site logic from section to
section.
(continued on the next page)
Preface
Introduction
Creating IA
IA standards
University requirements
Creating content
Pre-launch checklist
Glossary
References
}
49
Creating content
33
Guide to Creating Website Information Architecture and Content :: Version 2.2 :: 01.22.09
Using proper grammar and spelling also supports this sense of consistency. The
Office of Communications has compiled a Web Editorial Style Guide (see www.
princeton.edu/webteam/style/) to assist you.
Use the correct, formal names for buildings, schools and event titles on first
reference. See the Web Editorial Style Guide for more details on titles for buildings
and places.
Avoid using italics and all-capital letters in large blocks of text or as menu labels or
section headings. These are hard to read and they may not print clearly.
Shorter is better
Keep sentences and paragraphs short. Because your computer monitor is back-lit,
reading content on the Web is harder than reading printed material. Shorter text is
always more reader-friendly, especially on your main pages.
Try to limit the vertical length of your pages to one screen. Users do not always
know that they can scroll down.
If you have a large amount of content on a page, consider editing it down or
breaking it up into subpages. For pages that must have longer text, try breaking the
text up with photos, bullets or horizontal lines with subheads. Visitors can find the
information they are looking for more quickly on shorter, well-organized pages.
Make a favorable impression
Each section overview page presents opportunities to discuss your group’s
philosophical approach or describe what makes you special and interesting to your
top-priority audiences. See example below.
Prose should be up-to-date, accurate and written in a welcoming voice for any
audience. Presenting your content consistently and coherently gives a positive
subliminal message about the state of your department or office.
Office of the Dean of Undergraduate Students — Overview
The staff in the Office of the Dean of Undergraduate Students (ODUS) is
committed to enriching the undergraduate experience at Princeton University.
ODUS is part of the Office of the Vice President for Campus Life.
While the main ODUS office is located in West College, programmatic centers
are also housed in both the Carl A. Fields Center for Equality and Cultural
Understanding and in the Frist Campus Center.
We encourage you to explore this site to learn more about our resources and
areas of responsibilities that are available to the larger University community.
(continued on the next page)
Sample introductory text
Preface
Introduction
Creating IA
IA standards
University requirements
Creating content
Pre-launch checklist
Glossary
References
}
48
Creating content
34
Guide to Creating Website Information Architecture and Content :: Version 2.2 :: 01.22.09
Links
Hyperlink two- or three-word phrases rather than single words, as the longer
hyperlink is easier to recognize as such.
The wording of the link should describe what it links to, rather than something non-
descriptive (e.g., “contact us” rather than “click here”). This aids in accessibility for
users with impaired vision, and also helps site visitors who quickly skim content.
Guard against adding hyperlinks to anything and everything just because you can.
When an item points to a document instead of a Web page, it is common practice to
place information about it in parentheses, e.g., (.pdf), (.doc) or (.xls).
If it is possible to render content as a Web page in your site, rather than linking to a
PDF or Word document, its advisable to do so. Your users will appreciate the effort.
If you want to link to a Word document, save it as Word (.doc) or text (.txt) only, not
as HTML (.html). When a Word document is saved as HTML, it appears to the user
as an undesigned Web page without a way to navigate back to the rest of the site.
Be consistent about which links open in new windows. Links to pages in your own
site should not open a new window, but links to other University departmental/office
sites or links to sites outside of the University (e.g., www.unitedway.org) can. Just be
consistent with your decision.
Instead of incorporating information on your site that really is owned by other
University entities, link to this information as “related” or “other useful” information.
Lists
If your text contains multiple, consecutive links, consider extracting these from the
body of the text and placing them into bulleted lists.
Lists of links with more than six items also can be broken into smaller groupings with
subheadings or horizontal lines as dividers.
Visual content
When selecting photos, pick images that communicate the energy and vitality of
the University and your department. Princeton University has a diverse community
and the images selected should reflect this diversity. Communicating diversity —
which includes ethnicity, gender, age, fields of study, etc. — is a University priority.
Other communications priorities include showcasing the caliber of our students; the
accessibility of our faculty; and our world-class teaching and research. Additionally,
these priorities include internationalism, which encompasses international
educational opportunities and engagement with global issues.
(continued on the next page)
Preface
Introduction
Creating IA
IA standards
University requirements
Creating content
Pre-launch checklist
Glossary
References
}
40
Creating content
35
Guide to Creating Website Information Architecture and Content :: Version 2.2 :: 01.22.09
Be sure to have permission to post a photo before loading it on your site. If you are
not sure about the copyright issues for a specific image, do not use it.
Captions under photos can help you tell your story.
Include photo credits.
Users with impaired vision may not be able to see the content of your images.
Consequently, it is critical to add an “<alt> tag” containing alternative text to every
photo which will enable screen readers to read the description of the image out
loud.
Adding alternative text is a requirement of federal accessibility standards as
described in Section 508 of the Rehabilitation Act of 1998.
• The alternative text should be informative without being too lengthy. For
example, instead of adding a nondescript <alt> tag such as “campus,” the text
could read, “Students do research in Firestone Library.”
• In the Roxen CMS, adding text to the “Title” field in the image “Browse
& Upload” window will automatically create the <alt> tag for you. In
Dreamweaver, you can enter the image’s <alt> tag text in the Properties
toolbar.
Additional Web media
If you are offering video, audio or Flash, you may want to include links to download
the appropriate media players. If any of these elements contain critical information,
be sure to provide this information in a format that does not require a plug-in as well.
If you have a Flash movie (.swf) on your home page, you may want to use a
Javascript browser detector to deliver a page without Flash for those who are
using screen readers, users who do not have the Flash plugin and users who have
blocked Flash.
Indicate links to Web video and audio by noting its format and bandwidth level (low,
medium or high) in parenthesis.
Preface
Introduction
Creating IA
IA standards
University requirements
Creating content
Pre-launch checklist
Glossary
References
}
70
Checklist
37
Guide to Creating Website Information Architecture and Content :: Version 2.2 :: 01.22.09
Pre-launch checklist
The Office of Communications must review sites to ensure that they meet all of the
University website requirements before making them accessible from the University’s
main site. Details on the University website requirements listed below can be found
on page 30. Please be sure that you build at least two weeks into your development
time to allow for this review and to make any necessary adjustments to your site
before launch.
We also strongly recommend that your site include each of the elements outlined
under “Highly recommended features” below. Details on these items can be found
on pages 27–28. Incorporating these features will greatly enhance your user’s
experience.
University website requirements
❏
There is a link to the University’s home page from your site’s home page.
❏
If you use the Princeton University logotype and/or shield, you use an approved
treatment with proper fonts and colors.
❏
There is a link to either the University’s search or a site-specific search from
your site’s home page. If you choose to link to a site-specific search, you must
include a link to the University’s search from your site-specific search page. See
www.princeton.edu/odus for an example.
❏
The University’s copyright notice, including the current year, exists on your site’s
home page.
❏
Contacts for site owners are provided somewhere within your site.
❏
A page modification date exists on your site’s home page.
❏
Your site provides critical information in a format that does not require a plug-in
(third-party software) for viewing.
❏
<alt> tags containing alternative text are provided for all of your site graphics
and photos.
❏
You have permission to use all photos that exist on your site and photo credits
are included.
❏
All copyrighted material is used with permission.
❏
Grammar, spelling and punctuation are correct and follow a consistent style.
❏
You do not advertise, endorse, link to or include logos for commercial entities.
❏
Your site complies with “Rights, Rules, Responsibilities,” as well as the Equal
Opportunity Policy and Nondiscrimination Statement, which are included on
page 43.
❏
Your site represents Princeton University well.
Highly recommended features
❏
Your site title is placed prominently on every page.
❏
Your site has a logical naming convention for Web addresses, menu labels and
page headers.
Preface
Introduction
Creating IA
IA standards
University requirements
Creating content
Pre-launch checklist
Glossary
References
}
(continued on the next page)
34
Checklist
38
Guide to Creating Website Information Architecture and Content :: Version 2.2 :: 01.22.09
❏
Your navigation uses straightforward wording, in one- to three-word phrases.
❏
Your navigation is grouped in clusters of six or fewer items.
❏
Your navigation does not link to pages outside of your site, downloadable
documents or e-mail addresses.
❏
Every page in your site can be accessed from some level of your navigation.
❏
Interactive elements in your site behave consistently, so that users can predict
what will happen when they click on an item.
❏
When making hotlinks use descriptive two- or- three-word phrases.
❏
All links to pages within your own site open up in the same window.
❏
Your site uses a consistent practice for opening up new windows for links that
take the user outside of your site.
❏
Proper names are used correctly.
Preface
Introduction
Creating IA
IA standards
University requirements
Creating content
Pre-launch checklist
Glossary
References
}
51
Glossary
40
Guide to Creating Website Information Architecture and Content :: Version 2.2 :: 01.22.09
Glossary
Content management system (CMS)
A centrally managed computing system that allows non-technical users to easily
update text and images and modify their organization within a website.
developer
Someone who uses a programming code or a software package to transform the
content and visual design into a functional site.
Hyperlink / hotlink / link
A clickable item in a site, usually represented by words or images, that will take a
user to information in another page or elsewhere in the same page.
Information architecture
The structure or organization of your website, particularly the way in which the
different pages of the site relate to one another. It also includes the order in which
information is displayed on each page, as well as the navigation scheme selected.
Key stakeholders
The people who set the tone and overall goals of a website and give required
approvals at various stages of the site’s development.
Navigation
Descriptive links or buttons that are grouped together to give a visual cue that your
users can click on them to find their way to the information in your site.
Project scope
An outline of your site’s goals, parameters and resources. Developing the project
scope includes several important activities, such as identifying key audiences,
assessing existing and needed content, determining the essential and custom-built
functional features and establishing the budget and timeline.
Roxen CMS
The University’s centrally supported content management system. It includes
University-created templates that incorporate a number of usability and accessibility
standards.
Screen Reader
A type of browser that speaks Web text aloud, often used by site visitors with vision
impairments.
Site map
A visual representation of the content areas and their relationship to one another in
your site.
Target audience(s)
The primary audience(s) for which a site is built.
(continued on the next page)
Preface
Introduction
Creating IA
IA standards
University requirements
Creating content
Pre-launch checklist
Glossary
References
}
Documents you may be interested
Documents you may be interested