The Making of VigeTurf - Design Build
Keith Muth, Former Viget
Article Category:
Posted on
The making of VigeTurf brought together folks from all our labs. In this series, we're pulling back the curtain to give a detailed explanation of how it was created. Here, it's all about the design build.
There are a lot of design elements on the page that act as decoration I decided to cut the design up into two large background images. The obviously problem with creating large background images is that it increases the size of the site especially with the Flash element, Flickr feeds, and displaying the user created images. Since this was a fun, internal site that needed to be put up quickly, we tried our best to compress the images down and make CSS sprites for all the other smaller elements. For the main background I left some extra "paper" on the bottom in case the content scaled and saved the image as a JPEG to keep the file size smaller. Unlike the main content, the footer content would likely never change so that image is a fixed size and since it sits on top of the repeating wood texture, I made it a transparent PNG in case the main content ever pushed it down.
All the other elements on the page, such as icons and buttons, are found in one big background image and then CSS background positioning is used to give the coordinates of what part of that big image should be displayed. So that brings the total number of images I used for the layout to about 4 images (I'm not counting a couple really small repeating background images). Not bad! One could argue I could've gone even further and condensed those images into a bigger sprite. If you don't know about CSS sprites there are a lot of good resources on how to make them, such as this A List Apart article, and Yahoo has suggested using CSS sprites in their Best Practices for Speeding Up Your Website. Speaking of Yahoo, another useful tool I used was their YSlow plugin for Firebug. YSlow can give you stats on the performance of your page and I used it to check the size of the site.
