Guide Complet du Développeur Web Junior

WordPress, UI/UX, et SEO 2024 les Fondamentaux

Architecture de Thème et Layout de Base

Choix du Thème

Kadence et Astra Pro sont deux thèmes WordPress recommandés pour leur flexibilité et performance. Voici comment structurer le site avec chacun :

• Kadence Pro : Structure recommandée pour une mise en page standard d’un site WordPress.

/* Structure recommandée */
- Header
  └─ Logo (max-width: 200px)
  └─ Menu Principal (justify-content: space-between)
  └─ Call-to-Action
- Hero Section
  └─ Titre H1 (font-size: 2.5em)
  └─ Sous-titre (font-size: 1.5em)
  └─ CTA Principal
- Contenu Principal
  └─ Sections (max-width: 1290px)
  └─ Articles (width: 800px)
- Footer
  └─ Widgets (grid-template-columns: repeat(4, 1fr))

• Astra Pro : Une alternative avec des options de largeur et de typographie prêtes à l’emploi.

• Astra Pro : Une alternative avec des options de largeur et de typographie prêtes à l’emploi.

/* Configuration optimale */
- Container Width: 1200px
- Blog Single Width: 800px
- Sidebar Width: 300px
- Typography:
  └─ Body: 16px
  └─ H1: 2.5em
  └─ H2: 2em
  └─ H3: 1.75em

Code d’Optimisation Spécifiques CSS

Pour garantir une bonne lisibilité et réactivité sur différents appareils, voici quelques ajustements CSS recommandés.

• Kadence

/* Personnalisations recommandées */
.site-container {
    --global-content-width: 1290px;
    --content-vertical-spacing: 60px;
}

.entry-content {
    --global-palette-base: #333333;
    --global-palette-base-rgb: 51, 51, 51;
}

/* Optimisation mobile */
@media (max-width: 768px) {
    .site-container {
        --content-vertical-spacing: 40px;
    }
}

• Astra

/* Configurations essentielles */
.ast-container {
    max-width: var(--ast-container-default-width);
    padding-left: 20px;
    padding-right: 20px;
}

.ast-single-post .entry-content {
    max-width: 800px;
    margin: 0 auto;
}

Note : Ces configurations assurent une expérience utilisateur agréable sur toutes les tailles d’écran.

Configuration et Outils Essentiels {#configuration}

Plugins Essentiels

WP Rocket (Cache et Optimisation des Performances)

• Fonctions clés : cache préchargé, minification CSS/JS, LazyLoad des images.
• Configuration :

// Activer le cache et la compression
define('WP_CACHE', true);
define('COMPRESS_CSS', true);
define('COMPRESS_SCRIPTS', true);
define('ENFORCE_GZIP', true);

Yoast SEO | Rank Math (SEO)

• Configuration de base :

// Longueurs recommandées
Titre : 55-65 caractères
Meta description : 145-155 caractères
URL : maximum 75 caractères

EWWW Image Optimizer (Optimisation des Images)

• Fonctions clés : compression automatique, conversion en WebP, redimensionnement.
• Dimensions d’images optimales :

// Ajouter dans functions.php
add_image_size('hero-banner', 1920, 600, true);
add_image_size('blog-featured', 800, 450, true);
add_image_size('product-thumb', 400, 400, true);

Design System et Typographie {#design}

Grille et Mise en Page

Grille de Base

Utilisez une grille pour garantir un design aligné et bien espacé :

/* Configuration globale */
:root {
    --container-width: 1290px;
    --content-width: 800px;
    --gutter: 20px;

    /* Espacements */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
}

/* Layout principal */
.site-content {
    width: min(var(--container-width), 95%);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

Typographie

1. Hiérarchie Typographique (Desktop → Mobile)
   • H1 : 2.5em → 1.75em
   • H2 : 2em → 1.5em
   • Corps : 1em (16px)
2. Variables CSS Typographiques :

/* Système typographique */
:root {
    --font-primary: 'Open Sans', sans-serif;
    --font-heading: 'Playfair Display', serif;

    /* Échelle typographique */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
}

Responsive Design {#responsive}

Points de Rupture et Mixins SCSS

Utilisez des points de rupture standards et des mixins pour adapter le design aux différents écrans.

• Breakpoints standards :

// Breakpoints standards
$breakpoints: (
    'mobile': 360px,
    'tablet': 768px,
    'desktop': 1024px,
    'large': 1290px
);

• Mixin responsive :

// Mixins utiles
@mixin responsive($breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
        @content;
    }
}

Exemple d’utilisation des mixins pour les en-têtes

.site-header {
    padding: 1rem;
    
    @include responsive('tablet') {
        padding: 1.5rem;
    }
    
    @include responsive('desktop') {
        padding: 2rem;
    }
}

Optimisation des Performances {#performance}

WP Rocket : Configuration Recommandée

Pour un site rapide, activez et configurez WP Rocket pour optimiser le cache et la compression des ressources.

// Activer le cache et la compression Configurations recommandées
define('WP_CACHE', true);
define('COMPRESS_CSS', true);
define('COMPRESS_SCRIPTS', true);
define('ENFORCE_GZIP', true);

Lazy Loading pour Images et Vidéos

Images :

<!-- Images -->
<img
    src="placeholder.jpg"
    data-src="real-image.jpg"
    loading="lazy"
    class="lazy"
    width="800"
    height="600"
>

Vidéos :

<!-- Vidéos -->
<video
    data-src="video.mp4"
    class="lazy"
    playsinline
    controls
>
</video>

Objectifs des Core Web Vitals

Pour optimiser l’expérience utilisateur et améliorer le SEO :

• LCP (Largest Contentful Paint) : < 2,5s
• FID (First Input Delay) : < 100ms
• CLS (Cumulative Layout Shift) : < 0,1

SEO et Marketing {#seo}

Structure des URLs et Balises Meta Essentielles

Une bonne structure d’URL et des balises méta bien optimisées permettent une indexation correcte et un bon référencement.

Structure des URLs recommandée des URLs :

// Exemple de structure d'URL
Site principal : example.com/
Blog : example.com/blog/
Articles : example.com/blog/titre-article/
Pages : example.com/nom-page/
Catégories : example.com/categorie/nom-categorie/

Balises Meta Essentielles

<head>
    <title>Titre de la Page (55-65 caractères) | Nom du Site</title>
    <meta name="description" content="Description unique et pertinente de 155 caractères maximum.">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://example.com/page-url/">
</head>

Bonnes Pratiques SEO

1. Titres et Meta Descriptions : Limitez le titre à 55-65 caractères et la description à 145-155 caractères pour l’optimisation.
2. Images : Utilisez des noms de fichiers descriptifs et des balises alt pour chaque image.
3. Structure de Navigation : Organisez les pages logiquement et générez un sitemap XML pour les moteurs de recherche.
4. Liens Internes : Ajoutez des liens vers d’autres pages du site pour renforcer le SEO interne.

Workflow Recommandé et Ressources {#workflow}

Workflow avec Affinity

Exportation d’Images

• Pour le Web:
  • Format: WebP (avec fallback JPG)
  • Résolution: 72 DPI
  • Compression: 80-85%
  • Palette de couleurs: RGB

Dimensions Recommandées

/* Guide des tailles */
.hero-banner {
    width: 1920px;
    height: 600px;
}

.featured-image {
    width: 800px;
    height: 450px;
}

.product-image {
    width: 600px;
    height: 600px;
}

.thumbnail {
    width: 300px;
    height: 300px;
}

Ressources et Outils {#ressources}

Environnement de Développement

1. Local by Flywheel : Développez localement avec cet outil pour un workflow rapide.
2. Thème Enfant : Créez un thème enfant pour conserver vos personnalisations après les mises à jour du thème principal.
3. Sauvegardes : Utilisez des outils comme UpdraftPlus pour effectuer des sauvegardes régulières.
4. Chrome DevTools pour debugging
5. GTmetrix pour performance
6. Screenfly pour tests responsive

Outils pour le Développement et le Design

1. Extensions VS Code :
   • PHP Intelephense : Auto-complétion et analyse pour PHP.
   • WordPress Snippets : Insertion rapide de codes WordPress.
   • CSS Peek : Permet de naviguer facilement dans le code CSS.
2. Affinity Designer/Photo :
   • Exportation optimisée en WebP et JPG.
   • Artboards pour adapter les designs aux différents écrans.

Extensions WordPress Recommandées

// Sécurité
- Wordfence
- Sucuri

// Performance
- WP Rocket
- EWWW Image Optimizer

// SEO
- Yoast SEO
- Rank Math

// Développement
- Query Monitor
- WP Debug Bar

Largeurs de Pages et Guide des Unités CSS

Largeurs Recommandées par Type de Page

Page d’Accueil

• Container principal: 1140px – 1290px
• Hero section: 100% viewport (full-width)
• Sections de contenu: 1140px
• Grille de produits/services: 1140px
  • Cards: 350px – 380px

Pages Articles/Blog

• Container principal: 1140px
• Zone de lecture: 680px – 800px (optimal pour la lecture)
• Sidebar: 300px – 320px
• Images in-content:
  • Grande: 800px max
  • Moyenne: 600px
  • Vignette: 300px

Pages Produits/Services

• Container principal: 1140px
• Zone produit: 1000px
• Images produit: 600px
• Description: 500px
• Caractéristiques: 800px

Formulaires

• Container: 600px – 800px
• Inputs: 100% du container
• Boutons: auto ou 200px – 300px

Guide des Unités CSS

Quand Utiliser Chaque Unité

PX (Pixels)

/* Utiliser pour : */
.element {
  /* Bordures */
  border-width: 1px;

  /* Images et icônes */
  width: 24px;
  height: 24px;

  /* Box-shadow */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  /* Tailles fixes qui ne doivent jamais changer */
  min-height: 40px;
}

REM (Root EM)

/* Utiliser pour : */
:root {
  font-size: 16px; /* Base pour les REM */
}

.element {
  /* Typographie */
  font-size: 1rem;  /* = 16px */
  line-height: 1.5rem;

  /* Marges et padding généraux */
  margin-bottom: 2rem;  /* = 32px */
  padding: 1rem;  /* = 16px */

  /* Largeurs de conteneurs */
  max-width: 70rem;  /* = 1120px */
}

EM (Based on Parent)

/* Utiliser pour : */
.parent {
  font-size: 16px;
}

.child {
  /* Espacements relatifs au texte parent */
  margin: 0.5em;  /* = 8px si parent est 16px */
  padding: 1em;   /* = 16px si parent est 16px */

  /* Tailles de police pour éléments imbriqués */
  font-size: 0.875em;  /* = 14px si parent est 16px */
}

VW/VH (Viewport Width/Height)

/* Utiliser pour : */
.hero {
  /* Sections pleine hauteur */
  height: 100vh;

  /* Largeurs dynamiques */
  width: 100vw;

  /* Tailles minimales/maximales */
  min-height: 50vh;
  max-width: 90vw;
}

/* Typographie responsive */
.responsive-title {
  font-size: calc(16px + 2vw);
  /* Grandit avec la largeur de l'écran */
}

% (Pourcentage)

/* Utiliser pour : */
.container {
  /* Largeurs flexibles */
  width: 90%;
  max-width: 1200px;

  /* Marges horizontales centrées */
  margin: 0 auto;
}

.column {
  /* Grilles et colonnes */
  width: 33.333%;
  float: left;
}

Meilleures Pratiques pour les Unités

1. Hiérarchie des Unités:
   • Structure: VW/VH, %
   • Conteneurs: REM, %
   • Typographie: REM
   • Espacements: REM, EM
   • Détails précis: PX
2. Formule pour Tailles Responsive:

/* Combiner unités pour plus de flexibilité */
.element {
  /* Taille minimum + taille responsive */
  font-size: calc(16px + 0.5vw);

  /* Largeur responsive avec limites */
  width: min(90%, 1200px);

  /* Hauteur dynamique avec minimum */
  height: max(50vh, 400px);
}

Variables CSS pour la Cohérence:

:root {
  /* Espacements */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  /* Largeurs de conteneurs */
  --container-sm: 600px;
  --container-md: 800px;
  --container-lg: 1140px;
  --container-xl: 1290px;
}

Checklist Pratique de Lancement {#checklist}

Avant le Lancement

1. Tests Cross-Browser : Vérifiez que le site fonctionne bien sur Chrome, Firefox, Safari, Edge.
2. Validation W3C : Assurez-vous que le code HTML et CSS soit conforme aux standards W3C.
3. Audit d’Accessibilité : Testez avec des outils comme Axe ou Wave pour garantir la conformité WCAG.
4. Optimisation des Images : Compressez et redimensionnez les images pour des chargements plus rapides.
5. Minification CSS/JS : Minifiez vos fichiers CSS et JavaScript pour réduire le temps de chargement.
6. Setup Analytics : Configurez Google Analytics pour suivre les performances du site.
7. Tests de Performance : Utilisez GTmetrix ou WebPageTest pour vérifier la vitesse de chargement.
8. Vérification des Meta Tags : Assurez-vous que les balises de titre, description et canonical sont correctes.
9. Test Responsive sur Appareils Réels : Testez le site sur différents appareils pour vérifier l’adaptation.

Post-Lancement

1. Surveillance des Performances : Vérifiez régulièrement les Core Web Vitals.
2. Analyse des Erreurs 404 : Identifiez et corrigez les pages qui renvoient des erreurs 404.
3. Vérification des Backups : Assurez-vous que les sauvegardes automatiques sont bien configurées.
4. Configuration Analytics : Suivez les comportements des utilisateurs pour ajuster le contenu.
5. Test des Formulaires : Vérifiez que tous les formulaires de contact fonctionnent correctement.
6. Vérification des Emails : Assurez-vous que tous les emails sont reçus et envoyés correctement.
7. Documentation Client : Préparez une documentation pour l’utilisateur final si le site est destiné à un client.