EMU Web Design Standards - Basic Web Design

Document Hierarchy

If your page is more than just a few paragraphs, it's important to help guide the visitor as she skims your content. Section headings provide an outline for the document, helping both the reader and you as the writer mentally organize the information. It also helps search engines know what your page is principally about.

When you're done working on a page, you should step back and see that section headings appropriately outline your page. The "show outline" option of the W3C validator may help.

Academic writing usually uses the pyramidal style, which starts with an introduction, has a middle section that builds support, and ends with a conclusion. On the web, your writing needs to do just the opposite–called the inverse pyramid principle. You start with a short conclusion so that visitors can get the gist of the page even if they don't read it all. Photos, captions, taglines, and pullquotes should tell the story without requiring the reader to wade through paragraphs of text. Further down the page, background information, more detail, and long quotes are appropriate.

Semantic Markup

If you're very familiar with word processing software, you may be aware that using styles is more efficient and maintainable for large documents than applying font, size, boldness, margin, and alignment attributes separately each time you have, say, a heading or a block quotation. What is true for a ten-page document with one editor is even more true for a 10,000 page web site with many potential editors. You must identify that a particular piece of text is a header rather than just another phrase that happens to be bold and have some margin. You identify and differentiate content with HTML.

Good HTML structure is based on logic, order, and using semantically correct markup. If you have a heading, use a heading element. If you have a paragraph, use a paragraph element. If you have a list, use a list item element. If you’re quoting a few lines, use a blockquote element. Those elements provide meaning to the content, making them semantically correct, in addition to being solid HTML structure.

Making these elements look right on the page is the responsibility of the marketing department. We define styles for the entire web site and try to keep the appearance consistent across the site. If you're not satisfied with how your page looks, please start a conversation with us, but please accept that web design is very different from brochure design and we don't want to spend much time laying out a page, changing fonts, sizes, and colors, etc. There's even a special term for pages that look like brochures--"brochureware."

In general, you should never change font, text size, or color in your page. If you have a specific need, please talk with us.

See the markup guide to learn about specific elements.

HTML Validation

When people create web pages it is common to have mistakes in the HTML code, even when using software such as Dreamweaver that generates the HTML for you. Common problems are missing alt attributes on images (alternate text for disabled users and search engines), unclosed elements, like <a href="/">Home page (no closing tag to end the linked text) and improperly nested elements, like <li><a href="about">About</li></a> (the a should have been closed before the li since it was opened last). Browsers make their best attempt to interpret invalid HTML, but each may do so however it chooses.

It's best to make sure your pages are valid. The W3C's validator service can be used to check your page, or if you're validating often, the HTML Validator Firefox add-on automatically validates every page you view and displays a small icon to let you know the status. With the CMS the marketing department will require that every page be valid HTML, but for the time being every page will have at least a few errors due to problems in the standard headers and footers.

Doctype

Various HTML standards (and levels of observation of those standards) have existed over the years as the Web has evolved. The doctype is the first item in your HTML document and it declares the standard against which you intend your document to validate.

The bugs and non-standard behaviors of old browsers such as Netscape Navigator 4.x and IE 5 for Windows are called “quirks” and many old pages were designed to accommodate those quirks. Rendering quirky pages according to new standards would make them look different from what the author intended but using standards now that browsers are more compliant has many advantages to using old quirks forever.

To address the conflicting goals of backwards compatibility and standards conformance, contemporary browsers have two or three layout modes: Quirks mode, Standards mode, and, in the case of Firefox and Safari, Almost standards mode. How do they know which mode to use? It turns out that designers' layout mode expectations largely correlate to which doctype they used (or didn't), though the two really have little to do with each other. Thus, browsers trigger layout mode based on doctype.

Choosing a Doctype

Here are simple guidelines for choosing a doctype for a new text/html document:

Standards mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This is the right thing to do. Please be sure to test your image alignment in Firefox, Safari or Opera 9. Testing image alignment with Internet Explorer is inadequate.

You’d like to use the Standards mode, but you still want to validate deprecated markup or you use sliced images in table layouts and don’t want to fix them
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This gives you the Almost Standards mode (and the full Standards mode in really old Mozilla releases). Please note that your layouts based on sliced images in tables are likely to break if you later move to HTML5 (and, hence, the full Standards mode).

You willfully want the Quirks mode
No doctype.

Please don’t do this. Willfully designing for the Quirks mode will come and haunt you, your coworkers or your successors in the future—when no one even cares about Windows IE 5 anymore (already no one cares about Netscape 4.x). Designing for the Quirks mode is a bad idea. Trust me.

If you still want to support Windows IE 5, it is better to apply CSS hacks targeted at Windows IE 5 than to regress other browsers into the Quirks mode.

[Don't use XHTML]
I am not recommending any of the XHTML doctypes, because serving XHTML as text/html is considered harmful. If you choose to use an XHTML doctype anyway, please note that the XML declaration makes IE 6 (but not IE 7!) trigger the Quirks mode.

— Henri Sivonen

The EMU web site was designed for quirks mode and it has persisted through several redesigns. Following the August 2007 redesign, standards mode is preferred, so the HTML 4.01 Strict doctype above should be used. It should also be used on all pages that don't use the standard SSIs.

Character Encoding

Not to be confused with encryption, character encoding tells the browser which character set to use. For documents in English and most other Western European languages, the widely supported encoding ISO-8859-1 is typically used. Unicode is a more modern character encoding that can support not only Latin, Greek, and Cyrillic alphabets but also complex characters like Arabic and Hebrew. Browsers use Unicode internally regardless of the character encoding by which the HTML page is sent over the wire. Thus, UTF-8 is our preferred character encoding.

Some users have reported question marks with diamonds appearing on some of our web pages. This occurs because the author put characters in the document that are not supported by the character encoding of the page. Usually this is a result of pasting text from Microsoft Word, which uses curly quotes and long dashes.

How do you set character encoding? Ideally it should be set by the web server. We're working on that. To set it for a particular page, use:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

as the first thing inside the <head> tag. It causes the parser to start over reading the document with the new character encoding.

Additionally, the file must be saved in UTF-8 format. If you're seeing question marks in place of characters in your content, contact the marketing department and ask for your file to be converted to UTF-8.

Not really encoding, but...

You have to encode certain characters within an HTML document. The greater-than symbol, for example, starts a tag, so you need to use > in your HTML when you want an actual < to appear on your page. The ampersand is a commonly misused one. Notice how an ampersand starts the foregoing encoded <? We can't very well just have & standing alone because it means something in HTML. Use & in your HTML to represent an &.

Title and Meta Tags

People aren't the only ones looking at your pages. Search engines also visit our site frequently and index our pages. Page titles and descriptions help search engines to know what content to show humans in response to queries and help humans find what they want in a list of search results.

Page Titles

NOTE: These examples are samples from old web pages that were created using standards that were 'best practice' at that time. Page titles should be declared in two places: in the title element in the head section of your HTML, which tells the browser what to display in the browser's title bar and tabs, and a Heading 1 at the top of your page. A bad or missing title not only doesn't tell the search engine what your page is about, it also hampers the user's navigation. Each page should have a short, unique title.

Here the titles of pages are too similar, or at least too long. The first tab should probably be titled "Math Dept. Majors & Minors" ("Math Dept. Programs," while more accurate since the page includes pre-engineering, which isn't a major or minor, is less helpful to the average person scanning a list of search results looking for a physics minor). Under the second tab is a page that lists a range of careers a math student could pursue. It should be titled something like, "Popular Math Careers." If you wanted to include your department name in the title, you could use, "Popular Math Careers - Mathematical Science Department." Note that the department name is last. If it were first, followed by a colon and the specific page name, it would be just as unhelpful as before because the title is truncated in browser tabs (or the Windows taskbar). That is what is happening to the "Mathematical Science Department Minors" page, which is under the third tab. Incidentally, this page appears to be a duplicate of the minors section of the majors and minors page (as of July, 2007).

The careers page above raises an interesting consideration: Think about your page in the context of the entire web site, not just your department. The H1 on the math careers page reads, "Career Choices." It's tempting to make that the page title, but then again there's a nearly identical page in the history department that would have the same title, not to mention pages in the EMU Career Services section. Here, "Popular Math Careers" most accurately and unambiguously describes the page's contents. It should be used in both the title tag and the H1.

Titles and descriptions are also very important in search results. In the screenshot below, a search for "math careers" probably returns the math careers page second because it has a bad title. The first result page talks about mathematics as a discipline and happens to mention careers. Its title is poorly chosen also.

Description

The bit of text shown for the first two results is the relevant text from the page. The third result, however, uses text from the page's description meta tag.

<meta name="description" content="The department of mathematical sciences offers mathematics, mathematics education, and computer science majors; a pre-engineering program; and minors in mathematics, computer science, and physics.">

Not every page needs a description. In fact, no description is better than a bad or duplicated one. A description tag would be useful on a page that doesn't have summarizing text at the top of the page (remember the inverse pyramid rule?), such as a list of links or a table of figures. As of July, 2007, the description information on most pages on our site is duplicated or, if actually relevant, would be a good candidate for the first text on the page.

Keywords

<meta name="keywords" content="computer science, computer technology, information systems, mathematics, education">

The keywords meta tag is used to tell a search engine what keywords are relevant to the page. This field has been abused so badly and is so frequently wrong (pages are copied from others and the keywords are never changed) that Google, AOL, MSN, and Ask explicitly ignore it for search ranking purposes. Yahoo for one says they make use of the field, but since they only represent 13% of our search traffic (not counting EMU site search, which is powered by Google), keywords can be considered a low priority. Like description, having no keywords is better than having irrelevant or duplicated ones. Though we don't know exactly how the major search engines work, it's been suggested that keywords that don't match your content is considered "lying" and your site may be penalized as a result.