Omio's new look

This is the result of my last project, where I’ve been working about one month and a half. It’s a mobile phone comparison website and the objective was to change the look and structure, and make it simpler and faster. It was kind of painful work on it, because everything was a mess, and developed from the beginning without taking care of performance, proper browser compatibility, consistent/reusable styles, etc.

The main front end work was:

- General CSS and JavaScript performance changing the way CSS and JavaScript were generated. It was using one different CSS and JavaScript depending on the section. The idea was saving HTTP requests, but the fact that we loose caching and gain heavier files, wasn’t compensating saving requests. Now we just use one CSS file and some JavaScrips depending on the functionality, leaving them in cache.

- General structure/navigation/Search Engine Optimization improvements.

- CSS cleanup. It had loads of old/unnecessary styles. Of course applying the new design…

- CSS performance. Less image requests using the sprites technique.

- Better browser compatibility. No use of conditional extra files for Explorer, and real IE6 good looking.

- CSS centralization: forum and blog are different applications, and they where using different CSS files, duplicating the same styles. Now everything use the same CSS file.

- JavaScript cleanup. It was loading old/unnecessary plugins, and old/unnecessary code.

- JavaScript load performance. It was using just one file in the header, and executing most part of the things when the document is loaded. This caused jumps in the rendering, and long waiting time without feedback for the user. After some work, it doesn’t load JS in the header, rendering the website frame almost instantly. Loads the necessary files for rendering just before the content. Inline scripts just after the DOM elements to be replaced, so we don’t realize the change and the rendering is smooth. Load of the rest of scripts at the end of the document, so the page is rendered and usable for the user even before everything is loaded.

Apart of the front end, the back end is quite complex, and I would never do it without the great job of my mates Marcin and Sid, who helped me adding functionality. They also did some database performance work and the migration to Amazon EC2. Also mention to San and Emilio, who did the much better neat and simpler design.

The overall result:

Rendering times for the deals page:

08/10/08 – Old design in Engineyard servers (San Francisco)
From London: 7.11s
From San Francisco: 2.1s

09/03/09 – Old design in EC2 (Europe) + filters performance work
From London: 1.5s
From San Francisco: 4.5s

09/04/09 – New design
From London: 0.7s (more than 10x faster!!)
From San Francisco: 2.1s (same as when the servers where in San Francisco!!)

Plus (and this is a big plus) the next requests will have already cached all CSS and most part of the JavaScripts.

I’m pretty happy with the result, I hope the much better user experience help the site to make more sales. Will see in some months…

One Response to “Omio's new look”

  1. Jesus Carrera » Omio gets 5 stars!

    [...] user magazine gave 5 stars to Omio, one of the last projects I was working for. Its main strengths are a tidy interface and easy to use. I think we did a great job to the [...]

    Reply

Leave a Reply