Publish your web content in style. Use the UB Web Style Guide.
The UB Web Style Guide outlines web principles and best practices that inform the UB website’s current structure and ongoing evolution, and it provides basic instruction in the use of the University’s content management system.
UB web content providers are encouraged to use this resource in the creation and maintenance of their web pages. For additional assistance, please contact the Office of Marketing and Creative Services at 410.837.6190.
- Core Principles and Objectives
- Write Well for the Web
- Information Architecture
- The Design of Your Web Pages
- ADA Compliance
- The UB website is and should always be a user-focused site: What information do our users need? How can we best share the content that our audiences are looking for?
- The site’s home page and global navigation is designed to support the needs of the first-time visitor (most often a prospective student).
- When creating a new page or reviewing an existing page, identify your primary audience and ask: What are they looking for? (Not: What do I want to say about my office?) And then ask: What do you want them to do? Have an objective: to inform, encourage a specific action, elicit a response, etc.
- UB’s main site and college, school and library sites are designed to reflect a consistent look and feel while allowing for individual unit identity and distinction.
- The CMS contains all approved page templates; any questions concerning additional design elements or needs should be directed to the Office of Marketing and Creative Services.
- Enhanced market awareness and distinction remains a UB strategic goal; uniform branding and design within and across the UB websites is an important component of that strategy.
- Related to the above, the most effective university websites achieve a consistent tone across their top-level web pages. UB’s evolving style is accessible and professional, one that avoids both marketing cliches and bureaucratic jargon. In short, we want our word choice to convey that UB is welcoming and smart.
- Key information, such as tuition and fees, should never be duplicated on multiple pages or sections. Instead, link to this information from your pages if appropriate.
- While engaging design is a great asset in telling the UB story, web content will always be king (and it’s great to be that). That makes it essential to provide information that is relevant, current, professional and easy to find.
The best way to create and maintain effective web pages is to know the following about every page for which you are responsible:
- its purpose and audience(s)
- how often the information must be updated
- what other units on campus depend on (link to) this page (see the Coordination section above).
- Once you’ve created succinct, user-focused web pages, establish a regular review cycle. Different functional areas require different maintenance schedules, but it’s recommended that you review all of your web content at least once a semester.
- Review should include a content inventory—what pages are being published; who is responsible for each page—and a content audit—is the page still necessary? Does the content need to be updated?
Writing for the web is different than writing for other media. Here are some guidelines to help maximize your web content.
People go to the web for specific information. Research shows that more than 80 percent of web users scan text rather than read it, and that it’s 25 percent more difficult to read text on a screen than on a page. As a result, web writers should use a third of the words that print writers use to convey their messages.
- crafting short sentences
- using bulleted lists
- keeping paragraphs concise
- utilizing informative titles and subheadings
- writing conversational, easy-to-understand language
- linking to relevant pages
- using embedded links (for example: Check out the UB brand and not: Check out the UB brand at www.ubalt.edu/brand).
Consider the structure.
Think of the web as a 3-D space. Mapping out the information you want to communicate will result in clearer paths for your visitors.
- Arrange menu items in a logical order.
- Develop clear pathways to information.
- Provide just enough text and links to lead visitors to the next relevant page.
Use links to write better pages.
Everyone knows that web pages often contain links, but not as many people know how important links are to writing an excellent page. Links don’t just point to other pages.
They can also:
- persuade your visitors to do things that you want them to do
- organize your site without using a menu
- make your pages much easier to find and to read.
It’s all in the labeling.
Many people think of links as sign posts: “this way” or “click here.” Instead, try thinking of them as labels for the pages they point to. So clicking the link “Apply to UB” would take you to a page that has everything you need to apply to UB. When you click on it and are taken to a page that is all about applying to UB—nothing more and nothing less—you trust the site a little more.
- clearly describe their pages’ content, like “milk” on a bottle of milk
- invite you politely to do something (apply, learn more, sign up)
- might be something you’d type into a search engine (“pay my tuition”).
Location, location, location
Most people expect to see links as part of a menu. But links are often most effective in the actual text of your web page. Try incorporating them into your sentences (for example: You could ask faculty a question and so on).
In-page links should be:
- no more than three or four words
- closer to the top of the page if they are more important
- no more than six or seven per page.
Use other best practices.
- FAQs (Frequently Asked Questions) are good ways to communicate important information.
- Because our goal on the web is to provide information as quickly and easily as possible, we can ensure that we’re getting our most important points across by placing that information at the top of the page. This is known as the “inverted pyramid” style of writing: Start with the most important, most general information and work your way down into the details.
- Some documents don’t translate well to the web: meeting minutes, policies, legal documents. If these must be on your site, use strategies such as a searchable table of contents, appropriate links and document summaries.
- Always edit what you write. Consult UB’s Editorial Style Guide for everyday usage tips.
- The University of Baltimore follows the AP Stylebook for all official publications. By applying an accepted professional writing standard uniformly across campus—including to the website—we can best represent UB’s high standards to the public.
- Never type in all capital letters on the web; it’s the equivalent of shouting—and bad practice.
Avoid relative terms such as “soon,” “in the spring” or “next March.” Always use absolute dates such as “in March 2018.” If you put date-sensitive copy on pages, make sure you update the pages regularly.
You are not your user.
Just like web copy, information architecture should be user-centric. Rather than organizing information the way our institution is structured or solely based on our preferences, navigation should be based entirely on how website users need to find information.
Use friendly anchor links.
On long pages with several distinct sections that are not visible above the scroll line, assign section titles and list them with anchor links at the top of the page so that readers can scan information quickly and go directly to their target, rather than scrolling in a blind search.
The fewer clicks, the better.
Web users appreciate finding the information they need as quickly as possible. Don’t make them click more than twice to get to the page they need or to which you want them to go.
Tips for an effective left-hand navigation
Left-hand navigation should never have more than seven links and should include only links to pages within the same parent directory. If we link arbitrarily from the left-hand navigation to other areas of the website, users might lose track of where they are and leave the website immediately. Additional links should be provided in bulleted lists on your landing page or be embedded within copy.
File and directory naming
File and directory naming conventions are considerably less flexible on the web than they are on your desktop computer. Follow these guidelines to make sure your web pages will always be reachable.
- Use only lowercase alphabetical characters (a-z), numerical characters (0-9) and hyphens (-).
- Avoid using capital letters, spaces, nonalphanumeric ($, ?, ©, ¢, etc.) or non-English (Þ, ñ, ß, etc.) characters. Our CMS will not accept file names that include these characters.
- File and directory names should always begin with a letter, not a number.
- The main page in every directory in the CMS should be named index.pcf.
- Do not use application.pcf as a file name.
- Keep file and directory names brief and descriptive.
Using links the right way
Hyperlinks should include only the targeted word(s) and not the spaces before or after the word(s), nor any punctuation that is not part of the web address, such as a period that ends the sentence.
For more information, email us.
not: For more information, email us. (Note that the period is incorrectly included in the hyperlink.)
- If you want to include a linked email address, do so like this:
For more information, email the Office of Marketing and Creative Services.
not: For more information, email the Office of Marketing and Creative Services at firstname.lastname@example.org.
Archive old pages and folders outside the CMS.
Content you no longer need on the website should be stored in an archive folder on your computer or on either the R or T drive, not in the CMS. Pages and directories that are no longer necessary and are not removed from the CMS could result in broken links across the website and could generate a series of “Page not Found” errors, which may drive users away from our website.
Why templates are terrific
- Great news! We’ve taken all the guesswork out of designing your web pages by providing clean, consistent design templates that support the usability (a fancy word for “friendliness”) of our website in addition to reinforcing our brand through their look and feel. These templates are automatically integrated with our CMS, so all we have to do is focus on the content. And remember: Content Is King.
- While it’s tempting to want to make our pages look different so we stand out, doing so works against us on the web. We don’t want our pages to look any different, fundamentally, from those in other areas of the website because we want to provide a seamless experience for our users. This allows them to navigate easily throughout our site, makes them confident that they’re “in the right place,” and provides a reassuring, comfortable website environment. Changing font colors and rearranging design elements erodes user trust. When you travel from one state to another, some road signs may change color or design, but red still means stop and you still drive on the right (except for those wacky Brits). Users are looking for information about the University, not for web surprises.
- Part of the beauty of a built-in template is that our font colors and styles are set for us. (Again, fewer decisions to make—phew.) If we change our font colors and styles arbitrarily, it creates inconsistency for our users, which is not only distracting, it makes our Very Important Content hard to read and digest.
Working with photos
Before uploading them to the CMS, photos must be sized appropriately for different snippets and uses. This must be done in Adobe Photoshop. Note that resizing for the dimensions specified by the CMS may cause your image to be cropped; ensure your image is cropped proportionately and appropriately.
- Photos must be saved as JPG files before uploading them.
- Photos must be saved in RGB and not CMYK color format.
- Please do not use copyrighted or watermarked images.
All photos on the UB website are subject to the editorial discretion of the Office of Marketing and Creative Services.
Use these to break content up into well-labeled, intuitive categories; they also provide a resting place for the eye.
- Never use Heading 1; it’s reserved for the page title, which is located in the shaded box above the main content of the page.
- Be sure not to make your text both bold and a heading style; this will result in unexpected and undesired formatting.
Sidebars and quote boxes
Use these shaded boxes on the right-hand side of the page to provide supporting information, such as a brief addendum to the topic in your main body copy or a testimonial with an accompanying photo. They add visual intrigue and a short, easily digestible chunk of information.
- Add a brief headline in a Heading 2 style to attract attention to your sidebar.
- Bulleted lists, contact information and additional resources (with hyperlinks) are all great candidates for sidebar content.
- Make sure your sidebar or quote box content is brief—no more than two short paragraphs.
Associated content box
Use this green box below the left-hand navigation to provide additional, high-priority information, such as important links (that don’t appear in your left-hand navigation) or contact information.
- Since this box acts like an extension of your left-hand navigation, links won’t appear underlined. If you mix content—such as links and contact information, say—consider underlining the links via the toolbar in the editor.
- If you have standard content that you’d like to appear in this box across a selection of pages, save that content as an asset, then place the asset on multiple pages. This will save the time you’d take retyping or copying and pasting the information. Then, if you need to update the information, you need only update it once, in the asset; it will automatically be updated across all the pages that contain that asset.
Use this gray line (a blue “bar” icon in the second row of the editor toolbar) to partition content on your page.
- If you leave the “width” field blank in the dialog box that appears when you click the icon, your horizontal rule will be the full width of the page.
Use these to incorporate lengthy copy (especially lengthy lists) while occupying less space on your page. You can choose between two or three columns.
- Use headings for each column and/or bulleted lists to make your content especially well organized.
- Columns are particularly well suited to providing faculty listings, degree requirements, audience-specific lists (with appropriate headings) and more.
The University of Baltimore’s website complies with standards set by the federal Americans with Disabilities Act. This means that every page is accessible to those who use a site reader, a device that converts all the elements on a web page to text that the device then reads aloud or reproduces in Braille for the user. Therefore, our compliance requires the following of all contributors to UB’s web pages:
- A text equivalent is provided for every nontext element. This means that every image on the page is backed up with a written equivalent. In OU, the solution is to provide a brief synopsis of the image using the Insert/Edit image tool.
- Post a few words about the image in the Image Description window inside the tool. When the site-reading device encounters the image, it will find the text you’ve written and convert it for the user, either as speech or Braille.
- You’ll know you’ve been successful in using the tool if you publish the page, then check it on your screen. When you mouse over the image, you should see the text you wrote pop up in a small window. That text is what the site reader converts.
- Make sure you check for typos and grammar issues in this window. Don’t use symbols or unusual characters.
- If you make a mistake, go back to the tool, correct the problem, save and republish. Check to make sure your changes appear on your refreshed page.
- Never post images that contain URLs or other important text as part of the image. A site reader cannot translate these into words for the user.
- Avoid the use of potentially offensive terms that assume all site visitors have perfect vision, hearing and so on.
- Learn more about UB’s web accessibility policies and ADA provisions for the web.