Votre site internet est la vitrine de votre entreprise, votre identité visuelle, votre carte de visite sur le web ainsi qu’un support de communication performant pour animer vos opérations commerciales ! La mise à jour de son site internet est primordiale ! Mettre à jour son site web, c’est augmenter le nombre d’informations, le nombre de pages et le contenu de son site internet. La maintenance et l’actualisation régulières du site web sont des facteurs importants pour l’optimisation du référencement d’un site.
Cet article ne rentrera pas dans les détails technique de l’animation web, nous traiterons les solutions possibles dans l’ensembles et pourquoi s’en servir.
L'évolution du web
À l’heure de la vidéo, des gifs et des animations, le webdesign dégaine aussi ses armes : les effets dynamiques ! Bien utilisés, ces derniers simplifient la navigation et guident le parcours d’achat de vos visiteurs.
Un événement a particulièrement modifié notre façon de construire les animations webs : La disparition de Flash.
Auparavant Flash pouvait gérer la 3D mais depuis l’avènement d’HTML5, Flash est devenu complètement obsolète.
D’ailleurs, Flash étant destiné à disparaître, les standards web se sont adaptés. Ainsi sont apparues les balises HTML <audio>, <video> et <canvas>. Cette dernière est d’ailleurs celle qui nous intéresse ici.
<canvas> est un espace qui permet de générer des pixels via JavaScript. On peut alors envisager de créer des animations au sein de cette zone d’image comme par exemple, créer des formes, les modifier, les animer, travailler avec un flux vidéo, etc. Comme pour les solutions précédemment citées, EaselJS est une librairie qui permet d’interagir avec la balise canvas et de lui donner vie.
On a ici un aperçu des technologies les plus utilisées pour gérer les animations sur le web.
Cependant, même si ce tour d’horizon donne envie de se lancer dans un projet similaire, il faut rester conscient des enjeux et impacts que la mise en place de telles animations aura sur notre site internet.
Source : https://blog.concept-image.fr/
Liez l'agréable à l'utile
Ne vous arrêtez pas simplement à l’aspect visuel de votre animation, elle doit véhiculer les informations utiles à propos de votre activité. Pour rappel, une animation même très bien réalisée, est inutile si elle ne sert pas le propos du site.
C’est ici que le gros du travail repose : Comment agencer mes éléments pour afficher mes informations, les placer de façon créatives et impactantes tout en prévoyant une adaptation sur les différentes tailles d’écrans.
Quels sont les méthodes d'intégration ?
Aujourd’hui avec les évolutions du web différentes solutions s’offrent à vous pour animer vos idées.
Vous pouvez créer vos animations CSS sur vos propres éditeurs de code
L’intégration d’un fichier GIF est envisageable mais n’est pas recommandée pour des raisons de performances et de qualité.
Pour remplacer le format GIF, il existe aujourd’hui de nombreuses techniques d’animation web : JavaScript, SVG, Canvas, WebGL …
Les contraintes techniques
Plusieurs points sont à prévoir avant d’organiser la réalisation de vos animations tels que :
• L’optimisation des de la taille des fichiers : Chaque donnée sera téléchargé par les utilisateurs qui visiteront votre site, ces données peuvent grandement ralentir votre site et directement engendrer une chute de visites. Réduire la taille des fichiers, charger uniquement les fichiers nécessaires, optimiser son code et ses images, mettre en place un cache …
• Ergonomie des tailles d’écrans : Il y a très peu de chances que votre animation s’adapte automatiquement par simple ratio sur les appareils mobiles (Qui constituent aujourd’hui une majorité des visites des sites webs), il faut donc prévoir une version complètement repensée dans certains cas pour ces supports et proposer les interaction adaptées au support qu’utilise actuellement votre utilisateur (défilement, tactile, swipe (glisser), survol …).
• Accessibilité : Votre animation doit donner une sensation de « Confort » aux utilisateurs, suivant votre secteur d’activité il faudra adapter l’animation de vos éléments pour éviter des déplacements trop rapides, des clignotements répétitifs … N’oubliez pas d’offrir un contrôle complet de lecture / pause des médias et une gestion du son pour éviter les désagrément. (Bien que les navigateurs simplifient nativement le contrôle des médias lus sur les sites web visités)
• Développement et maintenance : Bien évidemment tous ces éléments rallongent le temps de développement de votre site web et engendrent un coût. Votre animation doit être organisée également pour maintenir son fonctionnement sur la durée avec l’évolution de votre site et des technologies. Il ne faut pas oublier non plus qu’il y aura peut-être à l’avenir des modifications dans le contenu de vos animations, organisez correctement vos fichiers pour ne pas trop rendre compliqué ces potentielles modifications futures.