Responsive Design Template

Checklist

Please note: The web team will begin cleaning up code and removing buttons/graphics as pages are found not in compliance. If an update is made to a page to bring it into compliance, a note will be added to the file in the viewable from "versions" within OU Campus.

Follow this checklist to identify items that will not transfer to responsive design:

• Do you have blank or under-construction pages in need of content?
• Have you checked your “files” folder for duplication or files that do not follow the naming conventions?
• Are you using images or buttons as content?
• Are there broken links on your pages?
• Are you using "span" tags or "div" tags within your HTML?
• Is content spaced correctly on the page?
• Is content centered on the page?
• Do links on your page say “click here,” “follow this link” or spell out the URL?
• Does your page display differently than the top-level pages of the UT Tyler website?
• Do you have duplicate content on any of your pages?
• Are you using all caps, erroneous bold/italics or multiple exclamation marks to display content?
• Are portions of your pages inaccessible for people with disabilities?

Answering “yes” to any of these questions will help identify sections to update. Visit the Best Practices page for additional information or email web@uttyler.edu.

NOTE: Pages using DIV tags, SPAN tags or erroneous Tables will not migrate to the new server.

Additional Notes

Images

Avoid gratuitous use of buttons, icons, graphics, flash, mouseovers and animated images.

The new UT Tyler responsive website templates will include a multitude of usable CSS-created buttons and graphics that will be available for users.

Please REMOVE all buttons, images, graphics, illustrations, icons and replace with the correct active link. If the graphic is used for text, replace the graphic with the appropriate text.

NOTE: Usability tests have shown that animations and buttons distract users from the content on a page. If the purpose of graphics or animation is decoration or attention, they should not be used.

Remember this rule: Just because you can, doesn't mean you should.

Links

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

Correct:

• • View Course Catalog
  • Explore UT Tyler Majors
  • For more information visit Marketing and Communications
  • We encourage you to visit our campus and see for yoursel

Incorrect

• • Incorrect: More Information on Marketing and Information
  • Incorrect: Click Here for Information
  • Incorrect: Please visit http://www.uttyler.edu/math/grad/program.php
  • Incorrect: Visit our campus at http://www.uttyler.edu/visit

Remember this rule, ask yourself: When reading the link, would the user know where the link is taking them?
("Click here" doesn't explain. "View course catalog" does explain.)

More about "call to action" links.

Text

Consistency is key.

• The UT Tyler template is designed for left-aligned text. Centered text is harder to read than left-aligned text, and may not display correctly on various screens.
• 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. This includes RED!!!
• Avoid using the header tags for sizing paragraph fonts. Header tags (H1 and H2) are for the top of each page. To help Google crawl pages, avoid using H1 and H2 header tags for paragraph titles. Do not use header tags for entire paragraphs.

Remember this rule: Don't scream at your audience, display content that will easily adapt to ALL screens. Back to rule number 1, "Just because you can, doesn't mean you should!"

Contact Information

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 web pages:

Correct: info@uttyler.edu

Incorrect: jsmith@uttyler.edu

Please request a department email through itsupport@uttyler.edu

Remember this rule, ask yourself: Does the contact information on your page display the same as contact information on the main UT Tyler website?

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?

Stay Consistent

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

Aligning Text

• Avoid center a paragraph; makes it difficult to read.
• Avoid using the "heading" options to style a paragraph.
• The default is left-aligned text.

Readability

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

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 web@uttyler.edu.

Contact Information

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 web pages:

Correct: info@uttyler.edu

Incorrect: jsmith@uttyler.edu

Please request a department email through itsupport@uttyler.edu

Naming PDFs

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.

Avoid These

• "Welcome to the Department of ... Website"
• "Coming Soon" or "Under Construction" or under construction graphics.
• "Check back often for new additions!!"

Replacing Files

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.

Images

• 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 web@uttyler.edu.
• Use jpg (pictures), gif or png (graphics) formats.

Validation

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.

Duplicate Content

Avoid duplicate content. The UT Tyler website maintains extensive web-based information that should be referenced by linking to or using assets rather than duplicated.

Underlines

Avoid using an underline within your text. Users will confuse underlined text with hyperlinked text.

Remember this rule, ask yourself: Did I just add an underline, now my text looks like a hyperlink?

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.

Mission Statements

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

Search Engines

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 web@uttyler.edu.