Notre méthode ne se résume pas à une plaquette : voici les fondamentaux que nous appliquons sur chaque mission.
Pourquoi un thème Drupal sur mesure vs un thème acheté
Acheter un thème Drupal sur ThemeForest ou équivalent coûte 50-200 €. Tentant. Mais c'est l'investissement le plus coûteux à long terme. (1) Performance: la plupart des thèmes achetés chargent 100+ modules contrib, des libraries front lourdes (jQuery + 20 plugins), des images non optimisées. Lighthouse mobile typiquement 35-55. Impact SEO + conversion mesurable. (2) Accessibilité: aucun thème acheté n'est conforme WCAG 2.1 AA par défaut, encore moins RGAA 4.1. Pour les sites publics LU, c'est un risque légal. (3) Maintenance: le créateur du thème abandonne souvent son produit après 12-24 mois. Vous vous retrouvez avec un thème non maintenu, incompatible avec les nouvelles versions Drupal. (4) Différenciation: votre concurrent peut acheter le même thème. Aucune identité visuelle distinctive. Un thème custom coûte 8-45 k€ initialement, mais il dure 5-8 ans, performe à Lighthouse > 95, conforme accessibilité, et porte votre identité de marque. ROI évident sur la durée de vie du site.
Notre méthode de développement thème
Phase 1 - Atelier UX & design (2-3 sem.): cadrage de votre identité visuelle (moodboard, références, ambiances), modélisation de l'arborescence et des parcours utilisateurs, maquettes Figma haute fidélité pour 5-10 templates clés (homepage, page intérieure, listing, fiche détail, formulaire, etc.), conception du design system (tokens couleur via CSS variables, typographie, espacements, composants), prototype cliquable validé sur mobile et desktop. Phase 2 - Développement Twig (4-8 sem.): choix base (Olivero personnalisé vs full custom), implémentation des templates Twig (page.html.twig, node.html.twig, region.html.twig, etc.), composants Twig réutilisables (cards, hero, CTA, formulaires), CSS via Tailwind ou Sass custom selon préférence équipe, JS minimal (préférence pour CSS-only quand possible), intégration des libraries (carousel, modal, etc.) en choisissant des solutions légères et accessibles. Phase 3 - Optimisation performance (1-2 sem.): critical CSS inline pour les templates above-the-fold, lazy-loading natif des images, conversion AVIF/WebP via image styles Drupal, aggregation CSS/JS via core ou Advagg, audit Lighthouse mobile et desktop, optimisations Core Web Vitals (LCP, INP, CLS). Phase 4 - Accessibilité (1 sem.): audit Lighthouse Accessibility sur 5 templates clés, audit manuel avec lecteurs d'écran (NVDA, JAWS) pour navigation, formulaires, contenus dynamiques, ajustements pour conformité WCAG 2.1 AA (ou RGAA 4.1 pour sites publics). Phase 5 - Documentation: bibliothèque de composants documentée (Storybook ou équivalent), README technique, brief équipe développeurs internes (2 h).
Notre design system Drupal type
Tokens CSS Variables: couleurs (primary, primary-foreground, secondary, accent, background, foreground, etc.) définies en CSS variables pour permettre theming dynamique et adaptation light/dark mode. Typography: font-family principale et secondaire, taille de base (16px), échelle modulaire (16/18/20/24/32/48/64), font-display: swap pour performance, fonts hébergées localement (pas de Google Fonts pour éviter render-blocking). Espacements: système 4px ou 8px (espacements 4/8/12/16/24/32/48/64/96/128), utilisé via CSS variables pour cohérence. Composants Twig: cards (article, produit, témoignage), heroes (hero standard, hero avec vidéo, hero avec formulaire), CTAs (primary, secondary, tertiary, dans-le-flux), formulaires (input, textarea, select, checkbox, radio avec états valid/invalid), navigation (header desktop, header mobile, footer, breadcrumb), media (image responsive, vidéo, carousel accessible). Chaque composant: structure Twig, classes CSS, comportement JS optionnel, documentation Storybook avec props et variantes. Évolutions futures de votre site: votre équipe ou nous pouvons composer de nouvelles pages en assemblant les composants existants, sans réinventer.