Design by Pelling

Philips Hue /

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.

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

Click to view


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

Pelling have over 50 years combined experience designing and coding websites. We work with companies of all sizes, from one-man bands to multinational blue chip companies. We endeavour to provide high quality service, while maintaining a competitive price.

We pride ourselves in our level of customer service, which we believe is the main reason behind our high customer retention rates.

Contact us