The short answer is ALWAYS!  But let’s rewind a bit and provide some context.

You probably know by now that IE8 renders pages in standard mode by default.  The IE8 team made this decision to ensure the best experience for their users moving forward.  At the same time, the team has been very concerned about all the “hacks” that people had to go through to render pages using older versions of IE.  This is why Microsoft decided to provide a compatibility mode in IE8 to help during the transition and provide the best possible experience to users of non standard web sites.

A very complete summary on the IE8 team blog about compatibility can be found following this link. 

Here is an excerpt from the above post that really answers the question: “to tag or not to tag?”

“Site owners are *always* in control of their content. By default, Internet Explorer uses DOCTYPE switching to determine Quirks v. Standards mode (again, Standards mode maps to IE8 Standards by default). Site owners can choose to use the X-UA-Compatible tag to be absolutely declarative about how they’d like their site to display and to map Standards mode pages to IE7 Standards. Use of the X-UA-Compatible tag overrides Compatibility View on the client.” 

Compatibility mode can be triggered programmatically and I believe this is what every developer should do.  The reason is simple, you want to give your customer the best possible experience on your site.  You don't need to give your customer unnecessary choices.

There are several scenarios:

- If you have already tested your web site in IE7 and you are not yet prepared to make the transition you can just add the compatibility meta tag to all  your pages and they will automatically render in IE7 mode.

- If you are gradually transitioning to more standard code, you can selectively add the compatibility meta tag to the pages that you have not fixed and maybe never will (outdated content, support pages, etc...).

- If your code works well with IE8 then you should add the IE8 met tag!  This will ensure that your code will continue to render correctly even after the next browser transition.

In summary, the compatibility UA-X meta tag is the perfect way to ensure that your customers will enjoy your pages the way they were intended.

At ArtinSoft we have created the IE8 Compatibility Wizard that allows you to automate the meta tagging process.  You can check it out at: http://www.aggiorno.com/aggiornoexpress.aspx

Go ahead and TAG all your pages!

What Are We Facing?

Commonly, web designers are faced with the task of presenting tabular data, a common practice to display lots of data is the use of different colors for alternate rows, this is used as an aid to improve the readability of the information presented.

The most common way to use different colors in alternating rows is to use different CSS classes for the odd and even rows so we can apply a different style to each one. There are several ways to generate the classes in the rows, they can be generated when the table is created, usually by a server side script (ASP, PHP, JSP), or the classes can be set on client side, using javascript.

The Solution

Because we are trying to create a generic sample, we are going to focus on the client side generation of the CSS classes, and one of the best ways to achieve this is using jQuery.

jQuery is a very popular javascript library that provides us with many really useful functions and utilities that allow really neat effects in the client side code.

Including jQuery

To use the jQuery functions in our HTML document, we have to download the latest jQuery library from the jQuery download page and include the library in the document with a script tag like the following in the head of the page.

<script src="jQuery-1.2.6.min.js" type ="text/javascript"></script>

This tag adds a link to the jQuery library (version 1.2.6), and allows you to use jQuery functions in all the scripts of your page.

Creating the markup and styles

To create the "striped" table, we need to create a table with an id to identify it and apply the style only to that table, in this example we'll name it "stripedTable"

<table id="stripedTable">

After the table is defined, we need to create the styles that will apply to the table rows, thus we create a style for the even rows and another for the odd rows. In this code sample we'll also create an style for the table header

    <style type="text/css"> 
       .oddRow {background-color:#eeeeee;} 
       .evenRow {background-color:#cccccc;} 
       th {background-color:#666666;} 
    </style>

Creating the jQuery code

Finally, we need to create the jQuery code that will add the CSS classes to the tr tags, this is achieved with this code:

    <script type="text/javascript"> 
       $(document).ready(function() { 
       $("#stripedTable tr:odd").addClass("oddRow"); 
       $("#stripedTable tr:even").addClass("evenRow"); 
    }); 
    </script>

The first line of this code inside the script, registers a new function to be executed when the page has finished loading, the next line selects the odd tr tags inside an element with the id stripedTable and adds them the class "oddRow", the last line does the same with the even lines, adding them the class "evenRow".

Given that the assigned class names are the classes that are defined in the CSS style block, the table will be rendered with that style, producing the following result:

As we can see, the table gets the styles in a really neat way, and we have improved the readability of the presented information easily.

Some external references

• ALA Zebra Striping Analysis.
• jQuery Main Page.
• Zebra Striping Made Easy with jQuery.

What are we facing?

I want to reference a word or phrase by suppressing some characters or syllables, and in that way provide very useful information to the viewers, the browsers, search engine indexers, spell checkers, etc..

The Solution

The usage of the tag abbr denotes the use of a shorted word or phrase, but the real importance is that it's the semantic way for marking up abbreviations.

You can also use the attribute title to specify the whole word or phrase that the abbreviation refers to. With this some browsers must show over the abbreviation the specified text and this will help you to increase your web page accessibility.

Examples.

Some external references

• HTML ABBR TAG (w3schools.com).
• Mastering Text.

What are we facing

Users may use a customized style to see your web page. That’s true for Firefox and Internet Explorer, and it’s a powerful tool for users to survive an inaccessible site. How do you make users' life easier when they customized your site's style?

The Solution

You can do it by setting a “id” attribute to the “body” element. That “id” attribute must not be used by you, but it may be used by any user to customize how your page is displayed in his/her browser. Using appropriated rules and taking advantage of the high hierarchy of the “body”, users can restyle your site at their will.

For instance, if you add the attribute “ id=’aggiornosite’ ” to element “body” the user could do something like:

#aggiornosite h1 {
    font-family: Impact, sans-serif;
  } 

Some external references

• Making Your Site Modifiable
• CSS signatures
• Configuring the site to suit you

What are we facing?

You want a navigation bar that degrades gracefully on text based browsers. You will also want to have a navigation bar constructed with the correct elements to express the closest semantics to a “Navigation Bar”.

The Solution

The most currently recommended way to express Navigation Bars is using list elements. Semantically, navigation bars are simple lists of links to interest points of the site, that is, is just one dimension, it doesn’t justify the use of table elements. Tables are meant for data tabulation. Besides, tables are not friendly with text based browsers.

If you take a look at the source of this site’s Navigation Bar you will see something like:

          <ul>
                 <li><a href="http://www.aggiorno.com/default.aspx">home</a></li>
                 <li><a href="http://www.aggiorno.com/about-aggiorno.aspx">products</a></li>
                 <li><a href="http://www.aggiorno.com/try.aspx">download</a></li>
                 <li><a href="http://www.aggiorno.com/learn.aspx">aggiornings</a></li>
                 <li><a class="redlink" href="http://www.aggiorno.com/blog">blog</a></li>
                 <li><a href="http://www.aggiorno.com/contact.aspx">contact</a></li>
          </ul>

Using CSS magic, you can disable bullets, reveal content for browsers supporting CSS and hide content for those text based browsers.

Some external references

• A Navigation Bar that Degrades Gracefully
• Turning a list into a navigation bar
• Creating a pure CSS horizontal navigation bar

What are we facing?

More often than not, you come up with a beautiful title design based on a font inspired by Dali's most wildest dream. Out of the blue, somebody tells you that you can't go ahead because that font may exist only in your computer, and of course in the hypothetical Dali's computer. Your mom didn't raise a fool, so you just convert the title to image, and now everybody can see it. Think twice, text based browsers (blind users do use them) can't. No problem, just add an alternate text. Not so fast, for search engines “hx” (header) and “title” elements have more SEO relevance than “alt” (alternate text) attributes, it’s just about semantic best practices.  There must be a way to let your artistic spirit be expressed, life can't be that bad.

The Solution

Wait a minute. Is not the header (just above) in font Shelley Allegro? Yes, it is. The immense majority of the computers don't have it, so I did an image of it. But if you see this post using a text based browser like Lynx, or Firefox Accessibility Extension, you will be able to see "The Solution" in plain text. It is “h2” header element. How come? Take a look at the source code.

You will  see this:

<h2 class="firh2">
	<span class="firspan">The Solution</span>
</h2>

Let's introduce the Fahrner Image Replacement method. In this post you will see the basics of that clever method. By having the text of the “h2” inside a “span” element, you can play with styles a little bit. For those having styles and images, the following  CSS will show the image we want:

 .firh2
 {
       background-image: url( "fir-the-solution.gif" );     
       background-repeat: no-repeat;     
       height: 31px;
 }
 .firspan
 {
      display:none;
 }        

The "firh2" id will set image I want as the background of the header, without repetition of it and with the actual size of the image to avoid stretching. The “firspan” will hide the the text of “span”.

For those text based browsers, neither styles nor images are loaded, so the “span” content is displayed. 

Some external references

• Using Background-Image to Replace Text
• Facts and Opinion About Fahrner Image Replacement
• CSS image replacement for submit buttons

What are we facing?

The war of browsers is a never ending story. With Chrome as a new player in the browsing scene, how do you get sure your website is consistently rendered across multiple browsers? How do I get there?

The Solution

This topic is hot and the cornerstone of having a site accessible. The Central Office of Information of UK will tell you that “conforming to web standards such as XHTML and CSS are more likely to work well across a wide range of browsers”. So obviously, moving your site to web standards will take you on the right path. However, as Rick Strahl states: “even with XHTML there are still major differences between different browsers and how they set their default settings for various CSS tags.”

Oops, and now? Given such lack of communication/definition of standards between browsers in that level, a nifty workaround exists: Browser reset. As Rick Strahl again clearly explains, “A browser reset is meant to reset the browser’s CSS setting to a common default value set. Basically each browser has slightly different base settings mostly for margins, padding, borders etc. as well as many other settings that can affect browser rendering slightly and often results in the little inconsistencies […]. The reset effectively is used to reset the browser to a common baseline, upon which any further CSS settings are based.” 

Brilliant!

Just adding this line (assuming you already have the reset.css file):

<link rel="stylesheet" type="text/css" href="reset.css" />

And now you are able built style upon that resetting, and voila! it will rendered consistently on all browsers.

Where do I find a reset file? You will find some interesting options:

• Yahoo CSS Reset
• Eric Meyer’s Browser Rest
• Siolon’s Global Reset

Some external references

• A Killer Collection of Global CSS Reset Styles
• BluePrint CSS Framework