Unit Banner

Web Best Practices: Development/Design

back to topCode and Validation

Web pages that validate to published formal grammars are well-structured documents. Well-structured documents are more easily made usable by all. Valid code is a good start in the right direction. Use the W3C Markup Validation Service to validate your code: http://validator.w3.org/.

Advanced Tip: You might want to use HTML Tidy, "a tool for checking and cleaning up HTML source files. It is especially useful for finding and correcting errors in deeply nested HTML, or for making grotesque code legible once more." An online version of HTML Tidy is available at: http://infohound.net/tidy/

Use a Doctype Statement

Use a doctype statement on each and every page. A typical doctype statement looks like this:

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Though the ATI calls for moving to XHTML Strict you can use XHTML Transitional for now. XHTML Transitional is more forgiving of mistakes made by inexperienced Web page creators. Design Web template systems so that they may be safely moved to XHTML Strict.

back to topMetaTags

Pay attention to the <title>, <description> and <keywords> metatags. The first two are important elements in Search Engine Optimization (SEO). Keywords are proven to have little value in SEO, but keywords should still be provided.

A Google search on "csu dominguez hills" yields the following listing first in the rankings:

California State University, Dominguez Hills
Academics are the heart of California State University, Dominguez Hills. From face-to-face interactions to learning in the comfort of your own home, ...
www.csudh.edu/ - 26k - Cached - Similar pages - Note this

Title

Every HTML document must have a TITLE element in the HEAD section. The title will show up in the top of the window, bookmark lists, breadcrumbs and search engine listing of the page.

For the <title> tag:
Use a descriptive title of the page, not "home." In the example above, the title element of the mainpage of csudh.edu is "California State University, Dominguez Hills" so that’s what appears in the Google listing.

Description

The description tag will give most search engines the descriptive text about the site.

For the <description> tag:
In the example above, the description in the mainpage of the csudh.edu site is: <meta name="description" content="Academics are the heart of California State University, Dominguez Hills. From face-to-face interactions to learning in the comfort of your own home, we offer a learning community where you can pursue your academic goals towards your future. Our urban university adheres to an environment of academic excellence, community service, and liberal education. We encourage students to learn outside the classroom by taking advantage of the many internship and research opportunities available out there." />

Notice how the beginning of that description appears in the listing. It is important to note that there is a limit to the length of the description. Too long a description, and much will be left out in the search engine listing. About 200 characters of text is the limit.

Keywords

Though keywords are not as important as title and description they do add something to the overall searchability of a page. Ultimately, though, it is the number of links leading from the site and the number of links from other sites leading back that provide the biggest justification for search engine ranking.

For the <keywords> tag:
In the example of the csudh.edu mainpage, here are the keywords: <meta name="keywords" content="California, State, University, Dominguez Hills, CSUDH, CSU Dominguez Hills, Toros, research, health, arts, science, education, teaching, business, public administration, teacher education, online programs, student affairs, Toro Alumni, Los Angeles, accredited, extended education, diversity, diverse, students, academics, achievement" />

It is important to note that there is a limit to the number of keywords. An overabundance of keywords can actually get a site blacklisted by search engines. Keep it simple.

Meta-Refresh

When a URL has changed, use a server-side redirect instead of automagically forwarding the user with a meta-refresh. If a server-side redirect is not possible then create an interstitial page with a static link to give the user total control of the environment. Click here for an example.

Do not use meta-refresh as it breaks the back button. The use of meta-refresh presents a behavior that is outside the control of the user. This can be confusing to new users, users of assistive technology, and users with cognitive issues. The user arrives at the new page with a non-functional back button and can’t retrace their steps.

Character Encoding

For the character encoding metatag, use:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

back to topUniversal Resource Locator (URL)

Within reason:
The name of the link should equal the page name.
The page name should equal the title element.
The title element should equal the filename.

Also known as the Universal Resource Indicator (URI), the URL is determined by the directory structure of the site coupled with the file name. An example is the csudh.edu WAM website. Located in a directory one level off the root named "WAM" the URL is: http://www.csudh.edu/wam/. Since the WAM site mainpage is "default.html" no file name appears in the URL. Only one page per directory gets this free ride, all subsequent pages display the file name in the URL. Some pages further down in level, such as this page has a filename appear after the directory name like this: http://www.csudh.edu/wam/resources/best_practices/devdesign.shtml.

Note that:
The menu link, "Dev/Design" closely equals the name of the page, "Development/Design"
The name of the page, "Development/Design," equals the title element, "Development/Design."
The title element, "Development/Design," closely equals the file name, "devdesign.html."

Invalid Characters

Important!: Do not use & (ampersand) or spaces without an underscore (_) in any link or filename as the ampersand will not pass W3C validation and the space will show up as "%20." Do not use ~ (tilde) where possible. The specification for URLs limits the use of allowed characters in URLs to only a limited subset of the US-ASCII character set:

"...Only alphanumerics [0-9a-zA-Z], the special characters $-_.+!*'(), and reserved characters used for their reserved purposes may be used unencoded within a URL." http://www.rfc-editor.org/rfc/rfc1738.txt

Directory Structure

Use the following schema for directory structure:
http://www.csudh.edu/division/department/section

An example is:
http://www.csudh.edu/univadv/ucpa/inthenews.asp

The following schemas is highly discouraged:
http://foo.csudh.edu
http://www.csudh.edu/csudh/ar2000/

back to topLinks

Well written links – clear and concise – are important to Search Engine Optimization (SEO).

Link Name = Page Name = Page Title = Page Filename

Name hypertext links so that they are meaningful when read out of context either on their own or as part of a sequence of links. Link text should be informative yet terse. For example: "Web Accessibility" instead of "click here." Content developers should further clarify the target of a link with an informative "title" attribute on the destination page. For example: the "Web Accessibility" link takes you to a page with a "title" of "Web Accessibility" and the name of the page - displayed just below the banner - is "Web Accessibility.” The link name, within reason, should equal the page name, which in turn should more or less equal the "title" attribute. In addition, the file name should also equal the title and name, thus: "webaccessibility.shtml."

Open Links In Same Window

Open links in the same window, not a new window: use of target="_blank" may confuse the user and "breaks" the back button. That is, it causes the back button to no longer operate. Firefox has the ability to recover gracefully, but other browsers and screen readers usually don't.

Where thematic use suggests opening links in new windows, indicate that links will open in new windows by using the CSS style class="new". An icon will appear after the link indicating that it opens in a new window. (Example: new window icon).

Links that leave the CSUDH.edu domain should use the CSS style class="out". An icon will appear after the link indicating that it exits the domain. (Example: exiting domain icon). Links that both open new windows and exit the domain should also use this CSS style.

Pop-ups

It is best practice not to use pop-up windows. Action that is not initiated by the user is experienced as annoying or even a security risk. Users may have pop-up windows disabled, and therefore the message to be delivered via pop-up won’t be received. If you have a good reason for a pop-up, warn the user with text just before the link or warn before the action takes place.

back to topAdditional Online Guides