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= Content- Language 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=iso- 8859-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, contactperson@utb.edu > Page 10
ACCESSIBILITY DOS AND DON TS (CONT) Heading Tags 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 > 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