Mobile-first website Senegal: designing for 88% smartphone traffic in 2026

Mobile-first website Senegal: the real number is 88%

A boutique hotel in Saly that had ordered a WordPress site from a Cocody freelancer. Beautiful design, Lottie animations everywhere, 4K autoplay hero video. On the founder's MacBook, gorgeous. On a Tecno Spark 8 (60% of the low-end smartphone fleet in Senegal), 14 seconds to load, laggy scroll, and a burger menu that triggered in the wrong spot due to an untuned padding. Result: 4 online bookings in 6 months.

We rebuilt the site strict mobile-first: Figma mockups at 360 px wide first, broader breakpoints after. Six months later, 47 bookings / month. Same hotel, same offer, same Ads budget. Just a design built for the field.

The terrain: 88% mobile traffic, but which mobile?

Per 2026 StatCounter and ARTP Senegal data:

Concretely: your site must work on an Android 7 with 3 GB RAM and shared 4G. Not on an iPhone 15 Pro under Wi-Fi 6.

Mobile-first is not "responsive"

Classic confusion. A responsive site starts from desktop and reflows to mobile. A mobile-first site starts from mobile and enriches up to desktop. The practical difference:

• Responsive: all desktop assets get loaded, then hidden in CSS on mobile, weight stays heavy
• Mobile-first: only mobile-necessary assets are loaded on mobile, more for larger screens

Tailwind CSS pushes the right method by default: unprefixed classes ('p-4', 'text-lg') apply to all sizes, and 'sm:', 'md:', 'lg:', 'xl:' prefixes enrich upward. The whole modern React/Next ecosystem follows this logic.

The 7 mobile-first principles that work in Senegal

1. Mock up at 360 px first

The right Figma reflex: create the frame at 360 x 640 px (median entry-level Android). All content must fit, be readable, and tappable. Only then derive tablet and desktop versions.

2. Touch targets at least 44 px

Apple HIG and Material Design agree: any clickable element should be at least 44 x 44 px (ideally 48). On a Tecno with a finicky touchscreen, anything smaller and the user mis-taps 1 time in 3.

3. Body font at least 16 px

Anything below 16 px triggers automatic zoom on iOS, breaking the layout. And on entry-level Android, the 5.5-inch screen with average density makes anything under 14 px unreadable.

4. No hover, use tap states

There is no hover on mobile. Every Tailwind 'hover:' effect needs an 'active:' or 'focus-visible:' counterpart for touch. Hover-triggered dropdown menus do not exist — always plan a tap.

5. Native form inputs whenever possible

Using the right HTML5 'type=' ('tel', 'email', 'number', 'date') triggers the right keyboard on Android and iOS. A visitor typing a WhatsApp number on an alphabetical keyboard abandons. And always set 'autocomplete' on common fields.

6. Responsive images with srcset

Serving a 1920 px image to a Tecno with a 720 px screen wastes 4x the pixels. The 'picture' tag with 'srcset' serves the right size per device. On Next.js, 'next/image' does it natively.

7. Sticky WhatsApp CTA

On 88% of Senegal mobile traffic, a floating WhatsApp button bottom-right converts 3 to 6 times better than a footer button. Position fixed, size at least 56 px, clear icon, 'wa.me' link with pre-filled message.

Field testing: 4 must-know tools

At Kolonell we keep a Tecno Spark 8 and an iPhone SE 2020 only for testing. That 70,000 FCFA investment delivers the highest ROI in our tooling stack.

Common mistakes on Senegalese sites

• Text on image with insufficient contrast — unreadable in full sun
• 4K autoplay hero video — 30 MB of bandwidth before the user clicked anything
• Carousel with heavy JS animations — janky on Android 7
• Burger menu with unclear icon — users do not find it
• Contact form with 12 fields on mobile — 80% abandonment
• Newsletter popup taking 100% of the screen with no visible close button

Cost of a mobile-first SME redesign in Senegal

Best for: any site seeing more than 60% mobile traffic (so any Senegalese site). Avoid if: your target is strictly desktop diaspora (rare).

WhatsApp +221 77 596 93 33 or 20-minute brief at /en/free-quote — we audit your mobile analytics live.

FAQ

My WordPress site is "responsive", is that enough?

Probably not. Most WordPress themes are desktop-first responsive, meaning they load all desktop assets then hide them. On entry-level Android that's 6 to 10 seconds to load. An audit confirms in 1 hour.

What share of my visitors are on old Android in Senegal?

Count 25 to 35% depending on your target. If you reach regions outside Dakar (national B2B, tourism, training, NGOs), the share rises. On pure premium Plateau / Almadies B2B you may drop to 15%. Always verify with Google Analytics.

Does a PWA solve the problem?

Partly. A well-built PWA preloads assets and works offline, which helps a lot on unstable networks. But it does not remove mobile-first design: if the homepage weighs 4 MB, the PWA is heavy to install.

How much does a low-end test phone cost in Dakar?

Tecno Spark Go or Itel A50: 30-45k FCFA new at Auchan or Sandaga. Essential investment for any agency or freelancer shipping Senegalese sites. Free testing is also available on real devices via BrowserStack.