Information Hierarchy and Feature Detection

Apr 12, 2010
Episode 20
Nick explores an intersection between information architecture and semantic markup called "Information Hierarchy" and Jim demonstrates feature detection with Modernizr.
Spotlight

Thanks to those who make Doctype possible!

Information Hierarchy

When designing web pages, it’s important to give the user a clear understanding of the hierarchy of information. The best way to do this is to emphasize certain blocks of text, like headers, and to deemphasize other blocks of text, like captions or less important details.

Here are some rules you can apply when designing the hierarchy of a page.

Header Tags

The header tags in HTML are numbered h1, h2, h3, and so on all the way up to h6, and you should use them! Using headers appropriately can quickly provide a lot of structure to your web page, and can even help you outline your ideas when you’re creating content.

I always start using headers by making the web site’s title or logo, an H1 tag. Then, I don’t use H1’s anywhere else in the page. This is just what I do, but if you think about your page’s information as a hierarchy or a tree, there should really only be a single root. That’s the website’s title.

From there, often times the page will have a title, separate from the website. This is a good place to use your H2 tags. Then, as you work your way down the page, you should start with the higher numbered tags to build breadth, and then go into each section with the lower number tags, to build in depth. This will not only make your page very semantic, it will also be very scannable for the user, even with the browser’s default styles.

A good tip to keep in mind when blocking out your headers and page sections, is to indent each header slightly more than the last. You might do this with various border styles and padding, or you might just simply indent the header. Either way, you can more clearly outline your site’s structure by making it appear as though more detailed information is underneath the broader section header above it.

Highlights

Sometimes you’ll have a header, or some text inside a paragraph, that you want to make absolute certain the site visitor sees. Here are a few ways you can do that.

The most obvious way to draw attention to very important text is to make it bold. The most semantic way to do this is to apply the strong tag. However, for text that’s even more important, I like to wrap it in a strong tag or a span tag and then apply a special highlight class. This highlight class sets a yellow background color on the text, making it appear as though it has been highlighted with a yellow marker. If you decide to use either of these techniques, you should use them very sparingly.

Another great way to draw attention to a header is to make good use of space. Web pages usually include a lot of information and clutter, so by having a lack of visual noise around an element, you can actually draw more attention to it. To learn more about how to make good check out episode 3 of Doctype at doctype.tv/space.

Weak Text

HTML features a strong tag, but if you’re like me, you’ll wish that they also included a weak tag. If you just keep turning up the volume on your text by using headers and strong tags, eventually there won’t be any way to put even greater emphasis on something that’s even more important. Everything will just be at the same volume and your page will lack structure. To avoid this, try deemphasizing some areas of your site.

A great way to tone down parts of your site is to use the emphasis tag and italicize text. Usually italicized text will appear lighter and won’t draw as much attention. Additionally, try changing some text to a light gray color. The lighter the gray, the less important a piece of text will appear.

Resources

Modernizr

When we build web sites, we would like to be able to take advantage of the latest and greatest features of our web browsers, but we also want to make sure we support some of the older browsers. With HTML5 and CSS3 on the horizon, there are a lot of browsers supporting cool new features, and some that are not keeping up.

Whenever we use a feature that isn’t ubiquitous is all browsers, we should consider the experience for browsers that don’t have support for that feature. Whether that means falling back to another solution, or omitting the feature.

Common practice used to be reading the browser’s user agent string, the text that identifies the broser make and version. This, however turns out to be an awful solution, as it is impossible to keep track of which versions of browsers support which features, the fact that there are so many browsers, and that some people will modify their User Agent strings for compatibility.

The best way to handle cross-browser compatibility is feature detection.

Feature detection

Instead of trying to maintain a log of which browsers support which features, Browser feature detection figures out what the browser supports by simply asking it.

For instance JavaScript API’s can vary from browser to browser, In most browsers adding event listeners is done using the addEventListener method, but IE uses attachEvent. Instead of checking if it is IE to decide which method to use, we instead ask the element if it supports addEventListener, if it does, we use it, if not we try attachEvent.

if(element.addEventListener){
  element.addEventListener('click',doSomething,false)

}else{
  element.attachEvent('onclick',doSomething)
}
Using Modernizr

Modernizr is a script that detects support for dozens of HTML5 and CSS3 features in the browser. Modernizr does not add support for any of these features, but rather gives you a fast and accurate way to determine the capabilities of a browser, so that you can account for the differences accordingly.

Modernizr can tell you if the browser supports HTML5 Video, border-radius, opacity, multiple backgrounds, CSS transforms, geolocation, localStorage and more.

Modernizr makes all of this information available for you in two ways, first it makes available the Modernizr object in javascript with several properties indicating true or false for support. It also ads several classes to your body tag, which indicate what features are supported.

The css classes allow you to make special css rules for the cases of features being available or not available in your page. For instance if you wanted to use box-shadow when available, and a border when it’s not, you could define the fallback case of the border, then define another rule scoped under dot-boxshadow that removes the border and adds the dropshadow. Browsers that don’t have dropshadow capabilities will not have dot-dropshadow defined on the body, so the second rule will be skipped.

/* Simulated box shadow using borders: */
div.somediv {
   border-bottom: 1px solid #666;
   border-right: 1px solid #777;
}
.boxshadow div.somediv {
   border: none;
   box-shadow: #666 1px 1px 1px;
   -moz-box-shadow: #666 1px 1px 1px;
   -webkit-box-shadow: #666 1px 1px 1px;
}

To use detection in javascript, just read the properties of the Modernizr object. For instance if we wanted to use the canvas, we could wrap our code with a check on Modernizr.canvas

if(Modernizr.canvas){
  var ctx = element.getContext('2d');
  /* Draw on canvas */
}

Modernizr will also do the javascript work necessary to make HTML5 element’s stylable in internet explorer. Of course it doesn’t make them functional, but it will act as a replacement to the HTML5shiv script we showed you in episode 15.

Resources