Reed College Web Style Guide
“above the fold”
In the newspaper industry, “above the fold” refers to content that appears on the upper portion of the front page, above the physical fold in the paper. In web design terms, “above the fold” refers to the content that appears in a browser window. Typically, Reed’s style disregards “above the fold” concerns because users are accustomed to scrolling to find information. Nonetheless, your most important content should be “above the fold.”
Avoid using all caps; use bold or italic for emphasis.
Anchors are linked text used in in-page navigation. Because users are now comfortable with scrolling, we discourage use of anchors and list-based in-page navigation.
A blog (truncated from weblog) is a regularly updated digest, journal, or newsletter. Generally blogs are public, frank, running commentaries that show the personality of the author or organization. Blogs are a popular source of unabashedly biased opinion in political information and alternative news coverage. Reed uses the Wordpress platform for blogs.
Buttons—which come in a few shapes and sizes—are used to either (1) link to a new page based on audience segmentation or (2) link to a new page through a call to action. They are always 193 pixels wide.
call to action
A “call to action” (CTA) is a specific message or graphic urging the user act. It’s used to move visitors from one page to the next, finally persuading them to take an expected, predetermined action.
Callouts for body copy are placed in yellow boxes. This is for important or crucial information that you want to stand out to your reader. Links also have a callout style: a horizontal box with red text. Use them for important action items.
content management system
Also known as a CMS, a Content Management System is a backend tool for managing a site’s content that separates said content from the design and functionality of the site. Reed uses Cascade CMS.
Copy refers to all of the text on any given page. Limit copy length when you can. Use bullet points to break up text and for lists. Make sure to use spell check and follow Reed’s editorial style guide.
Heading refers to the text style used for titles and section breaks. There are five main heading styles in Reed’s CMS. Heading styles should be used in descending order—if you use a heading 2, the subheading that comes next should be a heading 3, and so on.
Heading 1 is used for banner or hero image titles. Heading 2 is used for the first title in the body content. Do not apply styles (bold, italics, underline) to headings and do not link from them.
hero image or slideshow
A hero image or slideshow refers to the large image(s) that span(s) the top portion of the webpage. Make sure heading 1 text is visible in either black or white against your photo. Slideshow photos should be reviewed by public affairs for quality and style.
In-page navigation is usually a list that appears at the top of the page each item of which links to a specific section within that same page. It is a link that does not link to a new page; it just jumps to another part of the current page. Listed in-page navigation is rare as users are more accustomed to scrolling to find information.
The “index” page is the main landing page. For example, reed.edu and reed.edu/index refer to the same landing page.
A landing page is the page where a visitor first enters a website. A special landing page can be created to provoke a specific action from the new visitor (usually in connection with an advertising or marketing campaign). The landing page is also the index page.
In Reed’s CMS, “lead text” follows the Heading 2 in the body of the webpage. It is an introductory sentence or two that summarizes the most important information on the page.
Use internal links (within reed.edu) when possible; use external links only when necessary. Don’t hyperlink “click here”—just link a phrase or verb in the sentence. Callout style links are for are for action items, such as asking the user to do something like “learn more about financial aid” or “download an application."
Navigation refers to the system used to move around a site. Navigation is most often thought of in terms of menus, and Reed often uses “flyout” style menus that reveal more links when the user hovers over text. Flow and navigation are tailored to an uninitiated, public audience. Navigation should follow a topic-based approach that groups related information in the same place.
Our navigation is on the left side of the screen. We encourage concision and few layers (shallow navigation) when creating navigation(s). When using a flyout style, include no more than two levels. Keep words consistent (i.e. sort by audience “alumni, parents, students” or sort by utility “residence halls, off-campus housing”).
Photos included in the body of the page should be 579 pixels wide. Hero images should be 1144 pixels wide and 538 pixels tall. All images should be high quality and pertain to the content on the page.
A redirect is a shortened URL that links to a page. For example, reed.edu/trusts is the redirect for reed.edu/givingtoreed/planned_gifts/trust.html. Contact public affairs if you are interested in acquiring a redirect for your page.
right secondary content
Buttons, headings, and time-sensitive information can be placed on the right side of the page. The buttons are for action items—ask the user to do something like “view our calendar” or “download an application. Smaller text inside colored buttons should be short descriptors followed by a triangle. Colored text with a line above may be used as another style for action items. Secondary content works best when it is condensed and concise; we recommend it should be no longer that 400 px.
search engine optimization (SEO)
SEO refers to the tactics used to make a webpage appear high in natural or organic search results, such as Google. Google crawls the content of web pages to determine relevance in relation to a user’s search. To bring content to the top of a search, you can use the same keywords in your URL, title(s), metatitle, linked text, and lead text on your web page.
A sidebar is content in a vertical column on the side of the page. Reed’s left sidebar is where we put the navigation. Reed’s right sidebar usually includes some buttons with calls to action or contact information.
Users scroll to find information toward the bottom of the page. Scrolling has become more popular than clicking to find information, partly because of the rise of infinite scroll on mobile platforms. While users prefer to scroll, Reed web content creators are encouraged to use concision in their copy. Because scrolling is preferred, Reed avoids splitting related content into separate pages. Within reason, users should be able to find everything about a subject on the same page.
Blue box tables with multiple columns may be used to call out important information, especially if it does not present well in running text and prose. See also callout.
Reed’s test server can be seen at test.www.reed.edu. The test server is not live nor open to the public, but it is accessible on campus. We use the test server to preview pages we plan to make live or to share web edits across departments.
A site’s URL is its address, the item that specifies where on the Internet it can the found. Reed encourages longer, more descriptive URLs without abbreviations or acronyms. This improves the URL’s search engine optimization success.
A visual hierarchy emphasizes certain parts of your content’s message by using colors, sizes, and layouts. Reed’s web visual hierarchy is controlled by
ascending use of headings (H1, then H2, then H3, etc) and text styles;
consistent use of photos, buttons, and icons.