Client Modèles CSS

Modèles CSS avancés pour des témoignages clients cohérents

Une fois les avis et logos intégrés, vous contrôlez la couche de style. Un modèle CSS client définit les proportions des cartes, la taille des caractères et l'espacement entre une citation et sa source, ainsi que les règles de rupture associées. Il vous suffit ensuite de choisir l'apparence prédéfinie qui convient à vos témoignages, puis d'ajuster les quelques éléments qui ne correspondent pas à votre marque.

Diaporamas, grilles, cartes portrait, murs de logos

Les styles prédéfinis pour le client se présentent sous plusieurs formes reconnaissables :

1. Grilles d'avis : plusieurs témoignages sont affichés côte à côte avec la même importance ;

2. Diaporamas : l'espace est optimisé pour une meilleure visibilité à partir d'une vingtaine de citations ;

3. Cartes portrait : la photo et sa légende sont placées sous le texte ;

4. Murs de logos : les logotypes et les logos carrés, de tailles très variées, sont adaptés.

Les portraits représentent un choix crucial. Avec les photos, la taille du texte doit laisser suffisamment d'espace pour un nom et une fonction sous une image de taille fixe, et les citations restent nécessairement courtes. Sans elles, un avis peut être plus long, et l'attribution se limiter à une simple ligne en dessous. Les carrousels nécessitent des éléments graphiques spécifiques, car les commandes et les repères de position doivent présenter un contraste suffisant pour être cliquables.

Les longs témoignages s'affichent différemment sur les écrans étroits

La majeure partie du travail de mise en page pour un client se concentre sur les contenus imprévisibles :

1. Un avis de 300 mots sur la même ligne qu'un autre de 12 mots ;

2. Des guillemets qui encadrent une fiche sur un ordinateur portable et occupent la moitié de l'écran d'un téléphone ;

3. Un petit carré qui disparaît à côté d'un logo large dans une grille ;

4. Une attribution qui se décale de sa citation lorsque l'espacement vertical augmente.

Ces problèmes sont principalement dus à des hauteurs fixes. Laisser les cartes s'adapter à leur contenu, limiter la largeur et la hauteur des marques avec des propriétés maxwidth et maxheight plutôt qu'une largeur partagée, et réduire l'espace sous une citation par rapport à l'espace entre les cartes résoudra la plupart des problèmes. Nicepage prend en charge le CSS personnalisé lorsqu'une section récalcitrante persiste, et c'est là son utilité première : une exception au sein d'un ensemble de règles généralement respectées.

Choisir le style en fonction de la taille du contenu

Analysez votre contenu avant de vous soucier de l'esthétique. Vingt témoignages courts et des marques de clients nécessitent une grille et un mur, à la fois sobres et cohérents. Trois longs articles chiffrés nécessitent des panneaux larges pour mettre en valeur les résultats. Les équipes qui gèrent les deux types de contenu finissent généralement par utiliser deux styles similaires sur un même site, unifiés par une typographie et une couleur communes. Si la longueur de vos citations varie considérablement, testez cette variation avant toute autre chose, car la validation par le client ne renforce la confiance que si elle paraît réfléchie.