Plus de 60 % de vos visiteurs consultent votre site Web sur un smartphone ou une tablette. Un site Web qui ne fonctionne pas bien sur mobile perd des visiteurs et des clients. Sitebuilder facilite le bon fonctionnement de votre site sur tous les formats d'écran.

Pourquoi l'optimisation mobile est importante

L'impact des utilisateurs mobiles :

  • Google utilise l'indexation mobile-first pour les classements
  • Les visiteurs quittent les sites mobiles lents en moins de 3 secondes
  • Une mauvaise expérience mobile nuit à votre image de marque
  • Les conversions mobiles croissent plus rapidement que sur desktop
  • De nombreux visiteurs arrivent uniquement via mobile

Les bases du design réactif

Qu'est-ce que le design réactif

Le design réactif adapte automatiquement votre site Web à l'écran. Les éléments se réorganisent, le texte s'échelle et les images s'ajustent.

Comment Sitebuilder gère cela

Sitebuilder est entièrement réactif dès la sortie de la boîte :

  • Les colonnes s'empilent automatiquement sur les petits écrans
  • La taille du texte s'ajuste
  • La navigation devient un menu hamburger
  • Les images s'échelonnent proportionnellement

Aperçu mobile

Voir l'affichage mobile

  1. Ouvrez l'éditeur de page
  2. Cliquez sur l'**icône mobile** dans la barre d'outils
  3. Vous voyez maintenant l'affichage mobile
  4. Cliquez sur l'icône de la tablette pour cet affichage

Tester différents formats d'écran

Testez sur plusieurs formats :

  • Desktop (1920px et plus)
  • Ordinateur portable (1024-1366px)
  • Tablette (768-1024px)
  • Grand téléphone (414-768px)
  • Petit téléphone (320-414px)

Ajuster les éléments par appareil

Visibilité par appareil

Masquez ou affichez des éléments spécifiquement pour mobile :

  1. Sélectionnez un élément
  2. Allez dans **Paramètres**
  3. Trouvez **Visibilité**
  4. Choisissez :
    • Afficher sur desktop
    • Afficher sur tablette
    • Afficher sur mobile
  5. Activez ou désactivez par appareil

Quand masquer des éléments

Bonnes raisons de masquer sur mobile :

  • Grandes images qui distraient
  • Barres latérales qui ne s'adaptent pas
  • Contenu secondaire
  • Tableaux complexes

Contenu spécifique au mobile

Ajoutez du contenu alternatif pour mobile :

  1. Créez une version simplifiée
  2. Affichez uniquement sur mobile
  3. Masquez la version complexe sur mobile

Optimiser la navigation

Sur mobile, votre menu devient automatiquement un menu hamburger :

  1. Allez dans **Paramètres de l'en-tête**
  2. Configurez le **Menu mobile**
  3. Choisissez :
    • Icône de menu (hamburger, croix, etc.)
    • Animation
    • Couleur de fond

En-tête fixe

Gardez la navigation visible lors du défilement :

  1. Sélectionnez l'en-tête
  2. Activez **Sticky**
  3. L'en-tête reste en haut lors du défilement
  4. Testez si cela fonctionne bien sur mobile

Liens adaptés au toucher

Assurez-vous que les liens sont faciles à toucher :

  • Au moins 44x44 pixels
  • Espacement suffisant entre les liens
  • Retour visuel clair lors du toucher

Ajuster la typographie

Taille du texte par appareil

  1. Sélectionnez un bloc de texte
  2. Basculer en affichage mobile
  3. Ajustez la taille du texte pour mobile
  4. Les titres sont souvent 20-30 % plus petits

Hauteur de ligne et espacement

Sur les petits écrans :

  • Augmentez la hauteur de ligne pour la lisibilité
  • Réduisez les marges entre les paragraphes
  • Gardez suffisamment d'espace blanc

Optimisation des polices

  • Utilisez au maximum 2 polices
  • Choisissez des polices lisibles pour les petits écrans
  • Évitez les polices trop fines

Optimiser les images

Images réactives

Sitebuilder charge automatiquement la bonne taille d'image :

  • Versions plus petites pour mobile
  • Économise la bande passante et le temps de chargement
  • Conservation de la qualité

Taille des images

  • Utilisez WebP lorsque c'est possible
  • JPEG pour les photos
  • PNG pour les graphiques avec transparence
  • SVG pour les logos et icônes

Chargement paresseux

Chargez les images uniquement lorsqu'elles apparaissent à l'écran :

  1. Allez dans **Paramètres du site**
  2. Activez **Lazy loading**
  3. Les images se chargent lors du défilement

Formulaires pour mobile

Champs de saisie adaptés au toucher

  1. Rendez les champs de saisie suffisamment grands
  2. Ajoutez suffisamment d'espace entre les champs
  3. Utilisez le bon type de saisie :
    • email pour les adresses e-mail
    • tel pour les numéros de téléphone
    • number pour les chiffres

Optimisation du clavier

Le bon clavier apparaît automatiquement :

  • Champ e-mail : touche @ disponible immédiatement
  • Téléphone : clavier numérique
  • URL : bouton .com disponible

Bouton d'envoi

  • Rendez le bouton suffisamment large
  • Placez-le en bas du formulaire
  • Utilisez un appel à l'action clair

Optimiser la vitesse

Temps de chargement mobile

Les utilisateurs mobiles s'attendent à de la vitesse :

  1. Allez dans **Paramètres** et sélectionnez **Performances**
  2. Activez **Caching**
  3. Activez **Minification du code**
  4. Activez **Lazy loading**

Contenu critique en premier

  1. Assurez-vous que le contenu au-dessus de la ligne de flottaison se charge rapidement
  2. Définissez la priorité pour les images importantes
  3. Évitez les scripts bloquants

Envisager AMP

Pour les sites axés sur le contenu :

  • Les versions AMP se chargent très rapidement
  • Bon pour les articles d'actualité et les blogs
  • Nécessite une mise en œuvre spécifique

Gestes tactiles

Comportement de défilement

  • Assurez un défilement fluide
  • Évitez le défilement horizontal
  • Testez les longues pages sur mobile

Actions de glissement

Certains éléments prennent en charge le glissement :

  • Carrousels d'images
  • Galeries de produits
  • Sliders de témoignages

Tester et déboguer

Tests sur appareils réels

Rien ne remplace un vrai test :

  1. Ouvrez votre site sur votre téléphone
  2. Testez toutes les pages et fonctionnalités
  3. Essayez de remplir des formulaires
  4. Vérifiez le flux de paiement

Chrome DevTools

Testez dans votre navigateur :

  1. Ouvrez Chrome DevTools (F12)
  2. Cliquez sur l'icône mobile
  3. Sélectionnez un appareil
  4. Testez l'interaction

Problèmes courants

Vérifiez :

  • Texte trop petit pour être lu
  • Boutons trop proches les uns des autres
  • Images qui sortent de l'écran
  • Formulaires difficiles à remplir

Liste de contrôle mobile-first

Pour chaque page, vérifiez :

  • La page se charge-t-elle en moins de 3 secondes ?
  • Tous les éléments sont-ils visibles et lisibles ?
  • La navigation fonctionne-t-elle bien ?
  • Les formulaires sont-ils faciles à remplir ?
  • Tous les liens et boutons fonctionnent-ils ?
  • Il n'y a pas de défilement horizontal indésirable ?

Articles connexes

Besoin d'aide ?

Nous sommes là pour vous aider ! Vous rencontrez un problème ou avez des questions ? Notre équipe de support est prête à vous aider personnellement. Envoyez-nous un message via le système de tickets - nous répondons généralement dans quelques heures et sommes heureux de vous aider.