Design Method
Philips Hue – HTML5 Ad Campaign
Many of you may already be familiar with Philips Hue. For those of you who aren’t, Philips Hue is a smart, wireless LED lighting system that adds a whole new dimension when it comes to controlling your lights. For example you can set Hue to turn on your lights as you arrive home through geolocation, control your lights while you’re away, or even come up with your own logic using services such as IFTTT.
PHILIPS HUE /
THE BUILD
Pelling were asked to create a series of 54 online adverts to help promote Philips Hue. The adverts were to be built using HTML5/CSS3, and had to include some animation to make them more visually engaging.
When creating HTML5 ads, the creative has to be split into multiple layers so that they can be individually animated. This led to one of the main challenges – keeping within the file size limits. We were required to keep the total size of each creative under 100KB.
The design of each advert was carefully considered in order to minimise the possibility of running into issues. As an example, we tried to keep the use of transparent gradients to a minimum, as this would quickly increase the file size.
We also optimised the images during export in 2 ways. Firstly, we reduced the quality of each jpg image to reduce the size of the file – the quality was however kept above a level where you could see a degradation in appearance. We then ran Optipng to optimise and reduce the file size of png images.
PHILIPS HUE /
THE RESULTS
Each of the ads were carefully tested and packaged into a zip file, removing any unwanted files created during development. The file size was rechecked (some were cutting it fine!) and fallback images created.
An example of the end result can be seen here – click on the ad to start playing the animation.
