revelatedesigns.com is a beautiful new website designed and developed by Billy Finley at www.couloirgraphics.com. Billy often sends me a photoshop document of what the design should look like, and perhaps also some comments on areas where I may be able to compromise certain design features for outdated browsers. This was a challenging project because the design is very precise and there were no compromises allowed: The navigation menu had to feature the correct font, visual effects like rounded corners, drop-shadows, and transparency had to work in all browsers, and the various layers of the design had to fit pixel perfect.
The lowercase
The design called for the navigation menu to be in Franklin Gothic an attractive, clean sans-serif. Unfortunately, most computers do not have it installed by default, so I used the CSS @font-face property to import it. Font Spring sells Franklin Gothic, along with a special @font-face license, for $10-$20 depending on options, which I think is very fair. The font renders well at the size we used, although there are a couple of characters that, like certain kinds of food, start to look a little weird if you stare at them for too long. Despite that, it offers a much more “designed” design than the standard web fonts would have.
Another great feature of this project is the tabbed panels on the product pages. They allow the user to browse a lot of different information without having to scroll down the page or wait for new page loads. Plus, the tabs look cool. Once again, the Spry Framework makes it really easy to integrate this terrific effect. By default, it generates a lot of extra markup, but if you take the time to figure how it works (rather than just cut ‘n’ paste), you can trim off what you don’t need and it ends up being quite manageable.
Looking at the tabs and panels in the screen-cap below, you’ll see they have rounded corners. Thanks to CSS3, this effect can take less than a minute–if you don’t care about Internet Explorer. In textbooks, many industry leaders cite effects like this as appropriate places to leave Internet Explorer in the dark. But textbooks won’t help you move out of your parents basement, so for paying clients, it’s sometimes important to take the time to create rounded corners for people still using Internet Explorer.
The tabbed panel has rounded corners, even in poor Internet Explorer.
Rounded corners are easy when the box is always going to be the same width and height: Just make a rounded rectangle in GIMP. Rounded corners are really time-consuming when the box is going to shrink/grow both horizontally and vertically. You need several rounded-corner images and 4 HTML elements to assign them to. In this example, the panel grows/shrinks vertically only, and it was fairly simple to implement:
The background image used for the bottom
The top “half” of the box is a much larger image, with lots of extra height to account for more text inside the panel. The excess is hidden when not in use. In theory, if there were a ton of content, there would be an unsightly gap between the two images, but this is highly unlikely and it would be a quick fix: Just upload a larger image.
Lastly, the drop-shadow effect: I think one of the things that makes this design so eye-catching is the black and white background layered behind the white drop-shadow. It reminds me of a photographic negative and grabbed my attention the first time I saw the design. This design element is easy to integrate: Just tile an image that is slightly wider than the content and perhaps 20px tall (go much shorter and Internet Explorer takes forever to draw the page). Use a gradient tool or drop-shadow effect on each margin of the image, and it looks great. Then slap a rounded bottom on the page footer, just like I did on the tabbed panel, and you’re done. But this becomes a huge problem if you want the design to work in Internet Explorer 6.
Internet Explorer 6 does not support .png alpha transparency, so if your drop-shadow has an image behind it, as this design does, there will be an ugly block of solid color under the drop-shadow instead of the correct background image. The quick fix is this ridiculous blob of CSS:
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(shadow.png);
}
This technique has about a half-dozen serious pitfalls, but it worked fine in this case:
Drop-shadows for all.
I’m really proud of this project because I think the design, being both eye-catching and user-friendly, will help move more product for the client. That’s always the end goal, and I’ve been trying to keep that in mind as I work lately. Does the client care if I can do something with half the code, or does he care how much I’m billing him and how the end-product is going to improve his business?
