Dating File Relaunch 07-30-2004
FourSedgewick Interactive has been hard at work revamping The Dating File and bringing it back to life. After a long hiatus we’re ready to bring the site back with a souped up engine.
The release brings along a new standards compliant design featuring XHTML 1.0 Transitional and CSS 2. As well as prominent use of PNGs and alpha-transparencies. In order to discuss the benefits of standards compliant design I’ve provided a bit of analysis between the version 4 site and the newly released version 5.
The Challenges
Being an aggregator site visitors will only spend a short period of time at the site, they may even leave before it finishes loading. That was why we needed to trim down the download time but still keep the same look and feel.
The Dating File previously sported a table based layout for presentation. Which required a lot of slicing of images to get the desired look, which left us with severe image bloat. Not to mention wasted bits on non-structure tags used for presentation.
The previous version featured unique rank, star on, star off, and join images. In order to get our color fade this was the only way possible since transparent gifs would suffer from rough edges.
The Solution
The use of valid valid XHTML markup and CSS helped reduce the tag overload induced by using a totally table based layout. Separating presentation markup from structural markup also aided heavily in terms of SEO. By presenting search engine spiders only with structurally marked upped content the site gets a better rating in terms of semantics. For instance our logo is actually an h1 tag which has a higher ranking than say an img tag.
In response to the excessive image use we capitalized on the features of the PNG format and its alpha-transparencies. The use of PNGs allowed us to trim 20 unique images down to just 4. Unfortunately our user base is primarily Win/IE users and alpha transparency images and Win/IE do not play well together. Fortunately Justin Koivisto’s IE PNG Hack provided a nice workaround which did not affect other browsers which do display PNGs correctly.
The Results
Below is a comparison between the previous version and the current version in terms of download metrics.
| Version 4 | Version 5 |
|---|
| Size of webpage |
| Visible text size |
| Size of html tags |
| Number of images |
| Unique images |
| Size of all images |
| Grand total |
As can be seen from the grand total we’ve optimized the site by about 46%! We’ve cut the download size almost in half, without compromising the visual display.