Pourquoi mobile-first, pas mobile-friendly
En 2026, 83% des Sénégalais se connectent au web via smartphone. Pourtant, la majorité des sites PME de Dakar sont pensés pour un écran 27 pouces et ensuite "adaptés" au mobile. Résultat : textes illisibles, boutons trop petits, pages de 5 Mo à charger en 4G instable.
Chez Kolonell, on conçoit mobile-first : on dessine d'abord pour le Tecno à 60 000 FCFA, ensuite on agrandit pour le desktop. Ça change tout.
Les 12 règles UX mobile-first non négociables
1. Boutons minimum 48x48 pixels
Un pouce d'adulte fait environ 45 mm. En dessous de 48 pixels, l'utilisateur tape à côté. Chaque mis-tap = frustration = rebond.
2. Texte minimum 16px, jamais en dessous
Sous 16px, les utilisateurs zooment — et votre mise en page casse. 16px pour le body, 20-24px pour les titres secondaires, 32px+ pour les titres principaux.
3. Une seule colonne de contenu
Les grilles 3 colonnes desktop deviennent 1 colonne empilée sur mobile. Ne jamais forcer du 2 colonnes étroit — illisible.
4. Formulaires courts, champs autofill
- Maximum 4 champs sur la première vue
- type="email" / type="tel" pour sortir le bon clavier
- autocomplete="name" pour le remplissage automatique
- Validation en temps réel, pas au submit
5. Temps de chargement < 2 secondes sur 3G
Règle dure. Outils : images WebP/AVIF, lazy-loading, code-splitting Next.js, CDN. Un site qui charge en 6 secondes perd 50% des visiteurs avant d'afficher quoi que ce soit.
6. Le bouton WhatsApp flottant permanent
Au Sénégal, WhatsApp est le canal de conversion numéro 1. Bouton vert fixe en bas à droite, numéro +221 77 596 93 33, message pré-rempli. Zéro exception.
7. Pas de popup qui couvre l'écran mobile
Google pénalise, les utilisateurs fuient. Si vous voulez un opt-in newsletter, faites-le en bas de page, inline.
8. Navigation hamburger claire et rapide
Besoin d'un site web professionnel ?
Kolonell crée des sites web qui attirent des clients, optimisés pour le marché sénégalais. Devis gratuit en 2 minutes.
- Ouverture en < 200 ms
- Maximum 7 items dans le menu principal
- CTA principal ("Devis gratuit") dans le menu en bouton coloré
9. Images optimisées, ratio 16:9 ou 4:5
Ratio mobile-friendly. Poids maximum 100 Ko par image héros, 40 Ko pour les images secondaires. Next.js next/image gère ça automatiquement.
10. Scroll fluide, zéro carousel auto
Les carousels qui tournent tout seuls sont ignorés à 95%. Remplacez par un scroll horizontal manuel ou une grille statique.
11. Feedback tactile immédiat
Chaque tap doit produire un retour visuel en < 100 ms (couleur, ombre, mini-animation). Sinon l'utilisateur tape 3 fois et part.
12. Testez sur un vrai Tecno, pas un iPhone 15
Le Tecno à 60 000 FCFA est le device médian sénégalais. Si votre site rame dessus, vous perdez votre marché. Le simulateur Chrome ne suffit pas.
Un exemple concret : hôtel Almadies
Avant refonte mobile-first :
- 68% des visiteurs sur mobile, 0,8% de conversion réservation
- Temps de chargement : 5,4s sur 3G
- Formulaire réservation : 9 champs
Après refonte Kolonell :
- Même trafic, 7,1% de conversion (× 9)
- Chargement : 1,6s sur 3G
- Formulaire : 3 champs + WhatsApp
- +120 réservations / mois
Conclusion : le mobile paye
Penser mobile-first, ce n'est pas suivre une mode — c'est respecter la réalité de votre marché. Les PME qui l'ont compris à Dakar, Abidjan, Lomé captent les clients que leurs concurrents laissent partir à cause d'un site desktop mal adapté.
Prêt à refaire votre UX mobile ?
Demandez un audit UX gratuit ou écrivez-nous sur WhatsApp +221 77 596 93 33. On analyse votre site sur un vrai Tecno et on vous livre un plan d'action en 48h.
Mohamed Ba
Fondateur, Kolonell
Passionné par le digital et l'entrepreneuriat en Afrique, Mohamed accompagne les entreprises sénégalaises dans leur transformation digitale depuis 2020. Fondateur de Kolonell, il croit que chaque PME mérite une présence en ligne professionnelle et accessible.