Examples of Publications
Web Standards
The following guidelines and specifications should be implemented by all websites affiliated to the College of Liberal Arts and Sciences. Special attention should be made to adhere to accessibility requirements for disabled students, and to ensure that a website will be effectively read by a browser designed for disabled users (often referred to as a screen reader). Click on the link to read more about any of the guidelines, and how to implement this on your website.
Required Homepage Guidelines
All homepages should contain the following information
- Date of last revision
- The name of the unit or group represented by the page
- A means of contacting the person(s) maintaining the page
- CLAS Shield or Word mark
- The University word mark
- An active link to the UF home page (UF Acceptable Use Policy)
- An active link to the CLAS homepage
- Provide a text link table of contents of the site
Required Page Elements
All Pages of a site should contain the following information:
- The name of the unit or group represented by the page
- A means of contacting the person(s) maintaining the page
- An active link to the UF home page (UF Acceptable Use Policy)
- An active link to the CLAS homepage
- Provide a text link table of contents of the site
Required Navigation/File Management
General Site Guidelines
- Don't Use Flickering, Blinking, or Scrolling Text
- Use ALT tags
- Don't Rely on Colors to Convey Information
- Identify Changes in Language
- Don't Rely on Style Sheets to Convey Information
- Use Simple Language
- Provide Duplicate Links in Text Form for image maps and buttons as links
- Label Data Tables
- Avoid Using Frames or Title Each Frame
- Make Pages Usable Without Applets & Scripts
- Use Captions
Search Engine Optimization
Required Homepage Guidelines / Required Page Elements
- Date of Late Revision:
Please specify the last date on which content on the site was updated. - The name of the unit or group
represented by the page
The unit, department, or group represented by the website should be prominently displayed on the page. - A means of contacting the person(s)
maintaining the page
There should be an email address to contact the person responsible for the update and maintenance of the website. - CLAS Shield or Word mark
The home page should include a graphic representing the College of Liberal Arts and Sciences. Each website can choose between three differing graphics: the CLAS Shield Logo, the logotype from the Shield logo sans graphic, or the CLAS word mark.
Each of these graphics is available for download as transparent gifs or with a white background. If you require either graphic in a different format or with specific color requirements, please contact the CLAS Webmaster. - The University word mark
The home page should include a graphic representing the University of Florida The Public Affairs department provides a variety of acceptable versions at: http://www.webadmin.ufl.edu/graphics/wordmarks.html
If you require either graphic in a different format or with specific color requirements, please contact the CLAS Webmaster. - An active link to the UF home
page
Every page on a site should contain a link back to the University of Florida home page (http://www.ufl.edu). This link can be placed anywhere on the page. On the site’s home page, the UF logo should also be made an active link to the UF homepage as well. - An active link to the CLAS homepage
Every page on a site should contain a link back to the College of Liberal Arts and Sciences home page (http://www.clas.ufl.edu). This link can be placed anywhere on the page. On the site’s home page, the CLAS logo should also be made an active link to the UF homepage as well. - Provide a text link table of
contents of the site
In addition to wahetever form of navigation is used for your website, there should a text-based table of contents that lists all of the available pages of your site. is a needed resource to accomodate students with disabilities that use screen readers to use websites.
This table of contents should be accessible from each page of your site. On the site homepage, the active link for this page should be located as close to the top of the page as possible. On subpages, the link for this table of contents can be located in the footer of the page.
Note: If you are using a UF Web Template for your site design, the link to the table of contents should be included in the content of the page, rather than in the right-hand navigation of the site. Due to the design of the style sheets, tabbing through links starts with content section, and then goes to the emnu system last, ehich means that a link to the table of contents would be listed far down the site and would make it for difficult ot be used a student with disabilities. There is a workaround that can be used to place a link on the content side without having to add a visible link that interrupts the flow of your content:- Create a gif with a height and width of 1. Either make the gif tranparent or the same color as the background of the content section (in the case of UF templates, this would be white or #000000.
- Insert the .gif as close as possible to the top of the content side, after the primary image. A good location would be immediately after the text of the first headline of the content section.
- Make sure to specify an ALT tag for the image that informs the
user the image links tot he text-based table of contents (for example,
"Go directly to site map". - Make the image a hyperlink that links to the text table of contents.
- Here is an example:
The current headline code appears as:
<h4>Summer A & B</h4>
Change to:
<h4>Summer A & B <a href="sitemap.html"><img src="siteindex.gif"
height="1" width="1" alt="Go to the Text-Based Site Index"></a></h4>
Required Navigation
- Removing Spacing,
Capitalization in File Names
Files names that include spaces can easily be misinterpreted by browsers and will result in broken links. Instead, use one-word names for pages; if a space is warranted, use the underscore in lieu of a space. Also, be consistent in capitalization, as an incorrect case can also break a link for some browsers. It is recommended that to avoid confusion, eliminate all capitalization in a page name.
Examples:
Incorrect: DIR Report 051205.html
Correct: dirreport_051234.html
Incorrect: About us.html
Correct: aboutus.html
General Site Guidelines
- Don't Use Flickering,
Blinking, or Scrolling Text
Text with special visual effects can be difficult to discern by the average user and are often misinterpreted or ignored by screen readers. - Use ALT tags
Include an “alt” tag for all non-text elements, including images, image maps, animations, applets, frames, scripts, spacers, sounds, and video. For "spacer" images or unimportant graphics, use alt=" " as your tag.
Example:
<img src="topo.jpg" alt="current routes at Boulders Climbing Gym"> - Don't Rely on Colors to Convey
Information
Colors used in your site can vary greatly depending on the monitor being used by the user. In addition, the end user might have a color blindness that would render some colors and material invisible. One should take care to review that the sight would still be usable in either of these conditions.
To test whether your document still works without colors, examine it with a monochrome monitor or browser colors turned off. To test whether color contrast is sufficient to be read by people with color deficiencies or by those with low resolution monitors, print pages on a black and white printer (with backgrounds and colors appearing in grayscale), or use a free web tool such as www.vizcheck.com to see how the colors will alter depending on the color blindness the user has. - Identify Changes in Language
If you use a number of different languages on a page, make sure that any changes in language are clearly identified by using the "lang" attribute.
Example:
<p>and with a certain <span lang="fr">je ne sais quoi</span>, she entered both the room and his life, forever. <p>My name is Natasha,</p> she said. <p lang="it">Piacere,</p> he replied in impeccable Italian, locking the door. - Don't Rely on Style Sheets to
Convey Information
Organize documents so they may be read without style sheets. Provide a text equivalent for any important image or text generated by style sheets (e.g., via the 'background-image', 'list-style', or 'content' properties). Ensure that important content appears in the document object. - Use Simple Language
Avoid using overly complex language or sentences with confusing sentence structures, which can confuse a screen reader. - Provide Duplicate Links in Text
Form for image maps and buttons as links
Text is considered accessible to almost all users since it may be handled by screen readers, non-visual browsers, and Braille readers. It may be displayed visually, magnified, synchronized with a video to create a caption, etc. As you design a document containing non-textual information (images, applets, sounds, multimedia presentations, etc.), supplement that information with textual equivalents wherever possible. - Label Data Tables
For data tables, identify row and column headers. Screen readers read tables line-by-line. Identifiers will organize the data.
Example:
<table border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar.">
<caption>Cups of coffee consumed by each senator</caption>
<tr>
<th id="header1">Name</th>
<th id="header2">Cups</th>
<th id="header3" abbr="Type">Type of Coffee</th>
<th id="header4">Sugar?</th>
</tr>
</table> - Avoid Using Frames or Title
Each Frame
Title each frame to facilitate frame identification and navigation. - Make Pages Usable Without
Applets & Scripts
Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. - Use Captions
For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation.
Search Engine Optimization
Of increasing importance in developing sites is getting a high-ranking score in search engine results. Even in an academic setting, this is important for our sites in order to attract potential students, faculty, and donors. There are several internal methods we can use to increase our sites rankings in search engines.
Content
Of course, the content of your site is important. Be sure to include important key words and search terms as much as possible in the body of your site. Make sure to update your content as much as possible. Adding news and events is a good way to generate content; for example links and short descriptions of faculty research and publications.
Meta Tags
Meta Tags are html tags included in the head of your webpage (between the <head></head> tags at the top of the page). Information contained in the head of document is not visible by end users viewing your web page in a web browser. Therefore, the information contained here is only important in categorizing or classifying your page. Meta Tags give the webmaster some degree of control as to how their site is described by some search engines. They can also be used to prevent pages from being indexed at all.
- The Title Tag
Although not a Meta Tag, the HTML title tag ( <title> </title>) is also located within the head of a document. The Title tag determines the text that appears at the top of the browser window. It is also the most crucial tag for search engine placement. The text you use is used to generate the list of key words associated with your site and it’s ranking. Many search engines use this specific phrase as the title for your listing in a search. In addition to being used by Search Engines, the title tag is also used as the words to describe your page when someone adds it to their "Favorites" or "Bookmarks" lists.
Think about the keywords you’d like your website to be found for in a crawler-based search engines, and then use these terms into your title tag. Be short and descriptive in your title, as the browser window limits the total number of characters visible. Avoid the use of extraneous symbols; for example, University-Physics or University_Physics would limit the keyword to “University-Physics” and ” University_Physics”, instead of separate keywords of “University” and “Physics”. - The Meta Description Tag
The Meta description tag specifies the description of your page in search engines (most importantly for AltaVista). The description tag should be used to create a single sentence that acts as a summary for the website. The description should be no more than 200-250 characters in length. While Google ignores this tag and creates its own summary of the page for its search engine results, AltaVista will use this description, and other search engines will use it in part. An easy way to create this tag is to use the first few sentences of content from the page and cut and paste them into a description tag. - The Meta Keywords Tag
The Meta keywords tag allows you to provide a series of keywords that a search engines indexes along with the body of your web page. This tag has fallen into disuse and is not supported by the major search engines. However, it is a good tag to use to include synonyms and related words to your site that might not appear in the body of the page. Although ignored by the larger search engines, it can increase rankings on some of the smaller ones. - Meta Robots Tag
The Meta robot tag lets you state that a page should NOT be indexed by a search engine. - Other Meta Tags
There are many other meta tags available, but these are used internally by a website and have no bearing on Search Engine indexing.
ALT Tags
Alt Tags are used to create a description for images on your site. ALT tags are already recommended by both UF and CLASnet as best practices for websites, as the alt tag is used by browsers that cannot see images to describe what is within the image. This is especially important for visually impaired web users, as screen readers use the alt tag to describe what the individual is incapable of seeing.
Alt tags are also identified by search engines as text on the page.
Therefore, it is good to make sure that your ALT tags are crafted to include keywords.
Links
The biggest weight in determining a web page’s Page Rank in Google are the number of links that link to that page. Links can either be internal (part of one website) or external (links from other websites).
- External Links
Links from pages with higher page rankings increase your page rankings. Similarly, a large number of links from similar keyword groupings will also increase page rankings. For the most part, it is difficult to control the number or value of external links to your site. Watch out for companies that offer to link to your site, as they might be part of groups that sponsor link farms, which are websites solely made up of hundreds of interlinked pages. This tactic of artificially boosting page rank has been recognized by Google, and Google will decease the page ranks of sites it finds using this tactic.
Websites at the University have a good network for developing external links. There are links from the UF and CLAS directories to department, center, and program’s home page. Encourage faculty members to make sure that their personal and class-related pages link back to your home pages as well. Whenever possible, include hyperlinks in your page to any relevant pages – faculty pages, other departments, course, etc. Increasing the number of cross-links throughout the university will help to increase everyone’s page rankings. - Internal Links
Webmasters have greater control over the internal links of their website. Page Rankings increase when links on a site are interconnected in a web framework, rather than a straight linear layout:
In the linear progression, pages link to each other one after another, and do not refer to other pages on the site. In the interconnected model, each page has links to other pages throughout the architecture of the website. The interconnected model has far more links shared between pages, and consequentially a greater Page Ranking by Google. For example:
Menu 1 is a site-wide menu that interconnects all main pages of the site to one another. Menu 2 connects all page of the site to four content specific pages that then link to sub-pages under the main pages of the site. Menu 3 connects similar themed pages and sub-pages to a section together. All three menus have differing levels of interconnectedness and help to create a rich linking environment that will boost the ranking of the site as a whole. Furthermore, a site map that links to all pages on the site from one page is also valuable to the search engines for linking. - For a more in-depth explanation of how these rankings are scored, visit, http://www.webworkshop.net/pagerank.html
Pitfalls to Avoid
Take care to avoid the following methods and practices, as they are searched for by Google and other search engines and can negatively affect your ratings:
- Make sure that sites that you linked to have relevant content to your own. Irrelevant content can decease your rating.
- Make sure your keywords are relevant to the content of your page.
- Don’t stuff your keyword meta-tag with the same or similar search terms over and over again. Also, do not hide keywords in your text (this was a method of increasing ranking by making a list of key words and hiding it on a page by making it the same color as a background – invisible to the end user, but visible to the search engine).
- Avoid link farms, which are a list of links coupled with search terms (you probably have encountered these on the web when you have misspelled an address of a popular web site). In addition, avoid linking to sites that invite you to link to them, for the same reasons.
