Accessibility
Browsers and Screens
Directories
Meta Tags
Pop-up Windows
Search
Validation
Best Practices
The technological choices you make can either please or frustrate your viewers. Some, like meta tags, will make your site easier to find and use. Others, like pop-up windows, may sometimes prevent users from seeing important information. Make sure the technology you use serves your users’ needs.
Accessibility
Users should be able to navigate your site without seeing your photos or other graphics. Your site should be accessible for those using assistive methods and/or alternative methods to access the Web. It’s important to remember that
many mobile-phone users are now viewing Web sites using the text-based features of their telephones.
Check to see if your site meets accessibility standards (commonly called Section 508 standards) by using the free
"WebXACT" utility at Watchfire.com or downloading the
AIS Toolbar. Contact the
DePaul Publications Group if you have questions or need assistance.
- Users should be able to move through site using <TAB> instead of a mouse.
- Users who are colorblind should be able to view your site.
- Identify graphics and images by using <ALT> tags, which briefly describe the content or purpose of graphics or images. Example: <img src="holtschneider_photo.jpg" alt="Photo of Rev. Dennis H. Holtschneider, C.M., President">
- If you must post pages that cannot be viewed by using assistive methods, then you also must provide a text version for each of those pages, linked from the top of each corresponding page.
Browsers and Screens
Web sites should support a
wide range of individual Web browsers. We recommend that you use
HTML 4.0 specifications and related approved technologies from the
W3 Consortium, the recognized specifications body for the Web.
Non-WC3 formats, such as PDFs or Shockwave, require either plug-ins or stand-alone applications, which often make them inaccessible to visitors using assistive methods and non-graphical browsers. Therefore,
use non-WC3 formats sparingly and stay with common applications, such as the Adobe Reader.
Your page should be viewable and function correctly on a wide range of screens. The
most common display size is 1024 x 768, followed by 800 x 600. Many users set their browser at less than full screen. If you can’t design for a range of screen sizes, design for an 800 x 600 pixel screen.
Check your Web design on a variety of browsers. We recommend checking on PC's using Netscape, Internet Explorer, Firefox, Opera, a Lynx text browser and a voice browser. Check Macs using Netscape, Firefox, Opera and Safari. Your site should be navigable and function in all these browsers; minor differences in presentation may be acceptable. This step is particularly important if you use a Web page design program such as Microsoft Front Page or Netscape Composer, which can introduce code that may be incompatible with other browsers.
Directories
Organize your content in clear, simple directories. Keep your directory organization shallow so that URLS don’t get too long. Use underscores rather than spaces in directory names, i.e., real_estate/. Don’t mix upper- and lower-case letters.
Put all similar elements, such as images, in the same directory. Sample directories include:
/images – all graphic files, including .jpeg and .gif files
/cgi-bin – all script and program files, including .pl and .cgi files
Use content to organize the other directories. For example, group admission-related articles in a directory called /admission.
Meta Tags
Meta tags, sometimes called metadata, are the Web equivalent of a library card catalog.
They provide additional descriptive information about your Web page that helps your site be more prominently displayed in search results, both by DePaul’s search engine and by outside search engines such as Google and Lycos. Search engines match the keywords you supply with the words in a user’s search criteria. The better the match, the higher your page will appear in search results.
Meta tags also allow you to embed information that can help you maintain your site, such as the date and author of the last revision.
The most common meta tags are <keywords> and <description>. These two tags are frequently bracketed within a comment in the code at the top of your page.
<Keywords> allows you to list words that describe the content of your site. The syntax for <keyword> is:
<META name="keywords" content="word,word,phrase,word,">
<Description> uses text to describe the content of your site. Search engines display it in place of the first few lines of text on your site, which might not wholly describe your content. The syntax for description is:
<META name="description" content="text about your site">
Here’s an example from DePaul’s Web site:
<meta name="keywords" content="Admissions, financial aid, college, university, higher education, degree, advanced degree, scholarships, application, high school counselor, apply, transcripts, college advisor, room and board, dorm, dormitory, tuition, apply online, freshman, international students, transfer student, credits, hours, credit hours, adult student, international program, undergraduate, graduate, student life, student activities, Chicago, campus life, about DePaul, DePaul world, Lincoln Park, Loop, Barat, Barat College, Blue Demons, DePaul sports, sports, college sports, college scholarships, academic calendar, study abroad, liberal arts, education, law school, business, computer science, computers, business school, GSB, JD, PhD, BA, BS, MA, MS, fitness center, campus map, library">
<meta name="description" content="Founded in 1898, DePaul University is the largest Catholic university in the nation and the largest private institution in Chicago, serving over 20,000 students - who can choose from over 200 comprehensive and innovative graduate and undergraduate programs. Students at DePaul reflect a broad diversity of ethnic, religious, geographic and economic backgrounds. With exceptional and award-winning academic programs offered at 6 city and suburban campuses, DePaul offers students a wide range of activities - both on campus and off ¬ which enhance the overall educational experience.">
We also recommend including the following Dublin Core elements, which are a subset of the international Web standards.
<!-- Dublin Core Metadata (DC) -->
<!-- use organization name here -->
<meta name="DC.Creator" content="DePaul University">
<!-- for the name of the resource assigned by the publisher -->
<meta name="DC.Title" content="Web Standards – Technical Elements – Meta tags">
<!-- topic of the resource, keywords and/or descriptive phrases -->
<meta name="DC.Subject" content="web publishing, style, guidelines">
<!-- a textual description (abstract) of the content of the page -->
<meta name="DC.Description" content="This page describes technical elements for Web page design at DePaul University">
<!-- name of agency responsible for making the resource available -->
<meta name="DC.Publisher" content="Enrollment Management, DePaul University">
<!-- creation date of this page in YYYY-MM-DD format -->
<meta name="DC.Date" content="2006-08-15">
<!-- type of content, i.e., text, images, to assist someone's understanding of what kind of hardware/software would be required to serve this page -->
<meta name="DC.Type" content="text/html">
<!-- URL for page -->
<meta name="DC.Identifier" content="http://www.depaul.edu/brandmanual/technical.html">
<!-- language of the content -->
<meta name="DC.Language" content="English">
<!-- a link to publishers copyright statement if applicable -->
<meta name="DC.Rights" content="Copyright 2006, DePaul University">
Pop-up Windows
We discourage the use of pop-up windows for two reasons. First, many viewers have disabled pop-ups within their browsers, so they do not see the information you are trying to provide. Second, pop-up windows often confuse viewers who don’t realize a new window has opened. They cannot use the Back button to return to your original page.
If you use a pop-up window, you must notify the user about the new window and how to return to your original page. The user also should be able to turn off the pop-up window easily.
Search Engines
You may choose to register your site with search engines such as Yahoo! and Google. Although some commercial search engines employ tools to find new sites, some do not. Check the search engine’s main page for information about how to register your site.
Validation
Validating your Web pages not only helps to ensure conformity to HTML standards, but also helps to reduce the possibility that your pages will render incorrectly in a browser.
According to the W3C, the process of verifying whether a document actually follows the rules for the language(s) it uses is called
validation, and the tool used for that is a validator. A document that passes this process with success is called
valid. The W3C has a free validation tool available at
http://validator.w3.org/.
Best Practices
- Test your Web site in multiple browsers. Web pages appear differently depending on the user's platform, screen, font size, and more.
- Have people who aren’t familiar with your Web site test it. This is called usability testing. With just half a dozen people, you can determine if your site design meets your users’ needs.
- Use content buffers to prevent text columns from exceeding 70 to 75 characters. Text that stretches the width of a Web browser is difficult to read.
- If your site requires a plug-in or an application, offer a link to download it.
