How we did it: The Formers

Posted by Jade on: August 3, 2011 in: + rehabstudio, Build, YouTube

Lines and lines of code excitement across the studio today about the launch of our latest YouTube channel, The Formers, for Google Ideas.

In a tech first, our Belfast development crew have re-created the YouTube channel experience in full – which will be a first for iPad and tablet users once rolled out. The rich layered animation transition and navigation experience has been designed to be fully accessible through a mobile browser (rather than through a dedicated iOS App.)

The Formers is our first partnership production with the Google’s new think/do tank Google Ideas. The project is designed to provoke a global conversation about radicalism by bringing together an eclectic mix of former-extremists, their victims and counter-terrorism specialists.  These ‘Formers’ and their survivors both tell their stories on the channel, letting consumers interact with both sides, sharing their views and experiences. The idea being to turn a complex social issue into a positive movement.

A YT iPad first

The YouTube channel is an HTML5 + Javascript-based app.  We decided to make it plugin-free to showcase our work with the latest web technologies and standards. It uses CSS3 to provide smooth, hardware-accelerated effects, and makes use of recent innovative Javascript libraries (Modernizr.js and innershiv.js in particular) to ensure backwards compatibility/graceful degradation in older browsers.  We also used embedded web fonts to make our typography rich and in keeping with the design, whilst staying accessible and searchable.

The content of the app is presented on a number of parallax ‘layers’ moving at different speeds when scrolling to provide a sense of depth. We chose this style because of the really strong white diagonal in the design. The parallax code itself was custom-written, using hardware-accelerated CSS3 transitions to smooth out the effect on modern browsers, falling back to a Javascript-only scroll on platforms that don’t support them. When the app loads, the page flow is dynamically restructured on-the-fly to accommodate the parallax layering.

The content is marked up using new HTML5 tags such as <nav>, <article> and <section> assisting search engines and devices.

Videos are embedded in the app via the YouTube Iframe Embed API, which serves HTML5 <video> content to platforms that support it, future-proofing the app, falling back to a standard YouTube player in other cases. Video content itself is served via integration with the YouTube Data API, which returns JSON-based video feed data on-the-fly in response to user interaction with the app. YouTube tagging is used to organize the video content according to extremism type and Former name. We used jQuery transitions in the video pages, and throughout the app, to provide a high-class experience.

The channel app also incorporates Google Moderator functionality to provide a means of feedback and discussion between channel users and The Formers themselves.  We also included basic support for touch devices and hotkeys/tabbing navigation, to ensure a friendly and full-featured experience across the widest possible range of platforms.

The entire app will be deployed via Google’s own App Engine platform to ensure scalability and the tightest possible integration with Google support.

Check the channel out here.

The YouTube channel is the main consumer site for The Formers project, launched in conjunction with the Summit Against Violent Extremism in Dublin.  Jurgen – our main man in Belfast – was there:

“The Formers project is a real game changer, at the summit we got to meet and discuss the channel with Formers and Survivors which really brought the importance of this project home. Working with Google products is always a delight, it’s our first HTML5 YouTube channel and we had real fun refining the interactions for touch devices. Looking forward to watching this project grow.”


The YouTube channel is soon to be followed by a ground-breaking relationships platform created by us and powered by Google’s latest social tech design solutions. Which will transform the collaborative power of like-minded activists, individuals and experts on an international level.

More on that to come.

- No Comments