Blog

Where we discuss our work, thoughts, and process

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:

  1. Use CSS Sprites as Much as Possible
  2. Make sure images were in the correct format for compression
  3. Use HTML5
  4. Embed Fonts
  5. 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.

Comments

  1. Fernando's avatar
    Fernando
    | Permalink
    sorry i dont see any thumbnails :S
  2. Chris's avatar
    Chris
    | Permalink
    Thank you so much for documenting your development process -- the website is beautiful, and the slide-show demonstrates the build process quite well. One question (newbie alert!): Will the use of HTML5 be an issue for older browsers, such as IE6? Not a criticism at all, I've just been reading conflicting opinions about using HTML5 now or waiting for broader support.
  3. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink
    Fernando,

The slides are post loaded with JS -- they may take a second. What browser are you using?
  4. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink
    Chris,<br />Thanks for the kind words!<br />HTML5 actually works great with IE6. The HTML5 Shiv can give great backwards compatibility.<br />This site does not support IE6 however. This is a decision we made since IE6 accounts for < 3% of our traffic.
  5. Ali's avatar
    Ali
    | Permalink
    Thumbnails don&#39;t working for me either using Opera 10.10. Fantastic design though.
  6. Christine Fürst's avatar
    Christine Fürst
    | Permalink
    Hi there,&#13;&#10;&#13;&#10;Thanks for sharing. I follow you guys (also girls if applicable) for a while and I like the stuff you make.&#13;&#10;&#13;&#10;Happy coding!&#13;&#10;&#13;&#10;Christine ( a.k.a. @stinie on Twitter )
  7. Joel Sutherland's avatar
    Joel Sutherland
    | Permalink
    Thanks Christine!
  8. m's avatar
    m
    | Permalink
    Sounds interesting, unfortunately I can't see any thumbnails with Firefox 3.6, Firefox 4 beta 6, Chrome 7 beta or IE6 <br /> <br /> IE6 is not surprising but the rest sure are...
  9. Velvet Grooves's avatar
    Velvet Grooves
    | Permalink
    No thumbnails in IE, Firefox, Safari or Chrome... can't see anything?

Leave a Comment

Real Time Web Analytics