Home › Staff › Publishing Guidelines
Web Style Guide for the
College of Communication
University of Texas at Austin
Standards and Specifications 3
Creating Web Content for Stellent 4
Visual Elements in a Text Document 8
Tips for Creating a Better Web Experience 9
Web Style Guide for the College of Communication
The website for the College of Communication is the most easily accessible point of contact for many prospective and current students. As such, it is a valuable marketing tool that must maintain a strong and consistent brand, message, and style. The websites under the purview of Co Comm Creative compose a single narrative, exploring the many aspects of human communication, including emotion and connection1. To that end, the styles, art direction, and general look and feel of these websites has been carefully considered to cohere with the story we wish to tell about the college.
The web standards presented here should enable all content owners to contribute to the website with confidence and ensure and protect our brand and message. The web standards exist to make certain that the college’s websites tell a cohesive story, are accessible to our various audiences, and help advance the college’s overall vision and strategy.
With the exception of faculty pages or student personal pages, official web pages associated with the College will adhere to the established style as designed by CoComm Creative. This guide will also address the appropriate use of certain web elements, such as secondary navigation or spotlight features, in order to ensure a positive user experience and minimize user confusion.
Each department website will have its own look and feel which contributes to the overarching narrative. Each website shall be designed as its own vignette which, while keeping with the level of professionalism and deliberate design established on the college website, will establish a unique presence for individual departments. Common points the vignettes will share include: approved photography and consistent point of view, bold and deliberate design and art direction, a distinct contribution to the story of human communication and clean, professional architecture and navigation.
As a public agency, all university websites are required to be Section 508 compliant, meaning they must be accessible to mobility- and visually-impaired users. This guide will outline some of the best practices for keeping websites 508 compliant. For more information, please visit http://www.section508.gov/
Creating Web Content for Stellent
Content for the web is created using a simple Word template which can be obtained from the Webmaster, Susan LaRonde (471-7293, susan.laronde@austin.utexas.edu). The template is a sample document that contains all the styles needed for the web (headers, bulleted lists, images, etc.). Word styles can be applied to the text and images in a Word document, which Stellent will convert to the appropriate web styles.
Stellent uses a built-in tool that translates Word formatting to HTML. In order for your document to match the styling of your website, use the pre-determined styles that have been embedded in the Word template.
To view and use these styles:
Macintosh Users: Go to the View menu and select Formatting Palette. Click on the arrow next to Styles to see the style choices.
PC Users: Click on the AA graphic next to Normal to call up the Styles and Formatting Task Pane.
Use the following styles in the Styles and Formatting Pane to format your text:
Text Type |
Style to Use |
Tips |
Regular Text |
Normal |
• Use only one carriage return at the end of a paragraph. While this looks ugly in the Word document, the web page will be fine. • Use Shift-Enter if you do NOT want a space between lines. • If you are pasting content in from another Word document, paste as Text only, then use the formatting and styles provided. • Do not use all caps, as this is hard to read and is interpreted as shouting. |
Bold, Italic |
Bold, Italic |
Use the Bold and/or Italic buttons per usual. |
Bullets |
Bullet List |
Use this style, not the Bulleted list icon provided by MS Word. |
Numbered Lists |
Number List |
Use this style, not the Numbered list icon provided by MS Word. |
Headings |
Heading 1 Heading 2 Heading 3 Heading 4 |
Use headings the same way you would indent items in an outline. Headings are important for visually impaired users. |
Images |
Image Right Image Left |
While you will not see any results in the Word document, text on the web page will wrap around the image. Learn about adding alt text to images below (PC only) |
Box Right Box Left |
Use this style for images with a caption. Apply this style to both the image and the caption. | |
Pull-Quotes |
BlockQuote Right BlockQuote Left |
Use this style to create large, bold text that the main text wraps around. |
Citations for Pull-Quotes |
QuoteSource |
Use this style if there is a citation for the pull-quote. |
Page Layout
Although visually and graphically unique, all college websites share common layout features. All websites feature horizontal navigation (header), primary left side navigation, a primary content area, and a footer.
Headers
The first element of all websites except the college website should be the header containing grayscale college wordmark and link to the college and the university.
Horizontal Navigation
Horizontal navigation may be used to highlight certain aspects of the website which are either most frequently used, are most interesting from a narrative point of view, or provide high level information about the college or department. With the exception of the college website, which uses horizontal navigation to link to the various departments, links in the horizontal navigation should be repeated in the primary left side navigation (even if they are not top-level links).
Left Side Navigation
Left side navigation serves as the primary navigation element for a website. It is dynamically generated by Stellent based on a site’s architecture. Navigation may not be more than four levels deep, with three levels being the desirable maximum.
Footer
The footer may contain global university navigation or pertinent website information (such as photography credits). Consider putting contact information in the footer as well.
Spotlights
Right side navigation (spotlights) may be used to direct the user to additional or related links, or may be used as a spotlight to reference non-essential information. Be wary of putting necessary information, or information that is not repeated elsewhere, in the right hand navigation; if users are expecting this information to appear in the main content area, they may miss it.
Spotlight on the college website
The style and general look and feel of the college’s websites are driven by external cascading style sheets which have been developed to ensure a consistent style as well as to make design changes simpler. All of the web elements listed here, plus many others, are covered in the style sheet, and content owners and contributors should be using the styles specified in the Word temeplate when submitting content to the website. Under no circumstances should content contributors create their own styles. This guide will provide a quick reference to the styles currently in use.
The main colors of the college website are:
College websites may be written primarily in several different web-ready fonts (Verdana, Arial, Geneva, Georgia, Times New Roman, Tahoma) but should not be written in non-standard or difficult-to-read fonts.
Headings should be used as appropriate. Standard heading styles are listed in the Word template as “Heading 1” (H1), “Heading 2” (H2), and “Heading 3” (H3). H4s are rarely used.
Visual Elements in a Text Document
Pull-quotes and images should be used when it is necessary to visually break up a text-heavy page. Feature stories and other longer articles benefit from pithy pull-quote text and emotionally engaging photographs or images. In most instances, when multiple visual elements are used for the purpose of breaking up a page, be they pictures, pull-quotes, or a combination of both, the elements should alternate left/right on the page to lend an overall balance.
Pull-quotes should be short and directly relevant to the content presented. Pull-quotes are styled with the “BlockquoteRight” and “BlockquoteLeft” styles in the Word template.
Images should be of good quality and should reflect the brand of the college or department. In most instances, they should be positioned so that text wraps around the images.
To allow document text to flow around images, they should be treated in one of the following ways:
Images with no caption: Use the style “Image Left” or “Image Right” in the Word template. These images may be any size.
Images with caption: Use the style “Box Left” or “Box Right” in the Word template. The image should be 250 pixels wide at 96 dpi, no bigger. This is important, as Word will scale the image inappropriately if the resolution is not set to 96. If you need assistance, please do not hesitate to contact the design team.
In order to be Section 508 compliant as well as to create the best user experience possible, all images on the website must contain alternative (alt) text. Alt text should be short but should adequately capture the purpose of the image. The language used in the alt text should reflect the emotional impact of the image.
Please note: Mac users cannot add alt text to images in Word. Please contact CoComm Creative for assistance.
PC users: To create alt text for your images, right click on your image in the Word document. Select Format Picture from the menu, and then select the Web tab. Simply type your text into the Alternative text box and click “OK”.
In order to avoid copyright infringement issues, please do not copy images or photographs off the web to include on your website. Unless specifically stated otherwise, all images and photographs are copyright protected, and explicit permission from the copyright holder must be obtained before those images can be used.
If you need to obtain stock photographs, you can purchase them inexpensively from www.istockphoto.com. Alternatively, please contact CoComm Creative for assistance.
Tips for Creating a Better Web Experience
The following tips can help foster a meaningful, engaging web experience for visually and mobility impaired users using assistive technologies.
• Use clear, simple language in your documents. Write as though you are writing for one person rather than an audience.
• Provide alternative text for all essential non-text items (photographs, charts, Flash files, etc.). Alt text should be expressive, descriptive, and interesting: it should be a suitable emotional or informational substitute for the non-text item. Since this text replaces an essential element of a website, it should be clearly written, but relatively short.
• Do not rely on color alone to relay pertinent information. Not all users will be able to see color in all circumstances. Text that reads, “Click the red link” is not useful for users who are viewing the document on a monochrome monitor or who are colorblind.
• Use descriptive links. Avoid “click here” or “read more” links wherever possible; instead, make the hyperlinks meaningful and descriptive.
The following tips are intended to foster a relationship of trust between the college and its visitors. As important marketing tools, the website should be accurate, credible, and current.
• Make it easy to contact you. “Contact Us” links, mailing addresses, and telephone numbers in obvious locations on the website allow visitors to easily contact the college. Consider putting this information in the footer on your website.
• Use language that is relevant to your audience, not language that is unique to the university or college. Visitors should not have to guess what certain phrases mean on a website. The website should meet the needs of the visitor. For example, consider using phrases like “Double Major” instead of “Simultaneous Majors”. Common phrases are better than university jargon.
• Update your site’s content often. Stale content makes a website look outdated. Moreover, stale content leaves a visitor wondering if all the information on the website is outdated or wrong. Fresh content indicates that the information is being tended, and is still relevant. Include dates in website content where appropriate. Content maintenance is the responsibility of the respective website owners.
• Avoid errors. Although this seems obvious, all errors, even small ones, can decrease a site’s credibility. Proofread for typos, unintelligible language, broken links and accurate information.
General design inquiries may be directed to either of our two designers:
• Amber Simmons, amber.simmons@austin.utexas.edu 232-7948
• Crystal Watson, crystal.watson@austin.utexas.edu 471-7239
General website questions may be directed to our webmaster or our web designer:
• (webmaster) Susan LaRonde, susan.laronde@austin.utexas.edu 471-7293
• (web designer) Amber Simmons
1 For the purposes of this document, any reference to “web pages” or “websites” is assumed to mean only those college sites under the purview of CoComm Creative. Any other departmental sites owned by other parties fall outside the scope of this document.