Middle Ear Media

The 2010 Anthony Line

June 7th, 2010

Although Anthony & Co., Inc. has been pro­duc­ing adver­tis­ing spe­cialty items for over fifty years, I’ve only been design­ing 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 basi­cally from scratch. The idea here was to cre­ate a sim­ple, mod­ern design that matched the look of exist­ing brochures.

This web site was designed with PHP in order to uti­lize some of it’s advance fea­tures. A mod­u­lar design was imple­mented to reduce redun­dancy. So, any ele­ment of the design that is repeated on mul­ti­ple pages was writ­ten in a sep­a­rate file that is added dynam­i­cally when the page loads. Also, the date in the copy­right sec­tion of the footer auto­mat­i­cally updates on the first of every year.

I used some CSS trick­ery to add some nice fea­tures. For instance, the main nav­i­ga­tion bar knows what page is cur­rently loaded and styles the cor­re­spond­ing link to let the vis­i­tor know what page they’re on. These par­tic­u­lar links are also made non click­able since they lead to the same place. This should help to reduce con­fu­sion for the user.

Speak­ing of which, I wanted to make nav­i­ga­tion very easy and intu­itive. The prod­uct pages have a sub-navigation sec­tion with links to all prod­uct pages so all the prod­ucts can be reached eas­ily. These links, like the main nav­i­ga­tion, behave dif­fer­ently depend­ing on which page is loaded.

Each prod­uct page has a reminder about art­work spec­i­fi­ca­tions run­ning ver­ti­cally along the left edge. When clicked, the gen­eral infor­ma­tion page is loaded. Also, to save the users from exten­sive scrolling, a “Back to Top” link was added to the lower right hand cor­ner of all prod­uct pages.

Another cool fea­ture is located on the main prod­uct page. Images of the prod­ucts are laid out in a thumb­nail gallery. Using CSS sprites and the JavaScript library JQuery, I added an ani­mated 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.

Tags: Anthony & Co., CSS Sprites, JQuery, PHP, redesign, The Anthony Line, Web Design

This entry was posted in the Web Design category.