Skip to content

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 and are also welcomed to contact us for additional assistance and to download a PDF version of the UB Web Style Guide.

Publish your Web content in style. Use the UB Web Style Guide.


Core Principles and Objectives

  • Prioritization

    • 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).
    • Each major internal audience has a corresponding landing page or subsite:
    • 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.
  • Coordination

    • UB’s main site and college, school and library sites were 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 University Relations staff.
    • 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.
  • Maintenance

    • 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?

Write Well for the Web.

Writing for the Web is different than writing for other media.
Here are some guidelines to help maximize your Web content.

  • Be brief.

    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.

    Strategies include:

    • 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 Web Writing Tips and not: Check out Web Writing Tips at www.ubalt.edu/webwritingtips).
  • 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.

    Good link-labels:

    • 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 learn about Web writing or 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 the Guide to Editorial Style within UB's Graphics Standards and 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 2013.” If you put date-sensitive copy on pages, make sure you update the pages regularly.


Information Architecture

  • 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.

    • Example:
      For more information, email us.
      not: For more information, email us. (Note that the period is incorrectly underlined.)
    • If you want to include a linked email address, do so like this:
      For more information, email Jane Smith.
      not: For more information, email Jane Smith at jsmith@ubalt.edu.
  • 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 the R 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.


The Design of Your Web Pages

  • 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 University Relations.
  • Headers

    Use these to break content up into well-labeled, intuitive categories; they also provide a resting place for the eye.

    Tips:

    • Never use Heading 1; it's reserved for the page title.
    • 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.

    Tips:
    • 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.

    Tips:
    • 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.
  • Accordions and FAQs

    Use these expandable content fields to organize lengthy content on a single page. Accordions open when you click the plus sign, then close when you click a different one. FAQs open and close by clicking the same plus sign; otherwise, they remain open.

    Tips:
    • Use clear, intuitive language as the labels for accordions and FAQs, so users know what information they'll find when expanding them.
    • Accordions are great solutions for course descriptions, lists, calendars and other structured information.
  • Carousels and photo stacks

    Use these to include a large selection of images on a page without occupying much valuable space. Carousels appear in a strip across the top of a page (with five to six images visible at a time); see images in a larger format by clicking on their thumbnails. Photo stacks appear in the body of the page on the right-hand side; click on the images to flip through them.

    Tips:
    • Stick to no more than 10 images in a carousel or photo stack.
    • Make sure to size your photos (using image software like Photoshop) appropriately before uploading them to the CMS.
    • Organize your photos, if applicable, in a way that tells a story.
    • Make your captions brief and descriptive.
  • Quote block

    Use this style (in the dropdown menu under Styles) to call out brief information in body copy and to indicate testimonials. It will place a single, large, blue quotation mark to the left of your content.

    Tip:

    • Make sure your content is more than a single line; otherwise, the quote marks won’t appear correctly; if your content is only a single line, consider using a bullet instead.
  • Horizontal rule

    Use this gray line (a blue "bar" icon in the second row of the editor toolbar) to partition content on your page.

    Tip:
    • If you leave the "width" field blank in the dialogue box that appears when you click the icon, your horizontal rule will be the full width of the page.
  • Columns

    Use these to incorporate lengthy copy (especially lengthy lists) while occupying less space on your page. You can choose between two or three columns.

    Tips:
    • 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.

  • ADA Compliance

    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 ADA provisions for the Web.