Talent Modèles CSS

Modèles CSS pour les grilles de profils et les listes d'artistes

L'espacement, les proportions des images et l'aspect visuel déterminent si une liste d'artistes se présente comme un ensemble cohérent ou comme une pile de profils disparates. Les modèles CSS pour artistes intègrent ces règles, vous laissant le choix des valeurs. Une grille à trois colonnes de fiches d'artistes semble convaincante dans une démo, jusqu'à ce qu'une fiche contienne une longue liste de crédits et la suivante seulement deux lignes.

Mise en forme des fiches au contenu hétérogène

Chaque profil d'artiste a un poids différent, et la mise en forme doit néanmoins permettre à la liste de se présenter comme un ensemble cohérent. Quatre règles permettent d'y parvenir :

• Une proportion d'image fixe pour la photo de profil. Les portraits studio verticaux et les photos plus larges occupent le même emplacement, et le recadrage reste uniforme sur toute la page.

• Une échelle typographique hiérarchisant la fiche. Le nom de l'artiste figure en haut, son rôle ou sa spécialité juste en dessous, et la ligne des crédits encore plus discrète.

• Un espacement adapté à la densité du texte. La largeur des cartes, l'espacement de la grille et le remplissage interne permettent de maintenir la cohérence d'une ligne lorsqu'un profil est long, et la limite de lignes imposée à la biographie empêche une carte trop détaillée d'empiéter sur les éléments adjacents.

• États de survol et de focus : une carte mise en avant doit généralement avoir une apparence différente de celle de la ligne dans laquelle elle se trouve.

Points de rupture et exceptions locales

Le nombre de colonnes est la partie la plus simple du développement adaptatif : quatre sur un grand écran, deux sur une tablette et une sur un téléphone. Ce qui est mis en avant en haut de la page est primordial : le portrait, le nom et les informations de contact doivent donc figurer au-dessus d'une longue liste de crédits, avec un ratio d'images plus court et des espacements réduits sur mobile.

Nicepage gère cela grâce à ses modes adaptatifs, des grands écrans aux téléphones en mode portrait, et grâce au code CSS personnalisé qui s'applique à un seul élément, une seule page ou l'ensemble du site. L'exportation du CSS minimal par page permet de limiter la feuille de style publiée aux règles réellement utilisées par la page.

Le CSS détermine l'apparence de la liste lors du défilement. Avant de valider le modèle, testez-le avec sa densité maximale, en utilisant la liste de crédits la plus longue que vous publiez et la zone de recadrage la plus large de votre bibliothèque. Si la grille reste lisible, elle le restera même avec un effectif plus important.