CSS en termes simples : pourquoi le site « se casse » sur mobile et l'impact sur les ventes
CSS (Cascading Style Sheets) est le langage de mise en forme du site : couleurs, polices, marges, disposition des blocs et adaptation à l'écran du téléphone. Si le HTML définit le « squelette » de la page et le JavaScript le comportement des boutons et formulaires, le CSS répond à l'apparence sur moniteur et dans la poche du client. Quand le dirigeant dit « le site se casse sur mobile », ce sont presque toujours les styles : largeur fixe, texte trop petit, bouton « Acheter » hors écran, défilement horizontal, formulaire impossible à remplir au pouce. En 2026, plus de la moitié des leads sur les sites commerciaux viennent du mobile - une mauvaise mise en page frappe la conversion directement, pas « on corrigera plus tard ».
- CSS - style : couleurs, polices, grille, adaptation aux écrans
- « Se casse » - scroll horizontal, blocs qui se chevauchent, texte coupé, boutons hors zone de toucher
- Pourquoi le dirigeant - le client mobile n'attend pas la « version desktop », il part chez le concurrent
- Ensemble - HTML (structure) + CSS (look) + JS (interactivité) ; sans CSS, page en texte brut
- Risque principal - beau mockup Figma sur desktop et panier cassé sur iPhone
CSS en termes simples
CSS est un ensemble de règles pour le navigateur : « titre - 24 pixels et bleu », « bouton - pleine largeur sur mobile », « menu latéral - masquer sous 768 pixels ». Ce n'est pas de la programmation au sens habituel - vous décrivez l'apparence, pas la logique métier.
| Couche | Rôle | Analogie |
|---|---|---|
| HTML | Titres, texte, formulaires, liens | Ossature du bâtiment |
| CSS | Couleurs, polices, marges, grille, responsive | Finitions et plan |
| JavaScript | Panier, slider, validation | Ascenseur, alarme, éclairage |
| PHP / backend | Commandes, paiement, base de données | Installations derrière le mur |
Important : le prestataire peut montrer un site parfait sur votre portable - 70% des visiteurs voient autre chose sur mobile si le CSS n'est pas adapté.
Pourquoi le site « se casse » sur mobile
« Se casse » désigne familièrement des problèmes de mise en page responsive. Symptômes et causes CSS typiques :
Défilement horizontal
Barre de scroll latérale - le site paraît « coupé ». Le plus souvent :
- bloc en largeur fixe (ex. 1200 px) sans
max-width: 100%; - grand tableau de prix ou catalogue ne se réorganise pas sur écran étroit ;
- bannière ou vidéo plus large que l'écran du téléphone.
Blocs qui se chevauchent
Texte sur le bouton, prix sous la photo, menu sur le titre :
- positionnement absolu « comme sur mockup 1920 px » ;
- marges insuffisantes sur petits écrans ;
- police qui ne rétrécit pas, conteneur ne grandit pas - débordement.
Texte et boutons trop petits
Sur mobile, conditions de livraison illisibles, « Commander » introuvable :
- corps de texte sous 14-16 px ;
- boutons sous 44 px de hauteur ;
- liens du pied de page trop serrés.
Version « desktop » sur mobile
Le site s'ouvre mais tout est minuscule - zoom obligatoire :
- pas de viewport dans le HTML ;
- sous-domaine m. sans redirections ;
- vieux template sans media queries.
Vérifier en 5 minutes sans code
- Ouvrir le site sur votre téléphone.
- Parcourir accueil - catalogue - fiche - panier - paiement.
- Tourner portrait et paysage - rien ne doit casser.
- Remplir le formulaire d'une main.
- Comparer avec un concurrent du même secteur.
Impact sur les ventes
Ce n'est pas l'esthétique - c'est l'argent et les leads.
| Symptôme mobile | Comportement | Impact |
|---|---|---|
| Scroll horizontal | Agacement, fermeture en 3-5 s | Lead perdu |
| Bouton « Acheter » invisible | Cherche « acheter X près de moi » | Vente au concurrent |
| Formulaire ne tient pas | Abandon en cours | Moins de leads ads et SEO |
| Chargement lent (CSS/polices lourdes) | Attente 4+ s en 4G | Jusqu'à 40% partent avant chargement |
| Prix illisibles | Méfiance | Conversion en baisse |
Chiffres de repère :
- 53%+ des sessions e-commerce sont mobiles dans certaines niches.
- Google utilise l'indexation mobile-first : mobile médiocre = ranking et leads organiques en souffrance.
- Corriger le CSS critique au checkout donne souvent +10-30% de commandes sans plus de pub.
Pratique : mesurez les leads mobile, pas seulement les visites. Desktop 4%, mobile 0,8% - problème quasi sûr de mise en page, vitesse ou UX.
Responsive, mobile séparé et app
Design responsive
Un seul site, le CSS réorganise les blocs. Avantage : une URL pour le SEO. Inconvénient : CSS propre dès le départ.
Version mobile séparée
Deuxième jeu de pages. Inconvénients : deux codes, prix désynchronisés, indexation confuse.
PWA / « app »
Pertinent pour achats répétés ; pour une landing, souvent excessif.
| Approche | Quand | Budget |
|---|---|---|
| CSS responsive | Nouveau site, WordPress | Inclus dans bonne intégration |
| Correctifs CSS | Trafic existant, conversion mobile en chute | $500 - $3 000 |
| Refonte complète | Marque datée, rebond mobile > 60% | $3 000 - $15 000+ |
| App native | Centaines de milliers MAU | À partir de $15 000 |
Règle : pour la plupart des PME en 2026, un site responsive avec CSS testé sur les pages clés suffit.
Questions à la livraison
- Quelles pages testées sur mobile ?
- Rapport PageSpeed / Core Web Vitals mobile ?
- Une URL pour tous les appareils ?
- Qui modifie le CSS ensuite ?
- Garantie mise en page mobile dans le procès-verbal.
Un audit SEO avec bloc mobile usability détecte souvent des problèmes CSS qui tuent la conversion.
Erreurs typiques du dirigeant
- Ne regarder que le desktop à la livraison.
- Exiger le pixel-perfect sur mobile alors que simplifier augmente la conversion.
- Ajouter des widgets sans test mobile.
- Économiser sur l'intégration et dépenser en pub.
- Changer de thème WordPress sans tester le checkout mobile.
Synthèse
CSS, c'est l'apparence du site et son usage sur téléphone. « Se casse » veut presque toujours dire styles et responsive - pas virus ni hébergement. À l'ère mobile-first, mauvaise mise en page = perte de ventes directe.
Il vaut de :
- tester le parcours d'achat sur un vrai téléphone avant paiement ;
- comparer conversion desktop vs mobile ;
- exiger CSS responsive sur une URL ;
- ne pas sacrifier la vitesse 4G pour des effets à la mode.
Bon CSS est invisible - le client commande. Mauvais CSS : vous payez pub et SEO et la moitié voit une vitrine cassée.
Questions fréquentes
CSS et HTML, c'est la même chose ?
Non. HTML = structure ; CSS = style. Sans HTML, rien à styliser ; sans CSS, page années 90.
Pourquoi OK sur PC et « cassé » sur mobile ?
Grand écran accepte largeur fixe ; à 390 px les mêmes styles ne s'adaptent pas. Media queries manquantes, tableaux larges, vieux viewport.
Corriger le mobile sans tout refaire ?
Souvent oui - CSS ciblé sur accueil, catalogue, checkout. Sur vieux sites, comparez rustine vs nouveau template.
Impact sur le classement Google ?
Oui. Mobile-friendly, Core Web Vitals, signaux comportementaux. Yandex aussi. Le SEO ne remplace pas une bonne mise en page.
Coût d'un responsive correct ?
Landing $800 - $2 500 ; corporate $2 500 - $8 000 ; boutique sur mesure $5 000 - $20 000+ ; panier mobile sur WordPress $500 - $2 000. Prévoyez 10-15% pour tests sur appareils réels.