Politique Modèles CSS

Modèles CSS pour la politique créative

Les modèles CSS pour la politique sont pré-stylisés : fiches thématiques harmonieuses, citations de soutien uniformes et boutons de soutien cohérents. Il vous suffit d’adapter ce système visuel à votre campagne. Les modèles les plus pertinents sont ceux qui nécessitent le moins de modifications.

Éléments de style récurrents

Les supports de campagne utilisent des formes similaires, avec des textes différents. Vous prenez donc la plupart des décisions visuelles une seule fois, et elles s’appliquent à tous les éléments selon le même modèle. Trois éléments définissent l’identité visuelle :

1. La couleur : uniforme pour l’en-tête, les fiches thématiques et le bouton de soutien, avec un état spécifique pour les annonces urgentes.

2. La typographie : différenciée selon le rôle, le slogan de campagne, le nom du candidat et les titres des thèmes ont chacun une importance différente.

3. La hiérarchie des boutons : le lien principal et un lien secondaire ne doivent jamais être mis en avant de la même manière, même au survol et au focus.

C’est dans les fiches thématiques que le système révèle tout son potentiel. Une fiche thématique avec un titre de deux mots et une autre avec une phrase complète doivent rester alignées, ce qui dépend de l'espacement, du traitement des titres et de la hauteur de la fiche. Les citations de soutien sont plus complexes car un soutien écrit une phrase et le suivant un paragraphe.

Adaptation des grilles thématiques aux mobiles

Une rangée de six fiches thématiques s'affiche correctement sur un ordinateur, mais est impossible à afficher sur un téléphone. L'élément Grille place les éléments associés dans des cellules et adapte cette disposition aux écrans plus étroits, de sorte que les mêmes éléments apparaissent comme une seule colonne. Trois détails posent le plus souvent problème :

1. Les longs noms de lois qui débordent sur une troisième ligne et déforment le reste de la fiche.

2. Le portrait d'un candidat qui conserve ses proportions d'ordinateur tandis que sa biographie devient un simple ruban.

3. Les listes d'événements où la date, le lieu et le lien d'inscription ne sont plus alignés lorsqu'ils sont superposés.

Les noms des candidats constituent l'autre point critique. Un nom complet avec un titre universitaire et une longue fonction tient rarement dans l'espace laissé par le texte. Le titre s'affiche soit correctement, soit de manière tronquée.

Exceptions à gérer manuellement

Certains éléments nécessitent une règle spécifique. Une annonce de campagne importante ou une notification urgente concernant un rassemblement déplacé peuvent exiger une couleur différente de celle utilisée par le reste du site. Nicepage prend en charge le CSS personnalisé pour cela, et la documentation CSS personnalisée décrit les règles applicables à un élément, à une section ou à l'ensemble du site.

Gardez ces exceptions pour longtemps. Un système visuel que vous modifiez constamment était un mauvais choix dès le départ. Le meilleur indicateur de sa qualité est son comportement face à des supports de campagne réels : noms de candidats longs, citations irrégulières et liste d'événements qui ne cesse de s'allonger.