Philips Hue – HTML5 Ad Campaign

Philips Hue /
HTML5 Ads
Design & Build

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 Brief

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.

Philips Hue /
The Build

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.

Two examples of the end result can be seen here - click on each ad to start playing the animation.

Red Green Blue Turn on your imagination Turn on the experience Turn on living this summer of sport Discover more

Click to view

Replay

Wakeups Energise Family time Relax yellow bulb blue bulb Light for your moments wakeups Energise Family time Relax Discover more

Click to view

Replay

Want to hire us? We'd love to hear from you




Phone

01252 341 730
01252 341 678

Email

hello@designbypelling.co.uk

Address
Pelling Marketing by Design,
Kiln House Studios,
Badshot Farm Lane,
Badshot Lea
, Farnham
Surrey, GU9 9HY