L'Agence WordPress
tooptoop

Toop Toop

Chaussure pour enfant

One Page & Animations HTML5

Toop Toop, c’est avant tout une aventure humaine entre un designer et un graphiste numérique. Alors que ces deux hommes ne se connaissaient pas, ils se sont croisés en Amérique du Sud durant leurs tours du monde respectifs.
Rapidement, une idée leur vient, créer une chaussure unique, à destination des enfants. Une fois les premiers coups de crayons posés, ils se rendent compte que la chaussure, lorsquelle est dépliée, donne une forme. Celle d’un personnage original, parfait pour les enfants. Toop Toop, tel sera son nom.
Plus qu’une chaussure, c’est un concept qui est né. Un site reprenant cet univers, au format One Page, et entièrement animé en HTML5 a vu le jour pour épauler la commercialisation du produit.
Dès sa première présentation dans les salons, Toop Toop s’est fait découvrir par de grands groupes. En moins de 6 mois, le concept a été racheté pour intégrer la collection d’un grand nom de la chaussure pour enfant.

Des Animations HTML5 à tous les Étages

tooptoop-elementLe site Toop Toop, c’est un site One Page composé de 6 étages différents, tous animés.

L’on part de l’espace pour arriver aux entrailles de la terre, en passant par la mer et des prairies vertes.

Fortement coloré, Toop Toop est un site spécialement conçu pour les enfants, où l’on voit tomber la neige, on découvre Toop Toop faire des accrobaties sous l’eau,
ou encore le curseur de la souris qui déclenche des actions comme des bulles d’air.

L’ensemble des étages de ce site a été fait pour présenter différents éléments comme la carte des revendeurs, les produits de la marque, les dernières actualités ou encore la possibilité de s’inscrire à la newsletter.

Tous ces éléments sont pris dans des containers en HTML5, et sont entièrement paramétrables et modifiables par le back office du site WordPress mis en place
par l’agence Inside da WeB.

Les + de Toop Toop

One Page : Créer un site offrant une sensation d’immersion passe par la création d’une interface de type one page. Sur une seule page, on retrouve toutes les informations de la marque Toop Toop. Le réseau de revendeur, les dernières actualités, les vidéos, les produits commercialisés par la marque, ainsi qu’un formulaire de contact.
Chaque partie est un étage du site, inclu dans une scénographie entièrement animé en HTML5.

HTML5 et WordPress : Chaque partie est une scénographie en HTML 5, qui reste connectée au fonctionnement classique de WordPress.
L’administrateur passe par le back office pour ajouter des éléments qui vont venir se répercuter sur le front office.

Rapidité de chargement : Avec plus de 50 éléments animés, et de très nombreuses images de fond, la vitesse de chargement a été particulièrement travaillée.
Chargement progressif des étages sous la ligne de flottaison, utilisation de sprites pour les animations, chargement par CDN, tout a été mis en place pour que le chargement du site ne soit pas un obstacle à sa découverte.

Référencement : Maximiser le référencement du site est passé par la construction de pages connexes, dédiées à la mis en avant de certains mots clés, mais aussi par le travail d’une partie blog.
L’habillage de ces pages passent par des éléments graphiques statiques afin de maximiser le temps de chargement.
XML Sitemap, Meta Description, optimisation du titre de la page et des éléments de type H1, H2 et H3 sont aussi présent sur le site.

Newsletter : Posséder une liste de diffusion la plus large possible s’inscrit dans la stratégie de développement de la marque.
Pour ce faire, Inside da WeB a travaillé avec les API MailChimp, permettant ainsi l’insertion d’un champ d’inscription connecté avec la base MailChimp, et le travail de la base par l’administrateur du site.

Portfolio Details

CLIENT : Toop Toop

TAGS : HTML5