Communitygithub.com

Système de Pied de Page de Site

Concevoir et implémenter un pied de page de site structuré, évolutif et accessible qui gère la navigation globale, les informations secondaires et les exigences légales.

Qu'est-ce que Système de Pied de Page de Site ?

Cette compétence fournit une méthodologie complète pour concevoir et implémenter des pieds de page de sites web qui soient à la fois structurés, évolutifs et accessibles. Elle est particulièrement utile pour les développeurs et concepteurs d'UI/UX travaillant sur des sites multi-pages, des plateformes e-commerce ou des sites d'entreprise nécessitant une navigation secondaire robuste. La compétence détaille les entrées requises (architecture de l'information, exigences légales, identité de marque) et les sorties attendues (carte anatomique, hiérarchie de liens, plan responsive). Elle propose un flux de travail en cinq étapes, incluant la catégorisation du contenu, le choix d'un modèle structurel (pied fin, gras ou orienté action), l'application de hiérarchie visuelle, l'adaptation mobile (empilement, accordéon) et l'ajout de couches sémantiques et d'accessibilité. Des règles de décision concrètes (comme la règle de sitemap ou le placement du copyright) et des contraintes (accessibilité WCAG 2.2, responsivité, légalité) aident à éviter les échecs courants comme la surcharge de liens ou le manque de contraste. La compétence s'applique à tout framework ou langage, mais est facilement traduisible en composants React, Vue, ou HTML/CSS pur.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/coastdigitalgroup/coastai-skills/tree/HEAD/website-design/site-footer-system
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait Système de Pied de Page de Site ?

Objectif

Le Système de Pied de Page de Site fournit une méthodologie pour concevoir l'ancre de niveau inférieur d'un site web. Il sert de filet de sécurité pour les utilisateurs qui n'ont pas trouvé ce qu'ils cherchaient, d'annuaire pour les liens critiques pour le référencement (SEO) et de conteneur pour les informations légales, de marque et sociales obligatoires. Un pied de page bien conçu apporte une conclusion à l'expérience de la page sans créer de surcharge cognitive.

Cas d'Usage

  • Conception du pied de page global pour des sites multi-pages.
  • Organisation de sitemaps complexes en grappes de navigation gérables.
  • Standardisation du placement des liens utilitaires (CGU, Confidentialité, Copyright).
  • Intégration d'appels à l'action globaux (Newsletters, Contact) en fin de page.
  • Établissement d'une stratégie responsive pour les listes de liens multi-colonnes.

Quand ne PAS Utiliser

  • Mini-sites à Page Unique : Où une simple ligne "Copyright" suffit.
  • Applications Web Progressives (PWA) avec Barres d'Onglets Inférieures : Où une navigation persistante de type application remplace le besoin d'un pied de page traditionnel.
  • Pages d'Atterrissage Uniquement Axées sur la Conversion : Où un pied de page pourrait fournir des "fuites" ou des distractions qui éloignent l'utilisateur de l'appel à l'action principal (bien qu'un pied de page minimal avec des liens légaux soit généralement toujours requis).

Entrées

  1. Architecture de l'Information (IA) : Tous les liens non inclus dans l'en-tête principal.
  2. Exigences Légales & de Conformité : Politique de confidentialité, Conditions d'Utilisation, etc.
  3. Identité de Marque : Logo, profils de réseaux sociaux et énoncé de mission de l'entreprise.
  4. Actions Globales : Objectifs de conversion secondaires comme l'inscription à une newsletter.
  5. Points de Rupture d'Appareil : Définitions du système de grille pour l'empilement responsive des colonnes.

Sorties

  1. Carte Anatomique du Pied de Page : Définition visuelle ou structurelle des zones (Identité, Liens, Utilitaire, Appel à l'Action).
  2. Hiérarchie des Liens : Grappes catégorisées de navigation secondaire.
  3. Plan Responsive : Règles pour l'empilement ou la réduction des colonnes sur mobile.
  4. Repères d'Accessibilité : Balises sémantiques (<footer>, <nav>) et étiquettes.

Flux de Travail

1. Catégoriser le Contenu du Pied de Page

Divisez votre contenu en zones logiques :

  • Zone d'Identité : Logo, description et icônes sociales.
  • Zone de Navigation : Grappes de liens regroupées par thème (Produits, Entreprise, Ressources).
  • Zone d'Action : Inscription à la newsletter ou coordonnées principales.
  • Zone Utilitaire : Copyright, liens légaux et sélecteur de langue.

2. Sélectionner un Modèle Structurel

Choisissez un modèle en fonction de la complexité du site :

  • Le Pied Fin : Une seule ligne pour les sites minimalistes.
  • Le Pied Gras (Sitemap) : Disposition multi-colonnes pour les sites d'entreprise/e-commerce.
  • Le Pied Orienté Action : Se concentre sur un grand appel à l'action avant les listes de liens.

3. Établir une Hiérarchie Visuelle

Appliquez système-de-hiérarchie-visuelle au pied de page :

  • Utilisez des en-têtes en gras pour les grappes de liens.
  • Assurez-vous que la taille du texte est lisible mais légèrement plus petite que le texte du corps (par exemple, 14px).
  • Créez un contraste élevé entre l'arrière-plan du pied de page et les couleurs des liens.

4. Définir l'Adaptation Mobile

Cartographiez la transition du Bureau au Mobile :

  • Empilement : Les dispositions multi-colonnes doivent s'empiler en une seule colonne.
  • Motif Accordéon : Pour les pieds de page très "gras", envisagez de réduire les groupes de liens en accordéons sur mobile pour réduire la longueur de la page.
  • Cibles Tactiles : Assurez-vous que tous les liens sont faciles à taper. Respectez WCAG 2.2 SC 2.5.8 (Taille Minimale des Cibles) — les cibles interactives font au moins 24x24px, avec un espacement adéquat entre les liens adjacents ; préférez 44px+ pour les cibles tactiles principales.

5. Ajouter des Couches Sémantiques & d'Accessibilité

  • Encadrez la section avec une balise <footer>.
  • Utilisez des éléments <nav> pour les grappes de liens avec des aria-labels uniques (par exemple, "Ressources du Pied de Page").
  • Assurez-vous que le rapport de contraste respecte WCAG AA (4,5:1).

Règles de Décision

  • La Règle du Sitemap : Si le site a plus de 15 pages, utilisez un "Pied Gras" multi-colonnes pour faciliter la découverte.
  • Liens Externes : Les réseaux sociaux et les ressources externes doivent s'ouvrir dans de nouveaux onglets (target="_blank") pour garder les utilisateurs sur votre site.
  • Placement du Copyright : Placez toujours le copyright et les liens légaux tout en bas (le "Sous-pied de page").
  • Priorité à l'Appel à l'Action : Si le pied de page comprend une inscription à la newsletter, cela doit être l'élément visuellement le plus distinct du pied de page.

Contraintes

  • Accessibilité : Doit être accessible via l'ordre de tabulation du clavier. Tous les liens doivent avoir des états de focus visibles qui ne sont jamais obscurcis par des en-têtes collantes ou des bannières de cookies (WCAG 2.2 SC 2.4.11 Focus Non Obscurci).
  • Responsivité : Les colonnes ne doivent pas déborder ni devenir trop étroites (largeur minimale).
  • Légalité : Doit inclure les liens obligatoires requis par les réglementations locales (RGPD, CCPA, etc.).

Schémas d'Échec Courants

  • Surcharge de Liens : Inclure chaque page du site, créant un mur de texte que les utilisateurs ignorent.
  • Mauvais Contraste : Utiliser du texte gris clair sur des fonds sombres qui échoue aux normes d'accessibilité.
  • L'"Impassse" : Un pied de page trop petit ou manquant, laissant les utilisateurs qui défilent jusqu'en bas sans issue.
  • Regroupement Non Standard : Mélanger des liens non liés (par exemple, "Carrières" sous "Produits").

Critères de Validation

  • Le pied de page utilise des balises sémantiques <footer> et <nav>.
  • Les grappes de liens ont des en-têtes clairs et descriptifs.
  • La vue mobile empile correctement les colonnes et maintient les cibles tactiles.
  • Le rapport de contraste pour tout le texte du pied de page respecte WCAG AA (4,5:1).
  • Les liens légaux et le copyright sont présents et correctement placés.
  • Les liens sociaux utilisent des icônes reconnaissables avec des étiquettes de texte accessibles.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for progressive disclosure using accordions, ensuring structural integrity, visual affordances, and accessibility across different content densities and devices.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for long-form content, managing readability, vertical rhythm, and information density to ensure a superior reading experience.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for informational elements that communicate state (Badges) and categorization (Tags) with clarity and accessibility.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for non-overlay notifications, managing global announcements and contextual inline alerts to communicate system states without interrupting the user's flow.

coastdigitalgroup/coastai-skills

Design and implement a systematic, asymmetrical bento-grid layout framework to organize diverse content types cohesively while maintaining strict visual hierarchy, logical focus order, and responsive flexibility.

coastdigitalgroup/coastai-skills

Design a responsive, mobile-first bottom navigation bar and persistent action dock system for mobile websites and web applications, establishing spatial anchors, tab bar anatomy, badge indicators, thumb-zone ergonomics, safe area inset handling, active/inactive state contrast, and desktop responsive adaptation rules.

coastdigitalgroup/coastai-skills

Design a mobile-first bottom sheet overlay system with configurable detents, drag affordances, safe area padding, responsive desktop modal/popover adaptation, and WCAG AA accessibility compliance.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for secondary navigation trails that provide orientation, context, and one-click access to parent levels in deep information architectures.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for buttons and interactive triggers, managing visual hierarchy, variant logic, and action grouping to ensure clear intent and accessible interaction.

coastdigitalgroup/coastai-skills

Design a systematic framework for date and time selection, managing calendar grids, range pickers, and scheduling interfaces to ensure precision and accessibility.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for modular content containers that maintain hierarchy, structural integrity, and action alignment across variable content and responsive viewports.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for horizontal discovery components, managing navigation affordances, scroll behavior, and accessibility to ensure effective content density without compromising usability.

coastdigitalgroup/coastai-skills

Design a systematic, highly accessible, and developer-friendly UI layout framework for code blocks, snippet showcases, multi-file code tabs, line-highlighting, diff views, and syntax token contrast in technical documentation and developer platforms.

coastdigitalgroup/coastai-skills

Design a systematic framework for global command menus (Cmd+K panels) that combines keyboard-driven navigation, command execution, and shortcut discovery into an accessible, responsive overlay.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for threaded conversations, managing nesting depths, action hierarchies, and community signaling to foster engagement and readability.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for side-by-side comparison interfaces, managing high attribute density and responsive complexity to support informed decision-making.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for user privacy, managing consent banners, preference centers, and persistent privacy controls to balance legal compliance with user trust.

coastdigitalgroup/coastai-skills

Design and implement a systematic, highly accessible, and responsive visual layout framework for conversational chat widgets, live chat boxes, and chatbot panels that ensures clear message scannability, native focus flow, and seamless mobile keyboard adaptation.

coastdigitalgroup/coastai-skills

Design a systematic, accessible, and high-conversion framework for custom select dropdowns and comboboxes, defining anatomy, states, search-filtering, and responsive mobile-adaptive patterns.

coastdigitalgroup/coastai-skills

Design and implement a systematic color palette that ensures WCAG 2.2 accessibility compliance. Trigger this skill when asked to define brand colors, create UI themes, or establish a visual system for a website.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community