Site mobile-first au Sénégal : design pour 88 % de trafic smartphone en 2026

Site mobile-first Sénégal : le vrai chiffre c'est 88 %

Hôtel boutique à Saly qui avait commandé un site WordPress chez un freelance de Cocody. Beau site, animations Lottie partout, vidéo héros 4K en autoplay. Sur le MacBook du dirigeant, magnifique. Sur un Tecno Spark 8 (60 % du parc smartphone bas de gamme au Sénégal), 14 secondes de chargement, scroll qui rame, et un menu burger qui se déclenche au mauvais endroit à cause d'un padding non calé. Résultat : 4 réservations en ligne en 6 mois.

On a refait le site en mobile-first strict : maquettes Figma à 360px de large d'abord, breakpoints élargis ensuite. Six mois plus tard, 47 réservations / mois. Même hôtel, même offre, même budget Ads. Juste un design pensé pour le terrain.

Le terrain : 88 % de trafic mobile, mais quel mobile ?

Selon les données 2026 de StatCounter et de l'ARTP Sénégal :

Concrètement : votre site doit fonctionner sur un Android 7 avec 3 Go de RAM et 4G partagée. Pas sur un iPhone 15 Pro sous Wi-Fi 6.

Mobile-first ce n'est pas "responsive"

Confusion classique. Un site responsive part du desktop et se réorganise vers le mobile. Un site mobile-first part du mobile et s'enrichit vers le desktop. La différence pratique :

• Responsive : on charge tous les assets desktop, on les cache en CSS sur mobile, le poids reste lourd
• Mobile-first : on ne charge sur mobile que ce qui est nécessaire au mobile, on ajoute pour les plus grands écrans

Tailwind CSS pousse la bonne méthode par défaut : les classes sans préfixe ('p-4', 'text-lg') s'appliquent à toutes les tailles, et les préfixes 'sm:', 'md:', 'lg:', 'xl:' enrichissent vers le haut. Tout l'écosystème React/Next moderne suit cette logique.

Les 7 principes du mobile-first qui marchent au Sénégal

1. Maquetter à 360px avant tout

Le bon réflexe Figma : créer la frame à 360 x 640 px (taille médiane Android entrée de gamme). Tout le contenu doit tenir, être lisible, et cliquable au pouce. Ensuite seulement, dériver les versions tablette et desktop.

2. Cibles tactiles 44px minimum

Apple HIG et Material Design s'accordent : tout élément cliquable doit faire au moins 44 x 44 px (idéalement 48). Sur un Tecno avec écran tactile capricieux, en dessous, l'utilisateur tape à côté 1 fois sur 3.

3. Police 16px minimum dans le body

Toute police inférieure à 16px déclenche un zoom automatique sur iOS, qui casse la mise en page. Et sur Android entrée de gamme, l'écran 5.5 pouces avec densité moyenne rend illisible toute police inférieure à 14px.

4. Pas de hover, des états tap

Sur mobile il n'y a pas de hover. Tout effet 'hover:' Tailwind doit avoir un équivalent 'active:' ou 'focus-visible:' pour le toucher. Les menus déroulants au survol n'existent pas — toujours prévoir un tap.

5. Formulaires natifs au maximum

Utiliser les bons 'type=' HTML5 ('tel', 'email', 'number', 'date') déclenche le clavier adapté sur Android et iOS. Un visiteur qui tape un numéro WhatsApp sur un clavier alphabétique abandonne. Et toujours penser 'autocomplete' pour les champs courants.

6. Images responsive avec srcset

Servir une image de 1920px à un Tecno avec écran de 720px, c'est 4x trop de pixels téléchargés. La balise 'picture' avec 'srcset' permet de servir la bonne taille par device. Sur Next.js, le composant 'next/image' le fait nativement.

7. Sticky CTA WhatsApp

Sur 88 % du trafic mobile au Sénégal, le bouton WhatsApp flottant en bas à droite convertit 3 à 6 fois plus que le bouton dans le footer. Position fixed, taille 56px minimum, icône claire, lien 'wa.me' avec message pré-rempli.

Test terrain : 4 outils à connaître

Chez Kolonell, on a un Tecno Spark 8 et un iPhone SE 2020 qui ne servent qu'à tester. C'est l'investissement à 70 000 FCFA qui rapporte le plus dans notre stack outillage.

Erreurs classiques observées sur les sites sénégalais

• Texte sur image avec contraste insuffisant — illisible en plein soleil
• Vidéo héros autoplay 4K — 30 Mo de bande passante avant que l'utilisateur ait cliqué
• Carousel à animations JS lourdes — saccadé sur Android 7
• Menu burger sans icône clair — utilisateurs qui ne le trouvent pas
• Formulaire de contact à 12 champs sur mobile — abandon 80 %
• Pop-up newsletter qui prend 100 % de l'écran sans bouton fermeture visible

Coût d'un refonte mobile-first PME au Sénégal

Pour : tout site qui voit plus de 60 % de trafic mobile (donc tout site sénégalais). À éviter si : votre cible est strictement diaspora desktop (rare).

WhatsApp +221 77 596 93 33 ou brief 20 minutes sur /fr/devis-gratuit — on audite vos analytics mobile en direct.

FAQ

Mon site WordPress est "responsive", est-ce suffisant ?

Probablement pas. La plupart des thèmes WordPress sont responsive desktop-first, ce qui veut dire qu'ils chargent tous les assets desktop puis les cachent. Sur Android entrée de gamme c'est 6 à 10 secondes de chargement. Un audit le confirme en 1 heure.

Quel pourcentage de mes visiteurs sont sur Android ancien au Sénégal ?

Comptez 25 à 35 % selon votre cible. Si vous touchez les régions hors Dakar (B2B national, tourisme, formation, ONG), le pourcentage monte. Sur Plateau / Almadies pur B2B haut de gamme, vous pouvez descendre à 15 %. Toujours vérifier avec Google Analytics.

Une PWA résout-elle le problème ?

En partie. Une PWA bien conçue précharge les assets et fonctionne offline, ce qui aide énormément sur réseau instable. Mais ça ne dispense pas du mobile-first dans le design : si la page d'accueil pèse 4 Mo, la PWA est lourde à installer.

Combien coûte un téléphone test bas de gamme à Dakar ?

Tecno Spark Go ou Itel A50 : 30-45k FCFA neuf chez Auchan ou Sandaga. Investissement indispensable pour toute agence ou freelance qui livre des sites au Sénégal. On peut aussi tester gratuitement sur les vrais devices via BrowserStack.