I can’t help but say that I’m pretty proud of the latest site redesign for this site, which you can view here. Compared to the old site (I love archive.org), it is definitely a world of difference.
I started with the standard design process of building out the page layouts and design in Photoshop, which again, for more of a developer than a designer is still new to me. I spent some time looking for stock images or icons that I could use for the navigation icons, and ended up finding ones by TDPK at www.tpdkdesign.net that fit very well. Once those were in place, much of the site fell into place.
3D Feel
I liked the 3D feel that the navigation icons and new logo brought to the design, and wanted to incorporate that into the different elements of the site. I went with gradients (something else new for me) with both the background and the header mast, and a drop shadow around the overall page border to help with that 3D feel. I also played off the blue-orange color relationship to help those headers and links really pop.
As I have gotten into the habit of developing and testing my sites in Firefox first and then testing and hacking for both IE 6 and IE 7, that did present some challenges at first. I went forward with transparent PNG graphics, which I knew ahead of time had problems being displayed in IE 6. I didn’t want to sacrifice any of the detail or quality of the design I was so proud of by limiting them to GIFs just to work in IE. Never fear.
Perhaps what I’m most proud of is how I overcame that. There are two main areas where the transparent PNGs came in to play and with what I had to do for IE 6: the gradient and icons in the header mast and the drop shadow around the page border.
Header and Navigation Images
I used the gradient in the header mast to separate it from the rest of the content on the page. I didn’t want to degrade the quality of the navigation icons I was using by converting them from PNG to GIF, and the same for the logo with it’s drop shadow. For those that don’t know, a transparent PNG in IE 6 does not show up with the transparency you would expect, but instead it uses a nasty gray background for the transparent parts. For a quick demo, check out the logo image here by opening it in IE 6.
Although they suffered from the same issue of not wanting to be GIFs, there was actually a need for two different solutions.
First, the logo, which was a pretty easy fix. Since the logo was part of the markup of the page directly, I was able to use a find/replace technique via the AlphaImageLoader as referenced by Jeff Croft in the book, Web Standards Creativity. Essentially, it references the logo image by it’s element id and uses the AlphaImageLoader to swap out the existing image for a div tag that is used to load the image into. It’s encapsulated in its own javascript file and included using a proprietary IE conditional comment to run only for IE 6 and below.
For the second challenge, the navigation icons, it was different because those are included via CSS and not actually part of the viewable page markup. Essentially, I’ve been getting into the habit of creating navigation menus and links as unordered lists and using CSS for styling and positioning them, even the mouse-overs. So since they’re not in the markup, the previous javascript find/replace technique for the header logo would not work.
What I did instead, again using the conditional IE comments, was include a separate CSS file specifically for IE 6 and below, that would style the navigation with non-transparent PNGs rather than the transparent ones. This also meant I could not have my gradient background in the header mast, so that separate CSS file also uses a plain white background to avoid that. Not the ideal design I wanted across all browsers, but it was a better solution for IE 6 users only.
Page Border and Drop Shadow
The drop shadow around the page border also consists of transparent PNGs, for this purpose to support the background gradient of the page. The page border consists of 3 images, again not in the markup but rather contained and styled in the CSS file. Those three files are:
- Header border with rounded corners and no top shadow
- Content border with only the left and right borders, and used to expand based on the page length
- Footer border with rounded corners and bottom shadow
The background of the page consists of a gradient image repeated horizontally along the x-axis and a background color that fills in everything below it and supports the page growing vertically based on the amount of content on the page. This growth is also supported by the second image listed above, which is used as the content background for all the pages.
Based on that construction and the size of the background gradient, the header border image will always that the same amount of gradient behind it, because it never moves. For the most part, this applies to the footer border image as well because it’s usually located far enough below the gradient to be the standard background color. The main issue was with the content border, the top of the content would be part of the gradient and need a different background color than content further down on the page.
This all works flawlessly for Firefox and IE 7 with transparent PNGs, but has the same issue as the navigation icons mentioned earlier. It also employs the same solution, though, with separate images for the border images in a separate IE 6 CSS file, and rather than a background gradient on the page, it uses only a consistent color. That consistent color is also built into the border images behind the drop shadows, to fit in unnoticed.
The Result
So at the end of it all, I was still able to keep the perfect design in Firefox and IE 7 that I had designed in Photoshop without having to sacrifice anything. With just a small tweaks and a little bit of degrading in the design, I was also able to have a very respectable version of the site design in IE 6 without having to duplicate much of the markup, styles and images. In a couple years from now, when IE 6 is used less, I won’t have to change anything. 🙂
