Yireo migration (4): CSS3
- Sunday, 06 February 2011
Already some time ago, we launched our new Yireo site. But there are still some interesting aspects on the site, we would like to share with you. In this blog we would like to focus a bit on the CSS3 features it has.
Complete revamp and faster performance
The Joomla!/MageBridge/Magento site was not only challenging for us because we completely revamped the Joomla! architecture, but also because we want to increase the site performance dramatically. While we had already optimized the underlying webserver, another simple but effective improvement was waiting: Make the site as small as possible.
One major improvement was to use as little as images as possible. Because CSS version 3 offers many ways to accomplish this, we decided to head for CSS3. Ofcourse, supporting various browsers is always problem, but we decided to cut through the crap and send a wake-up call: If our site looks ugly in your browser, you need to update your browser - a bit harsh, but we have to implement new standards some day right?
Our main design-dude Hans got the assigment to redesign our logo ... without images. He said it was possible, we all had a good laugh, but actually he was in the right in the end. If you visit yireo.com/logo, you can see the use of our Yireo logo without the use of any images. Pretty cool. Unfortunately it never made it to our live site, because the CSS it comes with seems heavier then a simple PNG-image. But it proved a point anyway.
Meet the Yireo designs
In pre-CSS3 webdesign, for various purposes, images are used. With CSS3 we were able to replace a lot of these images with basic CSS-code. For instance, the gradients in the top of every Yireo page would normally be built using a background-image that is repeated vertically. With CSS3, you can just set the gradient attribute to accomplish the same.
CSS3 also ships with the text-shadow attribute, which makes implementing shadow-efects easy as hell. Rounded corners were a bit more challenging, basically because IE sucks. With CSS3-compliant browsers the radius-attribute can easily be set, but we used CSS3 PIE to implement rounded corners as well for IE.
There you go: CSS3
So that's it: Our Yireo site runs with CSS3 and therefor ships with a minimum of images. Still, we made some extra modifications. Only recently we scratched our head because the homepage was shipping with 4 heavy images that weighed almost 600Kb in total. We decided to cut down the marketing-effect a bit, and create more basic images instead - earning almost 250Kb.
And next ... HTML5
Still, we have one more challenge to go: We would like to fully implement HTML5 to be completely prepared for all new standards. Our current site is fully W3C-compliant, but HTML5 just sounds so cool. We will keep you updated as it goes.