CSS3 and Pictos

Over the past six months, I’ve been charged with redeveloping the Ambrose University College website, using BlackBaud NetCommunity. I worked together with the creative department (mainly focused on print media) for a new design (old one is here offline), and with many other departments for training in content management and functionality. I’ve learned quite a bit through the process, and grown immensely in my skills (primarily CSS and C#.Net). This post, however, is not so much about the experience I went through, as it is with the advancements I’ve made when it comes to CSS3 replacing images, and support for it in all major browsers.

The initial design was thrown together over a few months, as I worked on getting content uploaded, and functionality working. It was not until two weeks ago that I was able to sit back and actually focus on making the website look good, instead of making it functional. Although I am not a fan of certain aspects of the design, I have focused on improving what I could in it, and providing support for all browsers, including the bane of every designer/developer… Internet Explorer. During the “throw it together to make people happy” phase, I used plenty of images for buttons, and the designers rounded corners in all of the header images that we uploaded, however that increases their workload, and makes it harder to tweak buttons in the future (which we end up doing more than I’d like to admit). It quickly became apparent that the website would become a time-sink for those that manage it, and a resource-hog for those that view it, if drastic measures were not taken. Which brings me to two weeks ago…

We have always used box-shadows on the website, as I was not willing to go through the pain of transparent PNGs in IE, however we have buttons below the menu, that were image based, and I was told that we were to add more buttons to a few other pages. Since content was 99% online, I took a look at how we could improve the load times for the website, by replacing these buttons with CSS3 buttons.

Just a few days earlier, I had picked up Drew Wilson’s Pictos web-font on sale, and I suggested it to my boss, so we picked up another license and I began to fiddle around with some nice buttons. Through the use of border-radius and -webkit-gradient (and others like -moz), I was able to perfectly replicate what our designer had envisioned, but without using a single image. I quickly replaced five buttons with their CSS3 counterparts, and was working on implementing them on the new pages, when I realized that they did not look very nice in Internet Explorer. In fact, they were a solid colour, and due to a glitch with IE-CSS3, had rounded corners appearing 20px+ BELOW the buttons. Needless to say, certain faculty did not appreciate that their primary browser did not handle things properly, and I put some work into fixing things. After dropping CSS3Pie into the website, in place of IE-CSS3, things started looking up. Our box-shadows were more realistic, and the corners no longer jumped around like schoolkids overdosing on sugar. With a few more tweaks, (-pie-background to add support for two-point gradients in IE), we were back in action, and IE looked almost as good as Chrome and Firefox.

Since we’ve implemented these CSS3 buttons, I’ve managed to kill off close to 1 MB of images, and we’ve implemented mouseovers with minimal effort. When a new page is added to the website, we can also add some sidebar links, with images, without going through the longwinded process of designing new buttons, and finding icons that don’t really match with the previous set.

Pictos has already proved itself, and is well worth the money we invested in it, and I would highly suggest checking it out, if you have a few buttons that could do with a fresh new look on your website. And, as new as CSS3 is, with a bit of elbow grease (-webkit, -moz, -o, and -ms take up quite a bit of time to type out for every effect) and some fallback support (CSS3Pie for instance), you can do some gorgeous things while still supporting 99% of users.

Comments