Although Anthony & Co., Inc. has been producing advertising specialty items for over fifty years, I’ve only been designing their web site for twelve. The last major update was done about three years ago, so I was glad to get a chance to redesign basically from scratch. The idea here was to create a simple, modern design that matched the look of existing brochures.

This web site was designed with PHP in order to utilize some of it’s advance features. A modular design was implemented to reduce redundancy. So, any element of the design that is repeated on multiple pages was written in a separate file that is added dynamically when the page loads. Also, the date in the copyright section of the footer automatically updates on the first of every year.

I used some CSS trickery to add some nice features. For instance, the main navigation bar knows what page is currently loaded and styles the corresponding link to let the visitor know what page they’re on. These particular links are also made non clickable since they lead to the same place. This should help to reduce confusion for the user.

Speaking of which, I wanted to make navigation very easy and intuitive. The product pages have a sub-navigation section with links to all product pages so all the products can be reached easily. These links, like the main navigation, behave differently depending on which page is loaded.

Each product page has a reminder about artwork specifications running vertically along the left edge. When clicked, the general information page is loaded. Also, to save the users from extensive scrolling, a “Back to Top” link was added to the lower right hand corner of all product pages.

Another cool feature is located on the main product page. Images of the products are laid out in a thumbnail gallery. Using CSS sprites and the JavaScript library JQuery, I added an animated hover effect that turns the image to gray scale and fades in a dark inner glow.

Check out anthonyco.com to see the web site for yourself.

After being inspired the other day, I decided it was time to design a new personal site. I’ve owned the domain haidabo.com for a while, but wasn’t really sure what to do with it until now. So, it has become a place to showcase my various projects as well as aggregate RSS feeds from all of my sites with dynamically updated content.

While I was designing haidabo.com, I used a technique that I’d like to share called CSS Sprites. This wasn’t my first time using sprites, but it was the first time I planned on using them to this extent. My goal was to create the entire website using only one image. How is that possible? A sprite is a large image that contains many smaller images inside it. So, I created all of the images for the site and placed them all inside one large PNG24 image with a transparent background.

When calling for an image (any image) in the CSS file, specify the sprite as the background image and give it a width and height. Then use unique IDs or classes to shift the background position specifically for each image. One problem I ran into during this process was repeating backgrounds. Sprites don’t work well for repeating images. They do have some limited ability to repeat one-dimensionally, but it’s tricky. To keep it simple, I decided to use separate images for my repeating backgrounds.

So, why would anyone want to use this technique? Sure, it’s a bit more work to combine all your images and set all those background positions, but in the end it will make your website more efficient. Each image that is loaded on your site requires a separate HTTP-Request (to your server). By combining images into a sprite, you reduce the amount of work your server is required to do. This may not make much of a difference for a small site without much traffic, but as the size of the site and the amount of traffic increase, this becomes more of a benefit.

haidabo.com