OU Campus Training and Support
May 31, 2015
The steps below are best practices to assist pages in behaving properly in the new UT Tyler responsive website design, scheduled for release in 2016.
To assist with moving to responsive design, please take the time to clean up pages not adhering to the rules below.
Identify Your Audience
- Can the user understand what each page has to offer and how to use your page within the first 5-10 seconds?
- Give users information they are looking for, not how amazing your service or design skills are.
- Avoid adding information to a page using GRAPHICS, content is KEY.
A website is about solving a visitors problem. When adding content, ask this question:
What problem am I solving with the information I am adding to this page?
- Use style, edits and content design that are consistent with top level pages and the UT Tyler styleguide.
- Font style and size are to remain the same on all pages. (Be careful not to bring in erroneous code or add font sizes, spacing or colors and header sizes when pasting from Word).
- Please avoid centered text or colored text.
- Please avoid extra buttons not approved by the Web team.
Remember this rule: Just because you can, doesn't mean you should.
Layout (Template Style Guide)
- Use H1 and H2 headings only at the top of each page. Avoid H1 and H2 tags in the content of the page.
- Keep all text left-aligned.
- Avoid erroneous HTML code into the HTML editor, including colors within tables. (avoid <span> and <div> tags)
- Avoid extra spacing between paragraphs, remove extra space.
- The template font is pre-set. Bold font or italicized should be used sparingly.
- ALL caps should be avoided along with exclamation marks.
- Use text links to link back to other pages, avoid button graphics.
- Save your page often within OU Campus as you are working within your content.
- Avoid center a paragraph; makes it difficult to read.
- Avoid using the "heading" options to style a paragraph.
- The default is left-aligned text.
- Use a call to action (descriptive) link when you ask a user to click on your link. Avoid URL links, buttons and language like "click on this link."
- Use text links rather than graphics for hyperlinks. In general, text links are more easily recognized as clickable, they download faster, and it is usually easier to convey a link’s destination in text, rather than with the use of an image.
- The UT Tyler template is designed for left-aligned text. Centered text is harder to read than left-aligned text.
- Text in ALL CAPS takes up extra space, is harder to read and slows down reading. Avoid using all caps.
- The UT Tyler template is designed with black type, white background. It is against UT Tyler Web standards to edit the text to a different color font by altering the HTML.
- Avoid using the header tags for sizing paragraph fonts. Using header tags (H3, H4) for paragraph titles can help your pages in search engines. Do NOT use header tags for entire paragraphs.
Avoid gratuitous use of graphics, flash and animated images.
Unapproved logos/graphics, animated graphics and flash images should not be used unless they illustrate an important concept within your website. Usability tests have shown that animations distract users from the content on a page. If the purpose of graphics or animation is decoration, they should not be used.
Match link titles with their destination page.
Make the link text consistent with the title or headings on the destination page. Closely matched links and destination targets help provide the necessary feedback to users that they have reached the intended page. In addition, it is very important to alter the meta data within your page. Meta titles are different from page titles! For more information, contact firstname.lastname@example.org.
The appropriate style for phone number is to use periods instead of dashes:
|Correct: 903.566.7203||Incorrect: (903) 566-7203|
The appropriate contact email for department webpages:
|Correct: email@example.com||Incorrect: firstname.lastname@example.org|
Please request a department email through email@example.com
Use generic file names when naming PDF's. Each time you re-upload your PDF, name the PDF the same file name. Use "overwrite" to replace the file.
- "Welcome to the Department of ... Website"
- "Coming Soon" or "Under Construction" or under construction graphics.
- "Check back often for new additions!!"
Avoid uploading a new file each time a file should be updated. Instead, name your PDF or WORD file a generic name. When the departments updates the file, replace the file with the same file name. See uploading files.
- Ensure images are sized exactly as it will be displayed on the page. NEVER upload an image larger than it should be displayed on the page. Questions? Email firstname.lastname@example.org.
- Use jpg (pictures), gif or png (graphics) formats.
Validate your web pages using the tool located within the UT Tyler CMS just before you publish your web page to check for broken links and typos.
Avoid using an underline within your text. Users will confuse underlined text with hyperlinked text.
Eliminate all happy talk.
All text on a Web page should be as concise as possible with all non essential information removed. Happy talk is the self-congratulatory promotional type text seen on many Web pages. Phrases like “Welcome to our website!,” “we provide the best ever…,” “Thank you for visiting our website!” should be eliminated.
Use Familiar Words
Use words that are familiar to your visitors and avoid the use of jargon. If acronyms and abbreviations are used, they should be defined on the page. Visitors are not necessarily familiar with acronyms and abbreviations used within your department or region. Reviewing your site’s search engine statistics can give you a clue what words your users are looking for.
If department mission statements are included on a department website, it is best to keep them short and concise and on an inside page. They should be linked from the left-side menu under "Department Information."
To aid searches, repeat your keywords and their synonyms throughout your copy, headers and subheaders.
Open new windows and tabs ONLY when necessary.
According to W3C standards, all links and tabs are to open in the same window unless necessary (i.e. online secure form)
Don’t Break the Back Button
Use standard redirects instead of a “refresh” or on links from front pages to redirect a website. With refresh, every time the user clicks "Back", the browser returns to a page that bounces the user forward again. For correct redirect code, contact email@example.com.