LE CSS DU FUTUR : COMMENT LE CSS3 PEUT OPTIMISER LA CONCEPTION

LE CSS DU FUTUR : COMMENT LE CSS3 PEUT OPTIMISER LA CONCEPTION

La blogosphère du design s’est fait entendre sur les améliorations que le niveau 3 des feuilles de style en cascade apportera. Bien qu’on soit encore loin du statut de recommandation officielle du W3C, certains navigateurs prennent déjà en charge des fonctionnalités en attente. J’aimerais mettre en avant quelques-unes des fonctionnalités CSS3 dont je me réjouis et qui non seulement ajouteront de la flexibilité au processus de conception, mais qui aideront également à l’optimisation de la recherche et de la conversion.

Remplacer les images par du code

La CSS3 permettra au navigateur de rendre des éléments de conception communs tels que les coins arrondis, les ombres, les dégradés et la transparence. Cela réduira le nombre de fichiers supplémentaires à charger et facilitera la maintenance du site en conservant davantage d’informations sur la conception au même endroit. Moins de fichiers permettra d’accélérer le site, ce qui améliorera l’expérience de l’utilisateur et, par conséquent, les taux de conversion. La réduction des temps de chargement facilitera également le classement des sites dans les moteurs de recherche, car la vitesse devient un facteur plus important pour ces derniers. Moins d’images signifie également que plus de contenu peut être conservé en html, ce qui le rend plus accessible aux moteurs de recherche.

Voir l’exemple ci-dessous pour un nouveau code qui peut remplacer ce qui est actuellement fait avec les images.

Plus d’exemples et d’articles connexes :

Le logo de l’Opéra créé en CSS3
5 améliorations de la conception CSS3 que vous pouvez utiliser dès aujourd’hui
Utilisations pratiques du CSS3
Une boîte à outils pour tester les nouvelles fonctionnalités
Google et la vitesse du site
Réduire le code

Les CSS3 peuvent prendre les mêmes conceptions que celles qui sont actuellement réalisées avec les méthodes extensives ou détournées des CSS2 et les créer avec moins de lignes et un code plus efficace. Cela vous permettra de réduire la taille de vos fichiers pour une meilleure vitesse d’exécution du site et de réduire votre rapport code / contenu pour faciliter l’exploration de votre site par les moteurs de recherche. Par exemple, la propriété « background-image » sera améliorée pour vous permettre d’ajouter plusieurs images au même élément. Vous pouvez également utiliser des éléments de modèle pour afficher le contenu sous forme de tableau sans avoir besoin de balises de tableau html ou d’astuces de fausses colonnes CSS2. En outre, les nouveaux sélecteurs tirent parti des modèles de conception pour réduire le code.

Découvrez certaines de ces fonctionnalités plus en détail :

Html 5 et CSS3 : les techniques que vous utiliserez bientôt
Explication des sélecteurs CSS3
Utiliser des styles dynamiques

CSS3 ajoutera des styles dynamiques qui permettront des effets animés, créant ainsi une alternative à Flash et JavaScript. Comme l’a récemment souligné David Scoville, l’utilisation de Flash n’est pas toujours la technique la plus adaptée au référencement, et le fait de pouvoir en faire plus avec le CSS réduira les conflits entre la conception et le référencement. Le CSS3 ajoutera des transitions qui peuvent prendre une propriété CSS (comme la couleur ou la taille) et permettra d’ajouter une temporisation afin que les changements qui se produisent sur une page puissent s’effectuer de manière plus progressive et moins abrupte. Ces transitions peuvent être utilisées en conjonction avec des fonctions de transformation (comme la fonction de rotation que j’ai utilisée dans l’exemple ci-dessus) pour créer des effets d’animation avancés.

Exemples et informations

Lisez à propos de CSS Transitions.
Si vous avez un navigateur webkit (Safari ou Chrome), n’oubliez pas de regarder ces démonstrations d’animations CSS3.