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.
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:
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.
Header 2 should be used for page subheads and occasionally, for oversize headlines.
Header 3 should be used for Gateways, contact info, and sidebar headers.
Header 4 should be used for section titles and can change color depending on top-level header color.
Header 5 etc. etc. etc.
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:
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.
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.
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.
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:
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.
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.
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.
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.
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.)
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.
And some more good stuff:
Social media refers to online tools that people use to connect with one another, including social networks. These services allow users to create and publish content about themselves and their organizations. The social aspect of these tools lies in the ability for individuals to interact and connect with others, thereby building online communities.
Southwestern University’s social media is managed by the Office of University Relations. Danielle Stapleton ‘05, associate director of new media, has drafted social media guidelines which you can read more about by browsing Getting Started with Social Media. To see all of the organizations/departments that have pages/groups, you should also check out Southwestern's Social Media Directory.
When the SU website was redesigned in Spring 2013, White Whale Web Services provided us with a set of social media icons for use on the Southwestern website. These hand-sketched icons are a matching set and using them insures uniformity in linking to external social media throughout the site.
You may download specific icon by right-clicking the icons you need and saving to your hard drive. Or you may download a complete set in a ZIP file.
Further, our 2013 redesign has made it very easy for academic departments to link to their social media properties by creating blurbs within your LiveWhale groups. For instructions and a demonstration, please contact the Web Office.
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:
Academic Department Navigation