Experience NCTA 10G

NCTA, est le principal groupe professionnel de l’industrie américaine du câble. Elle représente les grands fournisseurs d’accès Internet par câble, les chaînes de télévision et les fournisseurs; elle milite en matière de politique publique et fait la promotion des feuilles de route technologiques de l’industrie et ses initiatives lors d’événements internationaux. Le leadership, l’accessibilité et la technologie de communication de pointe sont des attributs de marque forts pour NCTA, et chaque projet que nous avons réalisé avec ce client devait refléter fidèlement ces idées.

Un exemple particulièrement pertinent est la plateforme 10G, qui sert de vitrine pour l’Internet 10G : la plateforme de nouvelle génération de l’industrie du câble qui offre des vitesses de 10 gigabits avec une latence ultra faible, une fiabilité élevée et une sécurité maximale.

Notre solution

Le microsite 10G a été développé avec React/TypeScript afin de rester léger et réactif, mais il intègre également une architecture « headless » ainsi que des applications multimédias et des animations riches.

L’un des défis lors de la création d’animations visuellement riches sur le Web est de traduire correctement la vision de l’animateur vers un format optimisé et prêt pour le Web, tout en maintenant une bonne compatibilité avec l’UI/UX native. Les animations et les contenus multimédias riches peuvent parfois être considérés comme des ajouts de dernière minute lors de la conception et du développement : s’ils ne sont pas bien spécifiés, les développeurs ont tendance à utiliser des bibliothèques d’animation génériques ; les animations sont alors insérées maladroitement sous forme de blocs de type « iframe » dans la page Web. Dans les deux cas, ces approches ont tendance à être insatisfaisantes pour le client et à nuire aux performances du navigateur.

Pour résoudre ce problème sur 10G, nous avons travaillé en étroite collaboration avec les animateurs et leurs outils natifs, tels qu’Adobe After Effects et Blender. Ces deux plateformes prennent désormais en charge un processus d’exportation efficace pour créer des fichiers au format Lottie. Les fichiers Lottie contiennent toute la richesse visuelle des plateformes d’animation natives, mais ils sont vectorisés dans un format qui est facilement contrôlable par les outils Web natifs. Combiné à la puissante librairie GSAP, nous avons pu créer rapidement et fidèlement des animations complexes et interactives, les soumettre au cycle d’approbation et de rétroaction du client, puis les transposer dans le navigateur avec une haute fidélité. Et tout cela, en maintenant d’excellentes performances dans le navigateur.

Mini-applications créatives

Le site est structuré comme un ensemble de mini-applications modulaires, chacune mettant en évidence différents aspects de la plateforme. Nous avons déjà mentionné notre approche générale de l’intégration d’animations personnalisées, mais un exemple particulièrement intéressant est celui où nous avons été appelés à mettre en œuvre une visite virtuelle interactive d’une maison en 3D pour démontrer les applications pratiques de la technologie 10G dans un contexte domestique.

Nous avons travaillé avec un spécialiste en modélisation 3D qui a conçu des schémas dans Blender. Ensuite, les concepteurs ont appliqué l’image de marque et l’apparence visuelle du client pour habiller le modèle 3D. Enfin, le modèle a été exporté puis réimporté sous forme d’un ensemble vectoriel, prêt à être intégré au microsite.

Les commandes et l’interaction utilisateur se déplacent avec fluidité entre le modèle intégré et les composants Web externes; le suivi est appliqué à chaque zone avec laquelle l’utilisateur interagit, et surtout, le modèle peut être facilement mis à jour avec des pièces et des fonctionnalités supplémentaires.

SEO et administration client

Pour que notre application « single page »  JavaScript (SPA) soit conviviale pour le SEO, nous avons mis en œuvre un rendu côté serveur (SSR) via une solution personnalisée basée sur PhantomJS afin d’améliorer la performance de chargement.

Parallèlement, un CMS WordPress a été mis en place pour gérer les parties du site éditables par le client, exposant le contenu via des API REST pour une gestion et une administration du contenu simples.