Documentation for the Microsoft Visual Studio "Fun" Design Template

About the Visual Studio Design Templates

Microsoft has created a set of five design templates you can use as is or modify to your needs. These templates illustrate high quality design principles combined with standards driven code. Each template is XHTML 1.1 Strict, Section 508/WCAG conforming and works across many browsers. This document describes how the template was built, the thought processes, tradeoffs, and workarounds necessary to build them. It also contains instructions on how to easily customize and change these templates for use in your site. You will find these HTML templates to be an excellent starting point when beginning to build out dynamic, data-driven Web sites with Microsoft Visual Studio and Microsoft Visual Web Developer. We hope they'll give both designers and developers deep insight into their creation process while providing you with a workable starting point. You can find all the information you need on MSDN here.

Table layouts versus DIV layouts

In the past, developers have used tables to build their page layouts. In many cases it's acceptable to build a layout with tables. However, there are compelling arguments (and laws) that recommend we use tables only when presenting tabular data and use DIV tags and CSS to create our layouts. Because of this there are two versions of each design template; one that uses DIV tags for layout and one that uses tables for layout.

Usability & Accessibility

Summary

Usability is the science of understanding how people use products and software. The information gained from usability studies is used to make the products or software easier to use, more efficient and more productive. Accessibility is a related area of study that focuses on the use of the products or software by people with disabilities.

Why Read this Section?

In some cases accessibility and usability features are required by law. In all cases, good accessibility and usability features make your site easier to use and affect your company's goals. In addition, good accessibility and usability practices help to ensure your content will be accessible to future products that have yet to come to market. This section will not cover all areas of usability and accessibility but will help build an a attitude for best practices and an introduction to the most common usability and accessibility requirements.

Many different kinds of browsers

Before analyzing a site's degree of usability and accessibility we must first look at the different types of browsers people use and the ways users interface with a Web site. Most often Web sites are viewed in a visual browser like Microsoft Internet Explorer running on a desktop PC with a mouse used to click different areas of the page. But there many other browsers and interfaces.

There are non-visual browsers (or technology that "sits on top" of a browser) used by people who are blind that read the contents of your Web page through computer generated voice. JAWS and Window Eyes are two popular non-visual browsers. These kinds of browsers or assistive technology rely on the keyboard alone and do not use a mouse to navigate the pages. There are many other types of input and output devices like braille readers and the Stephen Hawking Device. Many mobile phones now have browsers. Most browsers on phones do not use a mouse and have very small screens. Some mobile phones will render CSS, graphics and multimedia, others do not. There are new browsers and ways of interfacing with Web pages coming to the market every year.

Creating a Web site that is accessible to many different browsers and interfaces require attention to detail that may otherwise be overlooked. The usability and accessibility information below will help you build pages that are accessible to a wide range of audiences and browser types.

Page Titles

One of the most important usability features of a Web page is its title.

Make your page titles descriptive and meaningful. Your page titles should describe the content of its particular page. Page titles should not simply state the same thing on multiple unrelated pages. There is no need to start titles with "Welcome.." or "Welcome to my site.." because this does not give detail and meaning to your content. Each page of your site should have a unique, descriptive page title. Well written, unique titles for every page in your site will help in the following ways:

• well-written page titles help users navigate your site
• well-written page titles help search engines accurately index your site
• well-written page titles help identify bookmarks or favorites
• well-written page titles help non-visual browsers and people who are blind quickly understand the contents of the page

Alternative text and titles for graphics

People using non-visual browsers can not see your graphics (bit map files in the JPEG, GIF or PNG formats). However, non-visual browsers will read the alternative text and titles for each graphic. Creating alternative text for every graphic is fundamental to your site's usability and accessibility. Without well-written and informative alternative text visually impaired users have no way to understand the meaning of your graphics.

The alternative text will also display in visual browsers if the image doe not load. In addition, alternative text helps search engines index your site correctly. Including a title attribute on your graphics further help sighted and non-sighted users understand your graphics.

Browser size and "above the fold"

All the Microsoft Visual Studio Design Templates are made to fit within a 800 pixel wide by 600 pixel tall resolution monitor without the need to scroll horizontally (left - right). Do not force your visitors to scroll horizontally. Doing so will make your site unusable.

The exact width of this template is 760 pixels. We leave 40 pixels of extra room for the display of vertical scrollbars and a small amount of white space so that the horizontal (left - right) scroll bars will not appear on maximized browser windows.

Although vertical scrolling (up - down) is inevitable with any Web page, we can control what content is visible on screen without scrolling. The content area shown on screen after the page loads but before scrolling down is called "above the fold". This term is taken from the newspaper industry. The most important newspaper articles and headlines are shown "above the fold" of newspaper. Web sites too should keep the most important information above the fold. Often times people will not scroll down once a page loads. Therefore, it is important to keep all major navigational menus, main advertisements and other important links and content "above the fold".

Using relative font sizes

There are several ways to specify text sizes with CSS. For this discussion we'll look at two, (1) relative and (2) constant. Text is set to a relative size with the EM or % attribute. Text set to relative sizes can be enlarged or shrunk in most browsers. Text is set to a constant size with the PX or PT attribute. Text set to a constant size are "locked" and can not be resized in most browsers. Although, more modern browsers allow users to change the font size regardless of what attribute is used, it's an accessibility best practice to set font sizes using relative attributes (EM or %).

Why should we allow users to change font sizes? It's helpful for people with visually disabilities, since they can make the fonts larger and easier to read.

TIP: You can change the font size of text in Internet Explorer by clicking the "View" menu then "Text size". If your mouse has a scroll wheel you can also hold down the "Control" key while scrolling the scroll wheel on your mouse. Other applications have specific keystroke shortcuts that will change the font size.

Font size example:

Making forms accessible

Fieldset and Legend tags

The FIELDSET tag groups form elements. The LEGEND tag ads a title to the FIELDSET group. The FIELDSET and LEGEND tags clarify their purpose of your form. People using visual and non-visual browsers benefit when you use the FIELDSET and LEGEND tags on all your forms. The FIELDSET tag itself can be styled with CSS the same way any block level element can be styled. As shown in this template you can nest FIELDSETs into sub groups when it will help clarify the purpose of the form and its elements.

Label tags

The LABEL tag is used to explicitly label an INPUT element. In this template we have a FORM titled "Join our mailing list". In the FORM we have an INPUT field for the user's name. We tie the LABEL tag "your name" to this particular INPUT field by wrapping "your name" in a LABEL tag and then assigning a unique ID to the INPUT tag and LABEL tag.

By explicitly attaching a LABEL tag to the INPUT field we clarify what information is being requested from the user. Non-visual browsers read the LABEL tag for the associated INPUT field regardless if the two tags are adjacent to each other in the source code.

When a LABEL tag is set properly users can click the LABEL text to select a form element. This increases the "hot" clickable area of all form fields (INPUT, RADIO, CHECKBOX, etc..) thus making them easier to use.

Optgroup tags

The OPTGROUP tag is used to group related options in a SELECT list (drop down menu). Its not often we need to use the OPTGROUP tag. However, if you have a large list in a drop down menu OPTGROUP can greatly improve the clarity and usability of your SELECT lists.

Do not use graphics to title or label your forms

It may be tempting to use JPEG, GIF or PNG graphics to label FORMs and their elements. However, in most every case, doing so will reduce the usability and accessibility of your forms.

Making tables accessible

Table summary

As explained earlier TABLE tags are used in this layout only when presenting tabular data.

Every TABLE tag should have an accompanying SUMMARY attribute and text that explains the contents and structure of the TABLE for people using non-visual browsers. Users without visual impairment can very quickly scan the contents of a table to get an idea of its meaning and structure. Visually impaired people using non-visual browsers must wait for their non-visual browser to read the Web site contents linearly from start to finish. Well-written TABLE SUMMARY attributes allow people using non-visual browsers to quickly understand the TABLE contents and structure.

Like most accessibility best practices, the TABLE SUMMARY attribute not only helps people who are visually impaired. It also helps search engines accurately index your content. Remember, most search engines can not "see". They can only read the text within your document.

Caption

The CAPTOIN attribute for a table will be shown in visual browsers and serves as a title for your TABLE. This caption should be descriptive and clarify the purpose and content of your TABLE.

Acronyms and abbreviations

We shouldn't assume people know the meaning of the acronyms and abbreviations in our content. The ACRONYM and ABBR tags are used to help with this problem.

You can style these tags so that people using visual browsers will know they are "hot" and look similar to a link. When users hover the mouse over the text wrapped with these tags the cursor changes to a question mark and tool tip text appears with the title attribute you have provided.

Non-visual browsers will read the ACRONYM and ABBR tag title attributes to users instead of trying to read the acronym or abbreviation as a word. For example. If "IRS" is not wrapped in an abbreviation tag and given a title a non-visual browser may read it as a word "urse", as in "purse". When the abbreviation tag and associated title is used a non-visual browser will read "IRS" as: "Internal Revenue Service".

Note that the ABBR tag is only supported in some browsers currently but we should plan on its support in new versions.

Breadcrumbs

Breadcrumbs are a list of sequential links that take the user from the current page, back to its parent section(s) and finally to the home page. Breadcrumbs offer a quick and easy way for users to navigate your site and know where they are. It is a good practice to conclude your list of breadcrumbs with a non-linked title of your current page.

Allow non-visual browsers to skip past repetitive navigation links

Non-visual browsers will read the contents of a page linearly from the top down. Many times the first elements to appear in a page are sets of navigation links. It's useful for people using non-visual browsers to be able to skip links that appear on every page versus waiting for their browser to read through them.

To allow users to skip past these repetitive links we add an anchor link above the repetitive content which then links to another named anchor further down the page.

Notice in the example above "skip to the main content area of this page" link is wrapped in a DIV with class equals "none". The "none" class below tells visual browsers not to display this DIV. Since non-visual browsers will ignore the CSS styles they will see it.

Section 508 conformance

What is Section 508

"Section 508" (as it is often called) is a part of the Rehabilitation Act that requires Federal agencies to make their electronic and information technology accessible to people with disabilities.

Although non-Federal agencies are not required by law to conform to Section 508 guidelines it is commonly understood that web sites that follow many of the Section 508 guidelines are easier to use by all users (with or without disabilities) thus affecting your company's goals.

The Section 508 requirements differ from the Web Content Accessibility Guidelines guidelines (WCAG, below) in that Section 508 looks at all possible forms of electronic and information technology. The WCAG guidelines are written specifically for web authors.

Below is a quote from the Official Web site for Section508 of the US Rehabilitation Act

In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Inaccessible technology interferes with an individual's ability to obtain and use information quickly and easily. Section 508 was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508 (29 U.S.C. ‘ 794d), agencies must give disabled employees and members of the public access to information that is comparable to the access available to others. It is recommended that you review the laws and regulations listed [on our Web site] to further your understanding about Section 508 and how you can support implementation.

Section 508 checklists

All the requirements for Section 508 conformance can be found on the Official Web site for Section 508 of the US Rehabilitation Act. However, it's useful to reference Section 508 conformance checklists that have been created for Web developers specifically.

The information needed to provide a thorough checklist for Section 508 is beyond the scope of this document. But, there are many reliable resources on the Web that provide checklists. Here are a few:

• Web Aim
• Federal Aviation Administration
• California State University Fresno

How this template conforms

All the Microsoft Visual Studio Design Templates conform with Section 508 guidelines. However, the design templates are only a single page and do not contain scripts and other functionality that need to be tested against the Section 508 guidelines.

How your code can conform

This documentation lists many of the fundamental Section 508 guidelines needed for the single page design templates to conform. But after modifying the template to meet your needs, adding scripts, new code, multimedia and new content to the template you'll need to further research how your added code can conform.

WCAG, Web Content Accessibility Guidelines

The WCAG, written by the World Wide Web Consortium (W3C) maintains a set of accessibility guidelines for Web content. The WCAG requirements differ from the Section 508 guidelines (above) in that WCAG requirements are written specifically for web authors. Section 508 requirements looks at all possible forms of electronic and information technology, not just the web. WCAG guidelines will help make your web site easy to use.

How good usability helps optimize your site for search engines

Most search engines today base their search results on text that is "read" by robots or programs that scan your site's content. Sometimes these robots are called "bots" or spiders. Each search engine has their own robots that scour the internet for content. In many ways these bots respond to the content on your page the same way that non-visual browsers do. In other words, they respond mainly to well-formed, well written text that is presented logically. For example, above we looked at the CAPTION attribute for tables. The CAPTION is added to your TABLE for accessibility reasons but this CAPTION probably has important keywords in it that a search engine robot will pick up. In this way, the CAPTION may help people find your TABLE data. All search engine robots place importance on your page titles. Well written, informative page titles that do not contain unnecessary information will help your page's accessibility, but they also can help your search engine results.

Here's another example. Search keywords that appear in the top part of your page content can get a higher degree of importance from search engine robots. We've talked about keeping important information "above the fold" for accessibility reasons. But also, important information and keywords that appear "above the fold" (or higher up in your source mark-up) can help your page's rank in search engine results.

Let's look at another example before we move on. Not all content can be communicated with text. We often use images to communicate ideas, charts, graphs, product images, logos, etc.. Although search engine robots can not determine the content of graphic images, they will read and rank the ALT attribute for an image. Again, the ALT attribute is not only a fundamental accessibility feature, it can help your content get placed appropriately in search engine results.

Accessibility resources

There are several free accessibility validators on the Web that you can send your pages through. These validators will generate a report that displays your pages' degree of accessibility. These tools are very useful, but can never be 100% accurate. They will expose many of the most common usability problems with your site, but it will also be up to you to fully understand the concepts of the Section 508 requirement, WCAG guidelines, accessibility and usability best practices in order to make your site compliant. Again, making your web site accessible increases the ease of use of your site for all visitors and can affect your company's goals.

• Bobby is a great, free tool that will help you identify accessibility deficiencies in your site.
• The AIS Web Accessibility Toolbar can help you test the usability of your site by allowing you to manually examine your pages for accessibility deficiencies.
• Visual Studio 2005 also includes a built-in accessibility checker to help make Section 508/WCAG conformance easier.

HTML Mark-Up

XHTML strict doctype

XHTML is a combination of HTML and XML. There are three DOCTYPEs that can be used with XHTML files, (1) strict, (2) transitional and (3) frameset. The DOCTYPE tells the browser to render the page in a particular way. The XHTML strict DOCTYPE is less forgiving than the transitional DOCTYPE.

Although XHTML strict can use most HTML 4.0 tags and syntax, some of the HTML 4.0 tags and nesting of tags that are valid in HTML 4.0 are not valid in XHTML.

Valid XHTML strict code also separates the content from the layout and style. That is, with XHTML strict it is not valid to include style information (font size, color, width, heights, positions, etc.) inside the source mark-up. Instead, all styles must be linked to a separate CSS file. The W3C owns The official XHTML specification.

The Microsoft Visual Web Developer Design Templates use the strict DOCTYPE. This DOCTYPE is added to the top of the page code.

Why use XHTML Strict?

XHTML strict pages are accessible to a broader range of viewing devices currently in the marketplace. Code used in XHTML strict pages have a longer life of relevance with products that have yet to come to market. XHTML will eventually replace HTML 4.0 as the standard. Lastly, pages that use the XHTML strict DOCTYPE require your code to be more accurate, more efficient and clean.

Adding the favicon.ico to your header

A favicon is a 16 by 16 pixel graphic that most modern browsers will show as the icon for your site. This icon appears in the address field, bookmark list and links bar of most browsers.

Each Microsoft Visual Web Developer Design Template comes with a file called favicon.ico that can be found in the themes folder for each template. These icons match the default look of the template. In order to display this icon in the browser you link to it in the HEAD of your XHTML file.

There are several resources on the Web that can help you make your own favicon.ico files.

Keeping styles out of the HTML mark-up

With HTML you were able to style your content inline with the source mark-up. As mentioned earlier, the XHTML strict doctype does not allow style information inside your XHTML. Instead, all styles must be linked to a separate CSS file. Separating the styles from the content has these advantages:

• Separating visual style from content gives you more style and layout options since CSS has greater style options thanHTML inline styling.
• Separating visual style from content increases your ability to keep styles consistent across many pages.
• Separating visual style from content allows you to change the styles on every page in your site by changing only one CSSfile.
• Separating visual style from content makes your pages load faster since the styles (the CSS document) are only downloaded once for any page in your site.
• Separating visual style from content makes your site more accessible and usable since people using browsers that do not support styles will still have access to all your content, but simply no style information.

Using DIVs for layout

See creating the layout with DIVs.

Heading tags (used to build an outline, not to make fonts larger)

Your heading tags (H1, H2,H3, H4, H5 and H6) should build a logical outline of your content. This virtual outline created with heading tags will help improve the clarity of your content for all users. People using non-visual browsers can instruct their browser to only read the heading tags on your page. This allows all users to quickly understand your page contents.

Remember, non-visual browsers read all the text to users through computer voice synthesis. If there are no headings or incorrectly used heading tags these users are forced to listen to all the text read linearly from top down. In other words, heading tags help non-visual browsers scan a page.

Do not use heading tags to make a FONT bold or larger. Use CSS to style text.

You can easily change the default style (FONT-SIZE, FONT-WEIGHT, COLOR, etc.) of all heading tags through CSS.

Forms

See Making forms accessible

Showing data in tables

As explained earlier tables are used in this layout only when presenting tabular data.

The table header, footer and body

The THEAD, TFOOT and TBODY tags group the sections of your TABLE. The THEAD should come first in your source, then the TFOOT then the TBODY. The footer comes before the body in the source so the browser can render it before the contents of the entire table body are downloaded. In addition, if the contents of a TABLE span multiple pages when printing the THEAD and TFOOT will be printed on each page.

Targeted browsers

The Microsoft Visual Web Developer Design Templates are designed to work in the following browsers. Modifications and added code to the templates will require additional testing on your targeted browsers. Each browser's support for CSS and XHTML strict vary. It is a good idea to have a clear list of the browsers you intend to support before your projects begin.

• Microsoft Windows XP
  • Internet Explorer 6
  • Mozilla Firefox 1
• Microsoft Windows 2000
  • Internet Explorer 6
  • Mozilla Firefox 1
• Apple Macintosh OSX
  • Mozilla Firefox 1.0.1
  • Safari 1.2.4

Cascading Style Sheets

CSS is a style sheet programming language that allows you to attach style (color, fonts and layout) to structural documents (HTML, XHTML). Authoring, viewing and maintaining Web sites is simplified by separating the style from the content.

Cascading style sheets are powerful and can be quite in-depth. This documentation will touch on the basic principles of CSS. The Official CSS 1 Specification contains much more detailed information and is a valuable resource.

Why CSS

See Keeping styles out of the HTML mark-up.

What is a CSS rule

A CSS rule is made up of selectors, properties and values. Selectors tell the browser which items on your page to style. Properties identify the type of style you want to apply. Values set the style.

In the example below "H1" is the selector, "COLOR" is the property and "black" is the value.

CSS selectors (classes, id's or HTML tags)

A selector can be a class, an ID, an HTML tag or a combination of many of these.

The difference between classes and IDs.

Classes can appear several times within a single XHTML (or HTML) document. There can only be one instance of an ID in each page.

HTML tags as a CSS selectors

You can apply CSS styles to HTML tags. For example, in XHTML strict pages it is not valid to add MARGINTOP="0" in the BODY tag. So, instead, apply this margin style in your CSS document with "BODY" as a selector.

IDs as CSS selectors

If you're styling an element that only appears once in your source mark-up you can apply an ID to your element then style the ID in your CSS file. For example, if you have only one main menu DIV in your source mark-up then you can apply an ID to this DIV then style the ID in your CSS file.

Classes as CSS selectors

If you're styling an element that appears more than once in your source mark-up apply a class to it. For example, if you have many separate strings of text that need to be small you can assign a class to each occurrence of this small text in your mark-up then style the class in your CSS file.

Class and ID naming guidelines

Class and ID names can contain only alphanumeric characters and the hyphen (-).

Do not name your classes or IDs by the style or layout they produce. For example, do not name a class or ID "redtext" since you may easily change the style of this element to use blue text down the road. The name will then have little meaning and will be confusing. You could instead name this element "productname" or "requiredtext" or "importanttext".

Links & pseudo classes (link, hover, active, visited)

Browsers display visited and non-visited links differently to users so they can see what links they have visited and what links they have not. There are two special CSS classes, called pseudo classes, that allow you to control how visited and non-visited links are styled.

":LINK" is a pseudo class that controls the appearance of non-visited links. ":VISITED" is a pseudo class that controls the appearance of visited links.

There are two more dynamic pseudo classes that control the appearance of items that are hovered (by a pointing device, typically a mouse pointer) and activated.

":HOVER" is a pseudo class that controls the appearance of hovered links. ":ACTIVE" is a pseudo class that controls the appearance of activated links.

Heading tags

As mentioned in the accessibility section it's important to use headings to build an outline of your page content. It's wrong to use headings solely to change the font size or weight of text.

You'll probably want to change the default appearance of your headings after you build your page contents. To do this, simply use the heading tags as selectors in your CSS file and make them the size and style you prefer.

Form tags

See Making forms accessible.

Lists as menus (horizontal or vertical)

Ordered and unordered lists (the OL tag and the UL tag respectively) are appropriately used to make navigational menus. Create the menu as a list in the source mark-up then style the list layout and appearance with CSS. CSS can turn lists into a horizontal menu (top menu) or vertical menu (side menu). With CSS we can add padding, margin, background color, etc. to your menu items with great control. Here are some benefits of making navigational menus from lists rather than tables or other means.

• Navigational menus made from lists produce cleaner more efficient source mark-up.
• Navigational menus made from lists are more accessible to people with disabilities compared to navigational menus made with TABLE tags.
• Navigational menus made from lists produce a more predictable and usable display when viewed without style sheets than navigational menus built with TABLE tags.
• Maintaining a navigational menu made from a list is fast and easy since all the visual control and layout of the menu is maintained through a single CSS file. The source mark-up does not need to change.

You'll notice that each of the three CSS rules above start with the "#mainmenu" or "#mainmenu-vertical" DIVID. If this DIVID was not used in the selector every UL tag on all of your pages would be styled the same way as the main menu. Therefore, it's important to target the specific lists you want to style by first targeting its containing element. In this case the container was the "#mainmenu" or "#mainmenu-vertical" DIV.

In this template you'll find two different types of list styles.

1. #content (the main content area)
2. #side (the side menu area)

Specifying font families

See Font families.

Creating the layout with DIVs

What is a DIV?

DIV is short for division or section. The DIV tag is a generic or empty block level element that defines a section of the document. A DIV starts with the opening DIV tag, <DIV> and ends with the closing DIV tag </DIV>.

Visual browsers add a line break before and after all block level elements. As apposed to a SPAN tag (also an empty container tag) except that line breaks are not added before and after a SPAN tag. Some other block level HTML tags include the P tag, the heading tags H1, H2,H3, H4, H5 and H6, the BODY tag and others.

DIV tags are often viewed as rectangle blocks that hold a section of content. By applying CSS classes or a unique ID to DIV tags we can control the visual appearance of the DIV itself and the content contained in the DIV.

How padding, margin and width work on DIVs

The margin is the blank space outside the DIV (or any block level element it's applied to).

The padding is the blank space inside a DIV.

The complete physical size of a DIV is its width plus margin plus padding.

CSS shorthand

You can set the top, right, bottom and left PADDING or MARGIN as separate CSS attributes or you can use CSS shorthand to set them all within one attribute. CSS shorthand uses less lines of code thus it loads faster and is faster to write and edit.

Floating DIVs

The CSS attribute FLOAT makes a DIV (or other block level elements such as an IMG) align to the right or left of its containing element. FLOAT is a necessary and fundamental attribute in many types of layouts.

Always set a width on a DIV that is floated. If no width is set the results are unpredictable.

Using container DIVs and the CSS clear attribute

Due to the nature of "floated" DIVs it is often necessary to put them within a container DIV.

For the purposes of this documentation we look at the basic examples of floating DIVs left and right and "clearing" a container DIV. There are many more complexities in the way different browsers render floated elements. However, each of the five Microsoft Visual Web Developer Templates provides several unique examples and strategies for different layout types, from two or three column layouts to fixed width and variable width layouts.

The 5 layout types included in the Microsoft Visual Studio Design Templates

Each of the 5 Microsoft Visual Studio design templates uses a different layout type, different CSS and different mark-up strategy. The list below is a quick reference for these layouts types.

The Rounded template

• 2 column layout
• Both columns are fixed width

The Simple template

• 3 column layout
• The side columns are fixed width. The middle column is "stretchy"

The Grid template

• 3 column layout is used in the header section
• 2 column layout is used for the body section
• All the columns are "stretchy"

The Fun template

• 2 column layout
• Both columns are "stretchy"
• This layout uses absolute positioning

The Basic template

• 2 column layout
• Both columns are fixed width

How to create this template's two column "stretchy" layout with DIVs and CSS

The header area of this layout is made with two DIVs and CSS.

Then using the CSS below we tell these DIVs where to live, what color to be, how wide and tall to be, etc.

Next we create the side navigation area with 9 DIVs and some very tricky CSS.

Then we set the styles for these DIVs above.

The content div on the right side of the page is set up the exact same way as the navigation area above (except its horizontally reversed).

Inside the main content area there is a three column section. This section uses 4 DIVs and some tricky and CSS.

Then using CSS we tell the these four DIVs where to live, how wide and tall to be, etc.

Background images

Summary

CSS allows you to set the background image (JPEG, GIF or PNG files) on most HTML tags. It is common to use background images on DIV tags, list items, the BODY tag and other elements to archive a certain visual layout.

Include a background color along with the background image

Note that there is also a hex color value listed in the BODY background value. It's a good idea to include a hex color that approximates the color of the background image. In case the image does not load you will still be certain that your general color palette is maintained and the text in this area will still be readable. If a hex color value is not set and the background graphic does not load or is not yet downloaded you may end up with white text and a white background that is unreadable.

Specifying the repeat value x, y or none

In the example above the repeat-x value is also given. This value indicates the background graphic should repeat horizontally.

Using the repeat-y value indicates the background graphic should repeat vertically.

Using the repeat-none value indicates the background graphic should not repeat.

Not specifying a repeat value will cause the background image to repeat both horizontally and vertically.

Specifying the horizontal position value right, left, center or amount

If you do not want the graphic to repeat horizontally you may want to align the background graphic to the right, left, center or position the background graphic by a left offset amount.

Specifying the vertical position top, center, bottom or amount

If you do not want the graphic to repeat vertically you may want to align the background graphic to the top, center, bottom or position the background graphic by a top offset amount.

Validating your pages

Summary

As mentioned earlier the XHTML strict doctype is not forgiving. Your source mark-up needs to be well-structured and free of errors. Because of this it is helpful to run your pages through a validator that checks for errors and offers solutions and explanations for errors it finds. CSS is generally more forgiving but it is also helpful to run your CSS file through a CSS validator.

HTML validation

Microsoft Visual Studio and many other desktop applications contain XHTML strict validators. You can also find many free on line validators. The W3C, is the organization responsible to the official XHTML strict specification. The W3C has a free XHTML validator.

CSS validation

Microsoft Visual Studio and many other desktop applications contain CSS validators. You can also find many free on line validators. The W3C, is the organization responsible for The Official CSS 1 Specification. The W3C has a free CSS validator.

"Bobby" can help test your site's usability

See Accessibility resources.

Aesthetics

Use of scale

Using graphic elements and fonts in a range from small to large can help add professional polish to your design as well as add clarity to your main sections and scanability of the content. For example:

• The logo text is the largest font in the page and the page title is the second largest font. If the page title were the same size as the body text then it would not look as good and it would be more difficult to scan the page. If the slogan line used the same size font as the site name they would compete against one another for attention. Instead there is an order to the scale of these titles on the page and this helps the aesthetics and readability.
• The titles for the three column section in the main content area also use larger FONT sizes.

Use of color

The primary colors are red, blue and yellow.

The secondary colors are made (in theory, when using physical colors like oil paint) from two primary colors (red + blue = purple, blue + yellow = green, etc..).

The primary and secondary colors above are extremely bright and cartoon-like. In some cases it's appropriate to use these primary and secondary colors in small amounts (perhaps as a link color, in order for a link color or active link color to stand out from the page). But, for the most part using these colors in large areas (such as the background of a page) will make your page look amateur and childish. Instead, it's recommended to use a further subset of colors called tertiary colors. In color theory (and when physically mixing paint, like oil paint) tertiary colors are created by mixing two secondary colors.

On many computer color picker applications you will find an option for color saturation. You can also lessen the child-like, extremely bright feel of primary colors by decreasing the saturation of the color. Decreasing the saturation of a color is another way to produce a more sophisticated and refined color palette for your site.

In all cases, it is important to produce text color and background color combinations that produce highly readable text. You must also be sure your link colors will stand out from the normal text color so users know what text is clickable. Providing enough contrast between your text color and background color is an important part of a site's usability.

Here are the colors used in this template.

Fonts families

There are two general classifications of font-families, (1) serif and (2) sans-serif.

A serif is a small decorative stoke added to a letter's edge. Serifs were originally used in printed text to help create a line across the width of a page so that the eye can easily skip back and forth from one line to the next. Font families that contain serifs are called serif fonts. Times New Roman is a serif font. You can see in the example below that there are extended horizontal stokes at the top of most capital letters and some of the lower case letters (the "w" in "New" below).

Times New Roman is a serif font

Font families that do not use serifs are called sans serif (sans means without). Sans serif font families do not have these extra strokes. Arial is an example of a sans-serif font family.

Arial is a sans serif font

This template uses the Trebuchet MS font. It is a sans-serif font but contains some added detail not found in Arial.

Trebuchet MS is used in this template

The CSS used to specify Trebuchet MS is below. If the user does not have Trebuchet MS installed on their computer, the Tahoma font will be used. If the user does not have Tahoma installed in their computer Verdana will be used and so on through the comma separated list of font names. The last font name is "sans-serif". This value instructs the browser to use any sans-serif font installed on the user's system if none of the previous fonts exist.

Details add polish

Many times the small details you add to your design will add the polish a page needs to look professional and trustworthy. Here is a list of small details that help finish this template.

• The curly brackets in the background image creates detail and texture that adds depth and a design motif to the page.
• The faint background color on the forms add clarity and color to the page.
• The thick green borders on the images and tables add weight to the page and help "set" these elements on the page.
• The arrows and hover effect on the bulleted lists add subtle detail and usability feedback to the user

Making the favicon.ico file

Each of the Microsoft Visual Web Developer Design Templates comes with a favicon.ico file that matches the template's design. If you want to create your own favicon file that matches your company logo for example you'll have to make one using one of the many .ico file tools available on the Web.

A note on consistency

Even though it's not a good idea to make all text the same size and color, it is a good idea to keep certain design features consistent on each page and between pages on your site. Here are a few design features in this template that should be kept consistent:

• The left and right padding on all content is 5%.
• All lists and lists of links use the same style.
• Sections in the side area are separated by the "#separator-side-column" line.

Extending this Template

Changing the colors

There are eight main colors used in this template's color palette. However, most of the color in this template exists in the green background and borders. It is quite simple to change the entire feel of this template by changing the color of the background graphics and a few color values in the CSS.

In the folder for this template you'll find a folder called "themes". In it there is a purple theme for this template and the default green theme. To use the purple theme change the name of the "purple" folder to "default".

If you examine the differences between the green and purple files you'll see it is quite simple to change the entire color scheme of the template with only a few changes.

Adding a bit map logo instead of the "site name" text

You may want to include your logo as a bit map graphic instead of the text name for your site. Although you'll want to you use your own graphic for this purpose, there is an example logo graphic in the images folder called "logo-graphic.gif". You can see that this graphic is anti-aliased to the green background and it is a transparent gif. This allows the green background on the BODY to show through the graphic.

Quick Tips and Tricks

1. Disable images in your browser then make sure all the content is still readable.
2. View your pages in 800 pixels and 600 pixels resolution and be sure you do not need to scroll horizontally to view all your content.
3. Validate your XHTML andCSS to find common coding errors.
4. Disable CSS in your browser then make sure all your content is still presented logically.
5. Use background images on certain elements to create unique layouts.
6. When creating complex layouts its helpful to remove all your content and simply work with the container elements only. When you get the container elements working as you like then add your content.
7. When making background images that repeat horizontally or vertically they only need to be 1 pixel wide or tall in order to work correctly. But instead make them at least 30 pixels wide or tall. This way, you can see them easily when viewed as thumbnails in Microsoft Windows Explorer.
8. Some browsers will add add a 5 pixel bottom PADDING to inline images. To counteract this we can set images to "block" withCSS. .class-name img{display:block;} Why do some browsers do this? It is because "inline" images can exist inline with text and thus some browsers add bottom padding to the image so that text descenders (like a lower case "j" or "g") have room.
9. To center a DIV or any element within its container usingCSS set its left and right MARGIN to AUTO like this#your-div{margin-left:auto;margin-right:auto;}
10. Do not use heading tags to make a FONT bold or larger. UseCSS to style text.
11. For link pseudo classes to work properly they must be written in this order - LINK, VISITED, HOVER then ACTIVE.

Web Links, References & Tools

Microsoft product links

• Get Visual Web Developer 2005 Express Edition today and get started building dynamic, data-driven Web sites with this template.
• Check out the Design Center on MSDN.

HTML validation

• The W3C has a free XHTMLvalidator

CSS validation

• The W3C has a free CSSvalidator

Section 508 Web site

• The Official Web site for Section 508 of the US Rehabilitation Act.
• Web Aim http://www.webaim.org/standards/508/checklist
• Federal Aviation Administration http://www.faa.gov/aio/InfoMgmt/508/checklist.htm
• California State University Fresno http://www.csufresno.edu/webaccess/learningmodules/legal_issues/readings/508_checklist.htm

The AIS accessibility toolbar for Internet Explorer

• The AIS Web Accessibility Toolbar http://www.nils.org.au/ais/web/resources/toolbar/index.html