MobileThailandDevelopment

Mobile-First Development for Thai Users

17 May 2026 · by Yunmin Shin

What Does Mobile-First Mean in Practice?

Mobile-first is not just a design philosophy — it is a development decision that changes how you write CSS, structure your JavaScript, and architect your data fetching.

In Thailand, the stakes for mobile-first are higher than in most markets. Internet access for many Thais is exclusively through a smartphone — there is no desktop backup. Your website being broken or unusable on mobile is not an inconvenience; it is a complete loss of that user.

Who Are Your Thai Mobile Users?

The typical Thai smartphone user accessing a local business website:

Uses an Android device, likely a Samsung A-series or Xiaomi in the 6,000–12,000 baht range
Has a 4G connection with occasional dead zones (common in outer Bangkok districts and provinces)
Browses with one hand while doing something else
Has LINE, Facebook, and TikTok as their primary communication and discovery channels
Expects pages to load in under 2 seconds

Design and development decisions should be calibrated against this user, not against a developer using a MacBook and a wired connection.

How Do You Write Mobile-First CSS?

In Tailwind CSS, write base styles for mobile first, then override for larger screens using responsive prefixes:

<!-- Mobile: full width, stacked. Desktop: side by side -->
<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2">...</div>
  <div class="w-full md:w-1/2">...</div>
</div>

Avoid the common mistake of writing desktop styles first and then overriding them for mobile with sm: — this produces bloated CSS and fragile layouts.

This matters especially for content-heavy sections that a lot of Bangkok business sites need — a clinic's treatment price table, or a restaurant's full menu. Stacking these into single-column cards on mobile and only switching to a multi-column table at md: and above keeps them scannable with a thumb instead of forcing horizontal scrolling on a screen that's already narrow.

How Do You Handle Thai Text and Fonts?

Thai script has tall vowel and tone marks that stack above and below the consonant line, which means line-height and font choice matter more than they do for Latin text. A font not designed with proper Thai metrics will clip tone marks or crowd lines together. Use a font with genuine Thai glyph support — Noto Sans Thai or IBM Plex Sans Thai are safe, well-tested choices — and load it via next/font so it's self-hosted and subset automatically rather than pulled from an external Google Fonts request that adds a round trip on every first visit:

import { Noto_Sans_Thai } from "next/font/google";

const notoSansThai = Noto_Sans_Thai({
  subsets: ["thai", "latin"],
  display: "swap",
});

For a bilingual Thai/English site, set line-height slightly more generous than you would for English-only content — leading-relaxed rather than leading-normal — to give tone marks room to breathe without visually crowding adjacent lines.

How Do You Handle Slow Connections?

Optimize for the case where a user has a slow or intermittent connection:

Minimize JavaScript. Every kilobyte of JavaScript must be downloaded, parsed, and executed. Mid-range Android devices are significantly slower at JavaScript execution than flagship phones. A 500KB JavaScript bundle that parses in 100ms on a MacBook might take 600ms on a Redmi Note.

Use skeleton loaders, not spinners. Skeleton loaders (grey placeholder shapes) show the page structure immediately while data loads. Spinners tell the user nothing about what is coming. Skeleton loaders feel faster even when they are not.

Implement optimistic UI updates. When a user submits a form, update the UI immediately as if the request succeeded, then reconcile with the server response. This makes the app feel instant on slow connections.

Cache aggressively. Static assets with long cache headers load instantly on repeat visits, regardless of connection speed.

Compress and lazy-load images aggressively. This is the single biggest weight problem on the sites we operate — a clinic's before/after gallery or a restaurant's food photography is exactly the content most likely to be full-resolution phone camera output dropped straight into a CMS. Serve images through next/image with proper sizes attributes so a phone downloads a phone-sized image, not a 4MB original scaled down by CSS, and lazy-load anything below the first viewport so the initial page weight stays low on a patchy connection.

How Do You Integrate with Thai Mobile Behavior?

Thai mobile users expect to contact businesses via LINE. Every page should have a prominently placed LINE contact button. On mobile, this button should be large enough to tap easily (minimum 48px height) and ideally sticky at the bottom of the screen on mobile viewport.

Use tel: links for phone numbers so users can tap to call directly. Use https://line.me/R/ti/p/@handle for LINE deep links that open the LINE app directly.

Forms deserve particular attention. A Thai mobile keyboard takes up close to half the screen, so a booking or contact form with more than four or five fields visible at once feels cramped and error-prone. Use the correct inputmode on every field (tel for phone, numeric for postal codes) so the right keyboard layout appears automatically, and avoid placeholder-only labels that disappear the moment someone starts typing — on a small screen, a user who gets interrupted mid-form (a LINE notification, a phone call) easily forgets what a now-empty field was for.

How Do You Measure This Instead of Guessing?

Lighthouse and Core Web Vitals in Chrome DevTools are useful, but run them with network throttling set to "Slow 4G" and CPU throttling at 4x–6x slowdown — the defaults simulate a mid-tier device, not the actual mid-range Android phones most Thai users carry. Pay particular attention to Largest Contentful Paint (LCP) and Interaction to Next Paint (INP): a clinic's hero image or a restaurant's menu photo is very often the LCP element, so it needs to be a properly sized, modern-format (next/image handles this automatically) asset rather than an oversized JPEG.

Test your call-to-action buttons by actually using them on a physical mobile device in Bangkok, on the actual mobile network your customers use — AIS, dtac, or True — not just office WiFi. The gap between a desktop preview and the real mobile experience is always larger than you expect, and the only way to close that gap is to hold the phone yourself.