Building a Complex, High-Performance Site with HTML5, CSS, and jQuery
Building the GetHiFi site was a lot of fun and presented many challenges. We commissioned our friend Lenny Terenzi of Hey Monkey Design to design the site, giving him only some rough guidelines. We knew that would allow his creativity to run wild and push HiFi and our coding. Performance is a priority for HiFi and a heavily shadowed and textured site design would make for a perfect test. We wanted this to be a challenge.
When we had settled on the design, we knew coding it would be a long process -- but also well worth it. In our last post, Eli wrote about how we used minification to make sure that the css and js assets we were serving would load quickly. We had a few other objectives in mind when we coded the site:
- Use CSS Sprites as Much as Possible
- Make sure images were in the correct format for compression
- Use HTML5
- Embed Fonts
- Do the design justice!
In the end were were very satisfied with what we were able to do. We're most proud that we were able to build this site with only five images! As we coded the site, we kept a visual diary -- taking screenshots as we made progress.
Below, you can see thumbnails for all of the progress screens. We've also added notes to each one. If you start with the first one, you can walk through the entire design process. We also did a writeup on how we made this custom jquery slideshow.