Yesterday we made some changes to the global header. The header looks almost identical, all the changes were under the hood. I have been meaning to make these changes for some time now. Luckily I used this week's independent study time to get it accomplished. More about that later.

From an on screen perspective the header is now 5px shorter and 960px wide (our new standard) instead of 900. The code was simplified to reduce space and be more descriptive. Last but not least it now works fully in all A-grade browsers (opens new window) and IE all the way back to 5.5. I have also outlined a few other benefits below.

Better Print Support

At some point the print style for the global header just simply disappeared. Not sure what happened but it was just gone. This newest update fixes that. The print header is now black and white with our wordmark and Aim Higher fully readable on top of each page. The top tab doesn't print and the bottom border is where it is suppose to be.

The only thing that changed in the footer was the removal of the copyright policy link and no longer underlining Wayne State University.

Better Mobile Support

Something completely left out of the old header was support for mobile or "handheld" style rendering. It doesn't do any mobile detection just yet but any device that does pick up the handheld style will now get a header like the one on the right above.

Using Opera's small screen rendering you can see a simulation of how it looks on a mobile device. The old header (left) doesn't accomodate for the small width and forces the user to scroll left/right. The new version (right) linearizes the page, makes the skip links visible and the tab links are now visible by scrolling down.

Fewer HTTP Requests

We reduced the number of HTTP requests that it takes to build the header from 10 to just 5. We did this by creating a sprite of all the images that make up the header. We did have to add two new "real" images though for the wordmark and aim higher to print in black and white. Having fewer HTTP requests will allow the header to load faster on devices with higher latency and makes rendering quite a bit faster. Yahoo has a great explanation (opens new window) about the importance of fewer HTTP requests. As you can see from the graphs above although we increased the file size size overall (just a little) the total rendering time was reduced by almost half.

More technical graphs with the comparison: old header (opens new window) | new header (opens new window)

Using a Sprite

Above is the sprite we used to create the header. A List Apart (opens new window) has a great article explaining sprites. This single image is used to create all the background and styled images that make up the header. It just needs to load and position it in the right spot and the browser does the rest of the work.

Skip to Navigation and Content

Recently testing our site with a screen reader we found our skip links were not functioning correctly. WebAIM had a great article about making the skip links available to people using keyboard navigation (opens new window) so we decided to give it a shot. Above you will see what any of our sites look like if you press the "Tab" key to navigate your way through the page. The "Skip to Navigation" link will come up first, then the "Skip to Content" will show. Basically when the links have :focus they become visible, otherwise they are hidden.

Legacy Code

We tried to support as many legacy situations as possible and fix any issues before hand. But unfortunately we came up with two situations after the fact that we could not account for. The first was users who replicated the main header code but hotlinked to our style sheet. These sites will see an odd shaped header till they update their code. The second is customized headers, some sites used our original code but with overrides in their local css to change the header style. These sites will all be broken till the individual site administrators update their code, there is nothing we can do about custom overrides.

Using the New Header/Footer

If we don't handle your web site and you want to use the new header/footer you can right away. The code and instrcutions can be found at: http://wcs.wayne.edu/style/ (opens new window)

Additional Issues

If you happen to see a site that is looking funky with the new header please take a screen shot and send it to wcs@wayne.edu and we'll look into it.