This year we were going to post cards for a change, then we thought better of it, and decided to make a donation to Headway Devon instead.
This donation included supplying them with a complete re-brand – realising this in stationary, popup display banners, Facebook and twitter badges/theme graphics.
You can view the card here – we hope you like it!
We had a lot of fun piecing together this years e-card. The aim was to come up with something simple with a link to our "labs" development blog. We wanted to avoid flash this year and create something that would work cross device.
Once we had settled on an idea the visuals and sound were worked up. Although a simple idea, we wanted to take this as far as we could without using any third party plug-ins.
Using the progressive enhancement approach the page features a combination of scripted animation and css transitions to enhance the page, while still functioning no matter what the device/browser is viewing.
Weather you're viewing in a text only browser, have javascript disabled or are using explorer, the greater the capabilities of your browser, the more complete the effect will be. We've pitched the level of animation and effects so they should run well on handheld devices/mobiles whilst still looking good on the desktop.
CSS3 support is getting much better, however some features are yet to be supported within all browsers, notably the swaying of the decorations which (at the time of writing) can be seen in all the major graphical browsers except Internet Explorer and Opera.
What has been interesting is how well the browsers cope with this – Firefox notably seems to use far more processor than Chrome which came out top in our tests.
Browser test results – scoring was out of 100 based on the concensus in the office, browser versions were the current relesaes at the time of writing.
| Browser | Notes | Result |
|---|---|---|
| Chrome | The best result observed, handles the CSS3 transitions effortlessly, on low end netbook some graohics were clipped. | 95 |
| Safari (mac) | As with chrome a solid performer – notably using significantly less system resources however. | 100 |
| Firefox | Poor CSS3 rendering performance – though all effects were supported. | 85 |
| IE | Lacks full support for CSS3 transitions, hence no swaying – stable otherwise. | 85 |
| iOS | Worked better than the netbook in tests, however the handling of Sound limited us to one sound effect at one time. | 90 |
| Android | A solid performer again – some quirks in development, however nothing that we couldn't work around. | 95 |
Although the card does function in all the major browsers at an acceptable level there are some that out shone others. Still early doors on CSS3 transitions though this experiment did throw up some interesting results.
