Graphic Standards and Web Style Guide
Standards exist to bring unity of expression to the many pages of a Web site, each with its own audience, agenda and author.
This document presents the styles and guidelines for use on the Southwestern Web site. Here are five things to keep in mind: Fonts and Typography, Colors, Images, Writing for the Web, and Academic Departments.
Fonts and Typography
Web fonts require multiple specifications, as not all browsers have all fonts installed. All of our new website templates (as of March 2013) use Adobe TypeKit for font display. Otherwise, we're recommending the following set of basic fonts for use on your site:
- Georgia or default serif font (non-bolded) for subheads and sidebar titles
- Helvetica, Arial, or default sans-serif (usually bolded) for navigation, tactical links, and dates
- Helvetica, Arial, or default sans-serif font for body text
In the main body of the page, links are underlined only on mouseover and set in a color from the approved palette, usually matching the section header.
An even smaller sans-serif, with extended letter spacing for readability, can be used for fine print, labels on form fields, etc.
Text Styles:
Header 2
Header 2 should be used for page subheads and occasionally, for oversize headlines.
Header 3
Header 3 should be used for Gateways, contact info, and sidebar headers.
Header 4
Header 4 should be used for section titles and can change color depending on top-level header color.
Header 5
Header 5 etc. etc. etc.
Header 6
Header 6, both regular and bold weight, can be used for photo captions, citations, or other "helper" text.
Our goal is to provide a flexible set of standards that will work across a diverse, creatively distinct set of Southwestern pages. In the new southwestern.edu design we have defined elements that are negotiable and ones that aren't. We think that the elements that can differ on a site-to-site basis include the following:
- Accent colors. The basic color palette of the site will remain fixed across most if not all site pages. If a light background color is used (such as the one featured here), that will be a global value. But individual offices, departments, and programs should be free to make a selection of secondary colors that meet their needs (or simply suit their tastes). All individual color selections should remain consistent across the sites on which they're used.
- Inline headers like this one, as well as pull quotes, bulleted lists, and subheadings can help your reader find the information she is seeking.
Primary Colors
Cool Gray 10
PMS 128 c
PMS Black c
PMS 7516 c
Secondary Colors
PMS 601 c
PMS 652 c
PMS 180 c
PMS 7491 c
Section Colors
News
Blue Dark
Admission
About
Paideia
Yellow Pale
Athletics
Kahki
Student Life
Visit
Giving
Gray Med.
Gray Dark
Financial Aid
Academics
Brown
Notes on Web Colors
Your results may vary: Web color is a famously unstable area of human endeavor, involving a perfect storm of monitor calibrations, Web browsers, and computing platforms, and there's no guarantee you'll see the same colors here as anyone else. We have looked at this palette on a fairly wide range of setups.
Images
By default, images don't have borders (even when linked). With only the tiniest of potential exceptions, drop shadows should not be used for photographs.
The photos used on the site should be color-corrected; basic instructions for color-correcting a photo (using Photoshop or free tools for the Mac and PC) should be made available to the community of content managers.
A Photoshop template of the correct sidebar dimensions has also been provided.
Optimized Video Export Settings for SU Web site
Video sharing services like YouTube and Vimeo have made it easy to show your moving images to the world. Southwestern maintains a video channel on YouTube, while using Vimeo to embed video within the Southwestern University web site. While each of these services have optimization specifications on their respective websites (here and here), we generally find that these video settings work well for both services.
- 1280 x 720 resolution
- H.264 codec/AAC audio codec
- 5000kbps oab rate
- 30fps/30 keyframe
- 44.100 kHz/128 kbps audio
- deinterlace if possible
Writing for the Web
Each section homepage (About Southwestern, Admission, Student Life, etc.) should include approximately two short opening paragraphs of text that, together, "tell the story of SU" and individually introduce that area of content and highlight key pages within each section. The first paragraph should be primarily "marketing"-style content, a well-written introduction to that section's concerns; the second should include links to the various site pages of importance, in paragraph form. (Most of these links will be redundant to the section's navigation, but will give it more context and make information more accessible.) It's important to keep these short, so the more dynamic info can be read quickly and easily.
Here are six things to keep in mind:
1. Be concise.
Keep word counts low, especially on top-level pages that should be telling the story rather than conveying lots of detailed information. Most basic informational pages ought to be no longer than 400-500 words, and top-level pages should aim for between 200-300 words.
2. Use an opening paragraph to summarize page content.
Flipping through the site, any visitor should be able to quickly absorb the most important information on the page to determine whether she needs to take the time to read the entire page.
On primary public-facing pages (that is, all pages one click away from the home page), the text should be written specifically with a first-time visitor in mind. Opening paragraphs of other pages can simply summarize and/or contextualize the page's content. We typically set the opening paragraph in larger font size to draw attention to it and make it easy to read.
3. Be conversational, but not clever.
The use of contractions (it's, we're, you'll, etc.) is encouraged. Some of the rules that are applied to formal writing don't apply as strictly to Web writing. For example, if the natural rhythm of a sentence is best suited by ending it with a preposition, so be it.
One of the best ways to check the style of Web writing is to read it to yourself out loud. If it sounds natural, it's likely to be good.
4. Make use of meaningful subheadings to guide a reader through the page content.
Along with short paragraphs, breaking up a page with subheadings allows a Web reader to quickly determine what information is most important for her needs. This is a good general principle for all content pages of a site; for long, policies-and-procedures-type pages, it's absolutely essential.
As a general rule, there ought to be a subheading for every 150-200 words of Web content. And top-level pages often benefit from a much more widespread use of headings and subheadings. Many good top-level pages pair small subheadings with short paragraphs to give a visitor a very clear idea of what's to be found throughout that section of the site. Organize your text so that the hierarchy is no deeper than four levels. Lower-level heads are hard to distinguish and disorienting to online readers.
'Overuse white space' is a good rule of thumb for Web writing. Reading from computer screens is on average 25% slower than from paper, so short paragraphs and frequent subheadings give users more room to read.
5. Use your text formatting, like bulleted lists, pull quotes, and paragraph breaks, to quickly convey information.
On most basic content pages there shouldn't be more than one or two bulleted or numbered lists. If you have a page that is burdened with lots of lists, you may want to consider alternative ways of presenting that content. (This section of this document, in which numbered points are followed by explanatory paragraphs, is one possible example.)
6. The text should guide readers around the site.
Links within the text are important means of limiting duplicate information and directing visitors to key content within the site. On section homepages these links should complement the navigation as a secondary means of directing readers to section sub-pages. Links to external sites are ok, but should be carefully considered and not overused. Be judicious: Too many links within a paragraph also diminishes their effectiveness as content guides.
Southwestern style and tone: There should be general consistency of voice across all top-level site text. This voice should be strong and guiding. The tone of top-level text should be smart, knowing, engaging, direct and sometimes witty - getting across that this is a rigorous academic environment is important. We suggest that the language on the site consistently addresses the audience more directly: Use "you," "us," "we," etc., while not being too chatty or informal. In general, we recommend using first-person accounts as much as possible while remaining within your comfort zone.
Recommended reading:
- Writing Style for Print vs. Web - Linear vs. non-linear. Author-driven vs. reader-driven. Storytelling vs. ruthless pursuit of actionable content. Anecdotal examples vs. comprehensive data. Sentences vs. fragments.
- Blah-Blah Text: Keep, Cut, or Kill? - Introductory text on Web pages is usually too long, so users skip it. But short intros can increase usability by explaining the remaining content's purpose.
- World's Best Headlines: BBC News - Precise communication in a handful of words? The editors at BBC News achieve it every day, offering remarkable headline usability.
- Passive Voice Is Redeemed For Web Headings - Active voice is best for most Web content, but using passive voice can let you front-load important keywords in headings, blurbs, and lead sentences. This enhances scannability and thus SEO effectiveness.
- How Little Do Users Read? - On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.
- How Users Read on the Web - They don't.
- F-Shaped Pattern For Reading Web Content - Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
- Mobile Content: If in Doubt, Leave It Out - Writing for mobile readers requires even harsher editing than writing for the Web. Mobile use implies less patience for filler copy.
Academic Departments
Academic department homepages are a crucial source of information for prospective students. As with the other top-level, high-visibility areas of the site, departmental homepages are key recruiting tools for the institution. This means that their content needs to be presented in a way that acknowledges prospects as a primary audience. At the same time, academic department sites in their entirety are well-used tools for communication within departments, between faculty and students, and outside departments, among faculty of different institutions.
Department homepage recommendations: The homepage content must be the introduction to the department as a whole. It should be energetic, clear, articulate, exciting (if possible) and representative of the department. No matter what the subject, we want to make a reader WANT to learn more about it - dig into the interior pages, take a class, read a research paper, become a major. Each homepage should include:
- Basic welcome (0-2 sentences: not entirely necessary, use it if it's already there, can be very simple)
- General description of the field of study (1-2 sentences) and / or philosophy of the department (1-3 sentences)
- Short description of the curriculum (1-3 sentences)
- Something about majoring/requirements (1-3 sentences)
- If appropriate something about facilities/equipment (1-2 sentences: more applicable to the sciences)
- Optional: examples of what graduates go on to do, etc. (1-2 sentences)
- Highlight a unique, interesting piece of research, faculty member, course, and/or some aspect of the department that illustrates the work being done there in an exciting and engaging way - this is our "marketing to prospective students" opportunity on the department homepage.
- At the same time, the introductory paragraphs should represent the content found throughout the department's site guiding students to internal pages through short references and links. As a result, some department homepages will read slightly differently (or contain more content) than others as they reflect actual content and the personality of each department.
- In total, we should strive for around 250 words on the page.
Academic Department Navigation
- About the Department
- Faculty
- Majoring & Minoring
- Curriculum
- News & Events
- Resources & Facilities
- Special Opportunities
- Get to Know Us
- For Current Students
- After Southwestern