There’s always a lot going on at WooThemes in terms of theme development, maintenance and support. Along with everything that goes in to making top quality themes & keeping our customers happy, there is also quite a bit of behind the scenes work involved in maintaining the WooThemes website itself.
WooThemes.com handles a lot of traffic, and is in fact fast approaching nearly 5 million pageviews per month so it’s really more important than ever for us to keep the site as lean & optimized as we can.
This post will look at some of the recent updates we’ve made to the site to enhance performance, increase usability and embrace new technologies.
The first thing we’ll look at is something you probably wouldn’t notice unless you have a very keen eye. The navigation and header sections across the site have been redone to use CSS3 gradients & shadows, instead of images.
Visually, the difference is minimal, but not having to load a 2000px wide image on each page makes a difference when it comes to load time. Having it all in CSS also makes it much easier if we want to change the styling for whatever reason. Below is the CSS we use to apply the gradients for the header, generated using the very handy CSS Gradient Generator:
background: rgb(113,153,183); /* Old browsers */ background: -moz-radial-gradient(top, ellipse cover, rgba(113,153,183,1) 0%, rgba(48,100,148,1) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, top center, 0px, center center, 100%, color-stop(0%,rgba(113,153,183,1)), color-stop(100%,rgba(48,100,148,1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(top, ellipse cover, rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(top, ellipse cover, rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* Opera 12+ */ background: -ms-radial-gradient(top, ellipse cover, rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* IE10+ */ background: radial-gradient(top, ellipse cover, rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7199b7', endColorstr='#306494',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Besides the performance changes, we also make changes to the appearance & interface across the site. We’ve recently updated our themes listing page with a sidebar containing some filters, making it much easier to browse through our 125+ themes and find the one that suits your needs. We’ve also implemented this sidebar filter system on our extensions page which has grown significantly since WooCommerce’s launch with loads of extensions previously hidden away on archive pages.
We are also in the process of redesigning our Affiliates sign up page, based on some proper analytics based information & feedback, and some A/B testing, which isn’t something we’ve done much of in the past, and we are excited to see how this will affect the way we design for woocommerce.com.
Those are just a few of the front-end related changes we’ve made to the site in recent months. There is a lot more that goes into maintaining a site like WooThemes on a daily basis and we will be sharing more of these processes with you in the future.