This was a really fun website to work on and one of our first projects we ever did. We were originally tasked with updating and modernizing the website for a shopping plaza. However when we looked at how it was built we discovered that it was comprised of an auto generated table containing sliced images. It was a very old technique to build websites and it has a lot of drawbacks. It was clear at that point that the site needed a total reconstruction. We took all of the original artwork and reproduced as much of it as we could in HTML & CSS.
By using CSS Sprite sheets, the home page went from using 15 images to only 4. When we were finished the page’s payload size had been reduced considerably but that isn’t the best part, We put together something special for their suite availability page.
The original page was a sliced up Fireworks project that had image swapping behaviors defined for each suite on the graphic. When the mouse hovered over a suite, one of two information boxes (also images) would change (through image swapping) showing if the space was occupied or unoccupied. The updating a page like this would have been a real pain because the Fireworks project would have to be modified and the entire page and its accompanying image slices would have to be re-exported and pushed to the server.
The suite availability page required over 100 different images and assets to function correctly. This meant that for this one page to load, it would require over a hundred server requests and have a rather large payload. It was all very inefficient so we took a totally new approach in the redesign.
The finished product was a substantial improvement, the home page had a 285% increase in speed because of its improved efficiencies and the office and retail page improved by about 1,100%. This website was developed several years ago, before smartphones and mobile browsing turned mainstream. Still, despite its age, it was a major step up from what it was before.