Bear-y technical

Our brief for the ‘Let a Bear Sh!t in the Woods’ campaign was very clear and the creative solution seemed to come quite naturally (so it seemed to me as a non-creative in the team!) However, the technical scope was open – it was up to us to find and recommend the right solution to achieve Animals Asia’s goals, a solution which was completely cross-browser and cross-device compatible.

My role as Developer was to enable the campaign to spread effortlessly across social media, maintaining the humour and charm of the creative concept and the animation as it did so. The project is intended to be the first step for Animals Asia supporters, they are not already engaged with the organisation, and therefore are unlikely to be tolerant of technical glitches or delays – we wanted to deliver maximum pledges and donations without any barriers to taking part.

Flash would at one time have been the language of choice for this kind of animation and would be more flexible and faster to program in some elements but it doesn’t deliver on the compatibility. The HTML5 stack on its own would be onerous to program a complex set of interactions like this. Our solution was a combination of HTML5 and external tools like Edge Animate. This also allowed us to cater for different browsers and their idiosyncrasies.

Close collaboration with the designers made sure that the technical limitations of HTML5 weren’t visible to the end user – for example, the animation loops until you interact with the page – e.g. to donate – and with careful consideration to looping, timing and positioning we ensured that the graphics didn’t ‘jump’ when you transition between the two.

The animation is customised to the user’s name which also required some thought, first in design to cope with any (feasible) name. To enable sharing of customised pages across social networks I would usually create a database token that referenced the customised data, then attach the token to the url when sharing it. The token could also be used to create short urls. However, these options couldn’t be supported by the clients’ CMS as we didn’t have a database to store the customised data in. Instead we attached the data directly to the final url.

The campaign is multilingual so the data was base64 encoded first to support international character sets. We then implemented internationalisation on all the text elements. The animation uses Javascript to pull in the relevant language on page load depending on the user’s browser language settings.

My favourite part of the solution is that, even if Javascript or other parameters fail, the default page is still usable; the overall user experience of the page isn’t broken and users can still make a donation even if the animation isn’t fully loaded. This is a result of the structure of the page build and being mindful of the user and the brief from the start of the build.

back to blog


What's your archetype?

Learn about our workshops and courses