Laitier Modèles CSS

Modèles CSS pour des fiches produits homogènes

Une grande bouteille en verre, un pot de yaourt trapu et une photo d'un yaourt plat sous vide : des proportions totalement différentes et des noms allant de quatre à quarante caractères. Les règles qui garantissent l'homogénéité visuelle de l'ensemble se trouvent dans la feuille de style, et c'est cette couche que vous fournissent les modèles CSS pour produits laitiers.

Une feuille de style unique pour une gamme cohérente

Les règles partagées travaillent discrètement. Le remplissage des fiches, la taille des titres et les zones d'image restent identiques dans tout le catalogue. Ainsi, un visiteur comparant le kéfir au yaourt à boire compare des produits et non des mises en page.

Un ensemble de styles fiable standardise généralement les éléments qui ne doivent jamais varier :

• des zones d'image avec un format fixe, pour qu'une bouteille et un emballage de fromage soient alignés sur la même ligne ;

• une échelle d'espacement commune aux fiches et aux lignes de spécifications ;

• des tailles de police pour le nom du produit, l'étiquette de la catégorie et le poids de l'emballage ;

• des classes d'étiquettes pour les produits bio, sans lactose et saisonniers.

Variables, modificateurs et points de rupture en pratique

Les couleurs de la marque, le rayon des coins et l'espacement de base doivent être définis dans des variables une seule fois. Ainsi, une refonte de l'image de marque n'affecte qu'un seul élément au lieu de deux cents sélecteurs. Les modificateurs de catégorie gèrent ensuite les différences réelles : une fiche produit « fromage » peut utiliser un cadre d'image plus large, tandis qu'une fiche produit « lait » conserve une ligne d'étiquette compacte.

Il est important de limiter ces exceptions, car un pack promotionnel au nom particulièrement long ne doit jamais modifier les règles pour toute une gamme. Le code CSS personnalisé dans Nicepage peut être appliqué à un seul élément, une page ou l'ensemble du site, ce qui fait généralement la différence entre une correction simple et un véritable désastre.

Les points de rupture doivent correspondre aux valeurs choisies pour ce catalogue. Nicepage maintient des règles visuelles pour chaque affichage adaptatif, des grands écrans aux téléphones en mode portrait, et la documentation sur la mise en page adaptative explique comment ces affichages se comportent lorsque la largeur change.

États de survol et proportions des emballages

Dans un catalogue alimentaire, l'aspect visuel est plus important qu'il n'y paraît. Au survol, une fiche produit peut afficher une seconde image de l'emballage. Au clic, le contour du produit doit rester visible sur un fond clair. Un article indisponible doit voir son image et son prix masqués, tout en restant affiché sur la page. Un client qui ne trouve pas le kéfir de la semaine dernière pourrait en conclure que la marque a cessé sa production.

Chacun de ces états relève d'un choix visuel, tandis que les champs de la fiche font partie de sa structure. Un ensemble pertinent offre des sélecteurs prévisibles pour la première partie et laisse la seconde inchangée.