Download document 8887854

Table of Contents
Introduction .................................................................................................................................................. 2
Overall Page Design Guidelines ................................................................................................................... 3
Writing for the Web ..................................................................................................................................... 4
Photography Guidelines............................................................................................................................... 7
Typography Guidelines ................................................................................................................................ 8
Accessibility Do’s and Don’ts ..................................................................................................................... 10
Page 1
INTRODUCTION
A consistent, unified look is crucial to the marketing efforts of The University of Texas at Brownsville. It is
consistency that gives our institution a distinctive brand.
These web guidelines apply to all official UTB web pages that have been generated by UTB, its
departments, schools, colleges and other administrative offices. To guarantee a consistent web
presence, official webpages for UTB should be visually related in order to help support usability and to
reinforce UTB’s brand identity.
Page 2
OVERALL PAGE DESIGN GUIDELINES
USE OF BULLETS
Bullets points should be concise and to the point. They should be used to call out multiple points about a
topic or to quickly relay information. They should not be used to bullet a whole paragraph or more than
two sentences. Bullet points are also used in the secondary navigation section of the website to call out
the tertiary navigation. Bullet points use the UTB blue and are 10 points in size.
SIZE OF NAVIGATIONAL LINKS ON SECONDARY PAGES
The links in the secondary navigation section should be concise and to the point. Links should not be
more than five words if possible. Use common abbreviations.
PARAGRAPH SIZE PAREMETERS
When possible, it is recommended that all paragraphs be 100 words or fewer. Too much information
can cause the user to become overwhelmed and disinterested, not allowing the intended message to
come across. Pages of scrolling content are not reader friendly and should be avoided.
LINKS TO EXTERNAL DOCUMENTS
All links to external documents need to open up as PDFs in a new browser window. University
administrative office PDFs need to be branded with a consistent header and should stay consistent with
the UTB brand standards. PDF documents should be no larger than 1 megabyte. Please keep in mind
that some users will be on dial-up or mobile devices and the larger the document the slower it will open
depending on the connection speed. PDF documents should not be secured or locked in any way – these
muse be completely accessible or the document must be provided in an HTML format for the reader.
Where possible, provide a text only version of the document. We suggest a link to Adobe’s site to inform
visually impaired people about current uses of Adobe Reader http://www.adobe.com/accessibility/products/reader.html
HYPERLINKS
Hyperlinks should be underlined and italicized to differentiate between the link and normal body copy.
The text should stay the same size and weight. The font color will be the UTB blue Hex #002244 and
R0 G34 B68.
USE OF BACKGROUND COLOR
To keep consistent with the UTB brand identity on the website, the background color is to remain white.
The use of other background colors is not allowed.
Page 3
WRITING FOR THE WEB
When writing, please follow the standards set forth in the UTB Style Guide for word usage. For questions
about word usage not in the guide, consult the AP Style Book and then the Webster’s New World
College Dictionary. For any other questions about word usage, contact the Editor of Web
Communications.
Writing for the web is different than writing for printed material. People rarely read web pages word for
word. Instead, they scan the page, picking out individual words and sentences. In research conducted by
Jakob Nielson on people’s websites reading habits, he found that 79 percent of the test users always
scanned any new page they came across; only 16 percent read word by word.
As a result, web pages have to employ scannable text, using:
•
•
•
•
•
•
Highlighted keywords (weight variations and hot links are one way to highlight among others).
Meaningful sub-headings (not just clever ones).
Bulleted lists (see UTB Style Guide for specific usage).
One idea per paragraph (users attention needs to be caught with the first few words of a
paragraph).
The inverted pyramid style, starting with the conclusion.
Half the word count (or less) of conventional writing.
The following checklist will assist in determining appropriate content for each web page:
•
•
•
•
Who is the intended audience for this web page?
Establish the message you want to convey and ask yourself why it is important to the audience.
List the pertinent information you feel is necessary to convey this message.
Prioritize the above list and identify the trigger words (common words the reader will look for).
KEEP THE TARGET AUDIENCE IN MIND
When writing, make sure you keep the target audience in mind by thinking about whom the readers are
and what they need and want. Identify people who will be interested in the information, such as
prospects, parents, alumni, potential donors and current students. Look at what you have written and
try to look at it from the perspective of each of your audiences, Adjust, if needed.
USE GENDER NEUTRAL LANGUAGE
Write sentences in plural form to avoid using constructions such as “he/she” or “he or she”. This allows
you to use “their” as a gender neutral pronoun.
Page 4
WRITING FOR THE WEB (CONT)
KEEP THE TARGET AUDIENCE IN MIND
UTB strives to follow guidelines for creating plain language text established by the Center for
Plain Language. The following are a few highlights from the guidelines. For additional information, visit
www.centerforplainlanguage.org.
•
•
•
•
Write in active voice as much as possible. Sentences in active voice are typically more concise
than sentences in passive voice.
Keep it short. Aim for an average sentence length of no more than 20 words, with no sentences
running more than 40 words. Cover only one subject in each paragraph and keep paragraphs
under 10 or 12 lines. Usability research suggests that 5-10 words per sentence and no more than
about 5 sentences per paragraph are ideal.
Use personal pronouns. Use personal pronouns when trying to create student, parent, or alumni
interaction. Additionally, use personal pronouns when incorporating instructional text and FAQs.
Write in a visually appealing style. Suggestions include:
• Using lots of information heading
• Writing short sections
• Using vertical lists
Structure your writing to achieve the highest rate of comprehension from your reader by following these
guidelines:
•
•
•
•
•
•
•
•
•
Put the most important message first.
Divide your material into short sections.
Group related ideas together.
Put material in an order that makes the best sense to the reader.
Do not use “and/or” and other unnecessary constructions using the virgule (slash). Using the
device “and/or,” “he/she,” “do/don’t” makes the meaning of a document unclear.
Avoid “shall.” Shall is an ambiguous word. It can mean must, ought or will.
Don’t use unnecessary qualifiers (such as seem lily, somewhat, usually, probably, often,
appears). They add no additional meaning to a sentence.
Don’t use multiple negatives. Use a positive statement instead. For example, white “He can”
instead of “He can’t not.”
Avoid redundancies.
OTHER WEB DESIGN AND USABILITY TIPS
The following are additional tips found in (name of publication) to use when developing content for the
web.
•
•
Make action sequences (such as filling out an application) clear. Structure the content so that
the sequence is obvious and consistent.
Avoid jargon when possible. Remember your target audience. Do not use words that typical
viewers may not understand. Use familiar words and define any jargon that has been deemed
necessary.
Page 5
WRITING FOR THE WEB (CONT)
•
•
•
•
Do not use unfamiliar or undefined acronyms or abbreviations on web sites. If abbreviations and
acronyms are used, please spell out on first reference in the text. Common abbreviations and
acronyms are preferred. Avoid when possible.
Use mixed upper and lowercase letters. Reading text is easier when capitalization is used
conventionally to start sentences and to indicate proper nouns and acronyms. If an item is
intended to attract the viewer’s attention, display the item in bold. But use this method
sparingly. Do not use this emphasis for more than one or two words or short phrases.
Limit the number of words and sentences. Remember that when writing for the web, keep text
concise. A sentence should not contain more than twenty words. Use Plain Language Principles
(outlined on previous page).
Make the first sentence descriptive. Include the primary theme of a paragraph, and the scope of
what it covers, in the first sentence of each paragraph.
Page 6
PHOTOGRAPHY GUIDELINES
WHEN TO ADD A PHOTO
It is important that photography be added that is pertinent to the content of the page. We are trying to
promote a sense of community and student life on campus. It is recommended to use architectural
shots that include students. Strictly architectural shots should be avoided.
PERMISSIONS
Photos taken of people should have a photo release with it. Releases must be obtained from all models
granting permission for specific terms of use on the UTB website. Photo releases are available on the
Creative Services website. All other graphics and images comply with the U.S. copyright and trademark
laws with the permission of the creator or owner.
MINIMUM AND MAXIMUM PHOTOGRAPHY SIZE
Image size for photography should be no more than 80 kilobytes and the resolution should be 72 dpi.
Keep in mind that some users will be on mobile devices or a dial-up connection and the larger the
photos, the longer it takes the website to load.
HOW TO LOWER THE RESOLUTION OF A PHOTO
To lower the resolution of a photo, open the photo in Photoshop type program, go to “Edit” and go to
“Image Size.” Change the DPI (dots per inch) to 72. For larger photos make sure the size is around 7
inches wide and for small photos 2 inches wide. You can also click “Save for Web” and that will
automatically change your resolution to 72 dpi, however it will not change your image size. After sizing
the image, be sure to do a “Save As” so you don’t overwrite your original, high resolution file. You’ll
want to save as a JPEG file. When choosing the compression level, keep quality in the medium to high
range. You want to shoot for a file size of 30 to 100 KB per image. Go small if you will be putting several
files on the same page. Try not exceeding 100 KB per Web page for the total of all images.
PHOTO CAPTIONS
Photo captions should be no more than two sentences and should be concise and to the point.
Page 7
TYPOGRAPHY GUIDELINES
All caps should be used for headlines and subheads Links, body copy and quotes should never be in all
caps. Bold should only be used for headlines and subheads as well as callouts. Never go smaller or bigger
than 11 point for the body copy. Please follow the guidelines listed below:
HEADING 1 (H1) – to be used for headlines or main topics. Headlines should be in all caps.
• Font: Verdana
• Size: 14 point
• Weight: bold
• Color: HEX # B76712 R183 G103 B18
HEADING 2 (H2) – to be used for subheads. Subheads should be in all caps.
• Font: Verdana
• Size: 12 point
• Weight: bold
• Color: HEX # 002244 R0 G34 B68
Heading 3 (H3) – bold, initial cap
• Font: Verdana
• Size: 11 point
• Weight: bold
• Color: HEX # 002244 R0 G34 B68
Heading 4 (H4) – normal, initial cap
• Font: Verdana
• Size: 11 point
• Weight: normal
• Color: HEX # 002244 R0 G34 B68
BODY COPY
• Font: Verdana
• Size: 11 point
• Weight: regular
• Leading: 18 point
• Color: HEX # 002244 R0 G34 B68
• Body copy is left justified
QUOTES
• Font: Georgia
• Size: 11 point
• Weight: regular
• Leading: 20 point
• Color: HEX # 002244
R0 G34 B68
Page 8
TYPOGRAPHY GUIDELINES (CONT)
CALL OUTS
• Font: Verdana
• Size: 11 point
• Weight: bold
• Leaving: 20 point
• Color: HEX # B76712 R183 G103 B18
• Callouts are right justified
USE OF COLOR
Our institution enjoys a lot of equity in the familiar orange (G183 G103 B18) (HEX#B76712), white (R255
G255 B255) (HEX#FFFFFF) and blue (R0 G34 B68) (HEX#002244) of the UTB logo. Brand recognition,
especially within the region served by UTB, is critical. Only these colors will be used on the website. Do
not stray from this color palette.
Page 9
ACCESSIBILITY DOS AND DON’TS
ACCESSIBILITY STANDARDS FOR UTB
The following guidelines attempt to outline a best practice for creation and maintenance of UTB web
properties to comply with and exceed TAC 206, TAC 213 and other deferral standards for accessibility.
WEB DESIGN GOLDEN RULE
When in doubt: Simplify. Use HTML best practices with a sensitivity for those who have visual, audible
and physical impairments. If it looks too complex, it probably is not a good idea for a web page.
GOOD HTML AND WEB PAGE CREATION STANDARDS
Browsers
•
UTB’s website must be compatible at a minimum with four internet browsers: Internet Explorer,
FireFox, Safari and Opera (a common browser used for accessibility).
Page Sizing and Printing
•
•
Adjustable page width – The site must use an adjustable page width, sometimes called liquid
design, which allows for adjustable resolution – so that users can easily scale the site in their
browsers for viewing.
Page Printing – All page text must print well or we must provide a printable alternative.
Page Header Information: Document Types, Title and Meta Tags
•
•
•
DOCTYPE Tag – A doctype of HTML 4.01 Transitional in all Web pages and validation to that
standard or greater. This tab tells a validator which version of HTML to use in checking the
document’s syntax.
Ex. <!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN”>
Title <Title> Tag – it should be seven words or less and descriptive
Ex. <title> Applied Business Technology Home Page </title>
META Tags - A number of meta tags must be used to define:
• Content-language – Must be used to declare language of the document. This is
especially important because our two main audiences are Spanish and English speaking.
• For American English, use <META HTTP-EQUIV=”Content-Language”
CONTENT=”EN-US”>
• For Latin American/Mexican Spanish, use <META HTTP-EQUIV=”ContentLanguage” CONTENT=”ES-MX”>
• Content-type – Use this tag. Failure to do so may cause display problem where, for
instance, the document uses UTF-8 punctuation characters but displays in ISO or ASCII
charsets. In other words, the characters will look like gibberish.
Ex. <META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;charset=ISO8859-1”>
• Author – Typically an unqualified author’s name. use the name of the organization
responsible for the page.
Ex. <META NAME=”author” CONTENT=”Office of Student Affairs,
[email protected]”>
Page 10
ACCESSIBILITY DOS AND DON’TS (CONT)
•
•
Description – A short, plain-language description of the page’s content.
Ex. <META NAME=”description” CONTENT=”The UTB Business Office provides
the most effective and efficient professional support services to students,
faculty, staff and management of the university and the community college.”>
Keywords – These are short word phrases that will help highlight the page for web
searches.
Ex. <META NAME=”keywords” CONTENT=”news, press releases”>
Heading Tags
•
•
•
Every page should use heading tags to create a hierarchy of information – like an outline for the
reader to follow, using the H1, H2, H3 and H4 tags, All Heading tags must have text content and
must be different from any ALT tags on that page.
Do not use bold, underlining or other font attributes to indicate sections, use Heading Tags.
Heading1 <H1>
• There must be at least one and no more than 2 <H1> headers on a page
• H1 tag text content should match part or all of the Title page
Page Text
• No unnecessary text styling. Do not use unique fonts, font sizes, styles, and text attributes
unless absolutely necessary. Rather, use the text fonts and styling as these are defined by the
CSS (Cascading Style Sheets) within the SharePoint system. In this way, it will be easier to
globally change the appearance of text in the future and it will be easier for all internet browsers
to read.
• If you copy and paste text into a web page, first copy it into Notepad to strip out all the
formatting. Then copy it from Notepad into the SharePoint web page. If you look at the source,
you will see the difference – in some places a 10 percent reduction in unnecessary html code
and there will be no font problems with the text.
Bold, Italics and Underline Tags <B><I><U>
•
Use these sparingly only for emphasis, not as section headers (Use Headers for that)
Other Tags
•
Don’t use other types of tags like Strikethrough to negate text. Just remove the text. Don’t use
tags to shadow, outline, emboss, engrave or otherwise enhance a good-looking font. It’s just
annoying, confusing to people with visual impairments and a circa-1995 type of thing to do.
Paragraph Tabs <P>
•
Use the <P> tag for all paragraphs; do not simply type text and separate information with Break
<BR> tags.
Page 11
ACCESSIBILITY DOS AND DON’TS (CONT)
Break Tags <BR>
•
Use this tag only to further separate paragraphs, lists and other elements that already are using
the proper HTML tags. Do not use <BR> tags to create paragraphs.
Tables <Table>
•
•
•
Limit the use of tables. The use of tables should be restricted to only presentation of data, not
for page design. All columns and rows must be clearly marked.
TH Tag <TH> - For each table, the first cell in each column must use the <TH> tag to identify that
it is the heading for the column of information.
Make smaller tables of information, rather than large tables that are too complex.
Frames <Frames>
•
No frames; that’s an archaic form of web design.
Images, Graphics, Charts, Maps, Videos, Audible Recordings
•
Alternate Tags <Alt> - All important images, graphics, charts, maps and other visual elements
should use the <Alt> tag to create a meaningful explanation of the element.
• Image maps that use the <Area> tag should also use an <alt> tag to describe each
section of the image
• Any charts, graphics or pictures using color to delineate information must also use text
and lines to define that information. Also, text in the <alt> tag should summarize the
chart.
• Any images (using the <img> tag) that are decorative should be nulled out (or hide) the
<alt> tag like this <img src=”image_name.jpg” alt=”” />
• Do not allow images to open in empty pages without supporting information text. All
people hate that.
Page 12
ACCESSIBILITY DOS AND DON’TS (CONT)
UNIQUE ATTRIBUTES FOR ACCESSIBILTY
• Navigation by Keyboard
All information on the page should be accessible using a PC keyboard.
• Site Map
There must be a site map automatically updated by the system.
• Maximum Page Length
We recommend web pages should not be longer than 2000 pixels (roughly 2 screen heights)
• Breadcrumb Navigation
Use breadcrumb navigation links to assist people in knowing where they are located within the
website
• No New Browser Window Openings
No automatic opening of new browser windows for linked html pages within the utb.edu
domain.
• Exception
Automatic opening of new browser window for PDF and other linked file types.
• Brackets
No brackets ( ) in phone numbers.
• Ordered and Unordered List <OL> <UL>
Do not use these in navigation bars
• Mouseovers <onmouseout><onmouseover>
None allowed.
• Banners, Marquees, Flashing Graphics
None allowed.
• Text/Background Distinction
The difference in contrast between text and background colors must be obvious and legible for
visually impaired people. If there’s a questions as to whether or not text and background are
compatible for accessibility purposes, the web designer should test the elements (using Hex
code for background and text colors) at this website:
http://webaim.org/resources/contrastchecker/ or by using a similar tool.
• Status Bar
No information or messages should be displayed in the bottom status bar of the browser
window.
• Video
Videos must have closed captioning or at a minimum text alternative documentation available in
HTML format; Videos or animations should provide an audio description of what’s happening.
• Scripts
Ensure all scripts allow accessibility, not prevent it.
• Image Maps
Provide text links for each active region of an image map (either client side or server side).
• Web Site Plug-Ins
Use limited plug-ins for web development. If plug-ins are used, these must be compatible with
IE, FireFox and Opera. In addition, the page should provide a link to download the plug-in for
those people that do not currently have it on their computer.
Page 13