Tweaks to the global header and footer

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 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 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 | new header

Using a Sprite

Above is the sprite we used to create the header. A List Apart 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 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/

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.

Refresh Detroit Meeting – March 25 – Transitioning from Print to Web Design

Join us on Wednesday, March 25, 2009 when Noel Jackson of Automattic, Inc. (known for their WordPress and Akismet projects) will discuss the differences between print and web design.

What separates print and web in the design community? What do designers need to know to bridge the gap between print and the web? What constraints do web designers need to understand?

We’re thrilled that Noel will be presenting our first “design-focused” topic at Refresh Detroit!

Noel will discuss:

  • The differences between print and web design.
  • What should you be concerned about, and what should the browser deal with?
  • Pixel perfection: Legend or fallacy?
  • Color profiles, your screen vs. theirs.
  • Variables introduced by machine and human that make web design a unique mix of science and art.

Background

Noel Jackson is an übergeek, designer, and developer. Pulled from the depths of freelance design, he now works for Automattic, Inc. He loves the internet and dreams in HTML quite frequently. A self-proclaimed polymath, Noel was once a secret agent, fashion photographer, and ran a successful post-production studio in NYC.

When not pushing pixels and babbling about regexes, he’s probably listening to music (300 LPs and 250 gigs in all), DJing, or creating something (generative art is a favorite as of late). He lives in Detroit with his beautiful wife Stephanie, a fish named Hiro, and a chinchilla named Elvis.

Where: Washtenaw Community College, Ann Arbor, Michigan. We will be meeting in Room 150 at the Morris Lawrence Building (map). Plenty of free parking is available adjacent to the building.

When: Wednesday, March 25, 2009, 6:30pm to 8:30pm

Cost: Free! Open to the public.

RSVP at Upcoming.org