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.
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.
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.
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:
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.
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:
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.
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.
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.
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.
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 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.
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.
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.
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.
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:
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:
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 this gray line (a blue "bar" icon in the second row of the editor toolbar) to partition content on your page.Tip:
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: