Brief
Cartoon Network Africa, DSTV and Save the Children have created a new award to showcase the social, technological and artistic projects of young girls across Africa. They plan to award scholarships to help carry out these outstanding projects.
The award is promoted by top ambassadors: Powerpuff Girls and South African singer Toya Delazi.
They made it
Lot of people have been working on this project, here is our part of people working on it.
-
Adrien Pertoldi -
Jérémy Petrequin -
Eloïse Gaboriau -
Gwendoline Gendron -
Emma Lambert -
Priscillien Gac
Design
The site is composed of two parts: a presentation of the awards, along with project examples aiming to inspire young girls, and the award registration page.
The latter was designed to be as simple and as pleasant to fill out as possible. Belle, Bulle and Rebelle are on hand to encourage young girls at every stage of the process, while professor Plutonium is available to give applicants advice about describing and writing out their project.
Across the entire site, we developed micro-animations and transition effects in keeping with Powerpuff Girls’ cartoon universe.
Code
As this project is aimed at young African girls, every effort has been made to promote its use on mobile terminals with slower connections, whether with regards to the server, front-end or the actual, “felt” performance and experience.
On the server side, the project is based on our in-house framework, with its strong back-end cache that allows pages to be rendered very quickly.
It is on the front-end side that most of the work was done to render a quick-loading site, which nonetheless remains very animated and heavily visual: the use SVG in as many cases as possible, lazyloading, reduction of the assets and scripts to their strict minimums, cache policy…
In terms of “felt” performance: in keeping with new mobile app trends, when a weak connection is detected (less than 3G), placeholders are displayed that simulate text and image zones while the typography and assets are loading. This provides the illusion of faster loading, as the user very quickly sees a visual rendering of the site, rather than a blank page, while the site loads.
