John Frieda – Style Addicts

Adaptive desktop/mobile site (HTML5, CSS3 and JavaScript) - March 2012

Desktop splash screen

Style Addicts was a campaign from major hair style brand, John Frieda. The basis of Style Addicts was a simple 6 question reward survey. Creating something engaging from a simple, usually dry concept, was a difficult task for the designer. As sole front-end developer, I worked alongside the designer to help forge an engaging experience, pairing their great design with interesting and attractive interactions, without overcomplicating things. The result was an adaptive, cross-browser and easy-to-use web app which proved hugely popular.

Campaign has finished - No URL available.

Mobile

Question screen

For the sliders, the useful and versatile Dragdealer slider library was favoured over jQuery UI due to its better touch support, easier customisation and lighter footprint. Instead of hardcoding the sliders, I progressively enhanced the form using JavaScript to generate the sliders dynamically on page load and as well as extending it to enabling the form label onclick event to update the slider.

Slick interactions

When choosing your answer, CSS3 transitions were used to fade out the unchosen options.

Mobile splash screen