ResponsiveMobileThailand

Responsive Design Tips for Thai Market Websites

8 May 2026 · by Yunmin Shin

Why Responsive Design Requires Special Attention in Thailand

Thailand is a mobile-first market. Over 70% of web traffic comes from smartphones, the majority of which are Android devices in the mid-range category — screens between 5.5 and 6.7 inches with varying pixel densities, often on 4G connections that slow down considerably outside central Bangkok. Designing only for a desktop monitor, or testing only on an iPhone, produces websites that frustrate the majority of your actual Thai users.

This matters most for the businesses that depend on being found on a phone in the moment someone needs them: a clinic patient searching "botox near me" on Google Maps between BTS stops, a diner scrolling a restaurant's LINE OA menu while deciding where to eat, a customer comparing prices on an e-commerce site during their commute. If the page is slow to render, or the layout breaks on their specific device, that customer does not wait around — they tap back and pick a competitor. Responsive design for the Thai market is not just about making things "fit" on a small screen — it requires specific decisions about typography, touch interaction, image weight, and content hierarchy.

How Should You Handle Thai Typography?

Thai script is complex and does not hyphenate. Long Thai words cannot be broken across lines the way English words can, and most Thai business sites mix Thai and English (and sometimes Korean or Chinese, for clinics serving tourist patients) on the same page. This means:

Never use overflow: hidden with text-overflow: ellipsis on Thai text without testing — you may cut a word at a logically incorrect position, or worse, slice through a diacritic and produce garbled text.
Use word-break: break-word or overflow-wrap: anywhere on containers that might receive dynamic Thai text content, such as service names pulled from a database.
Line height for Thai text should be at least 1.7–1.8, compared to 1.4–1.5 for Latin scripts. Thai characters stack vowels and tone marks above and below the baseline and need breathing room, or the text looks cramped and is harder to read on a small screen.
Font size on mobile should be at least 16px for Thai body text. At smaller sizes, tone marks and vowel diacritics become illegible on mid-range screens, particularly on the budget Android panels common in the 6,000–12,000 baht price range.
Load a proper Thai font subset. System fonts render Thai inconsistently across Android manufacturers. Use next/font with a typeface that has full Thai glyph coverage, such as Noto Sans Thai or IBM Plex Sans Thai:

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

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

Test your Thai content with long words and mixed Thai/English phrases — a clinic's treatment name like "ฉีดโบท็อกซ์รักแร้ (Botox Underarm)" wraps very differently from a short English label, and the wrapping behavior is often not what you expect until you test it.

What Are the Mobile Touch Target Requirements?

Thai users frequently browse one-handed and tap with their thumb while standing, walking, or riding the BTS. Google's Material Design guidelines specify a minimum touch target size of 48×48 pixels for interactive elements. Apply this to:

Navigation links and hamburger menus
Form inputs and submit buttons — especially a clinic's "Book Now" or a restaurant's "Add to Order" button
Product cards and list items
Any element with an onClick handler, including the LINE contact button that should appear on nearly every Thai business page

<button class="min-h-12 min-w-12 p-3 rounded-full bg-green-500">
  <LineIcon class="h-6 w-6" />
</button>

Use Tailwind's min-h-12 min-w-12 (3rem = 48px) utilities to enforce minimum sizes. Add p-3 or p-4 padding to small icon buttons to expand their tap area without changing their visual size — a common mistake is shrinking an icon button visually and forgetting to keep its tappable area large.

How Do You Structure Content for Mobile-First?

Design and code mobile layout first, then layer on tablet and desktop styles using Tailwind's responsive prefixes (md:, lg:). This produces cleaner code than desktop-first designs adapted downward.

For Bangkok business websites, the mobile content hierarchy should prioritize:

What the business does (one clear sentence — a clinic homepage should not make a visitor scroll to learn it does filler injections)
Contact action (LINE button, phone number, click-to-call)
Social proof (Google reviews, before/after photos for a clinic, or table photos for a restaurant)
Details (services, pricing, hours, location map)

Thai customers frequently contact businesses via LINE before making a purchase or booking decision, often to ask a question a static page can't answer. Your LINE contact CTA should be visible above the fold on mobile without scrolling, and ideally sticky at the bottom of the viewport as the user scrolls further down the page.

How Do You Handle Images on Patchy 4G Connections?

Clinic sites live and die by before/after photo galleries, and restaurant sites by menu photography — both are the heaviest assets on the page, and both are exactly what a user on outer-Bangkok 4G is waiting to load. A few habits matter more here than almost anywhere else:

Always use next/image rather than a raw <img> tag, so images are automatically served as WebP or AVIF with correctly sized variants for each device.
Set explicit width and height (or use fill with a sized parent) to prevent layout shift as images load — a jumping page is one of the fastest ways to hurt Core Web Vitals and frustrate a user.
Lazy-load anything below the fold with loading="lazy" (the next/image default), and reserve eager loading for the single hero image the user sees first.
Compress before upload. A clinic's before/after photo shot on a modern phone can be 6–8MB straight out of the camera roll — resize it to the display dimensions before it ever reaches your CMS or Supabase storage bucket.

How Do You Test Across Thai Devices?

Use Chrome DevTools' device simulator during development, but always test on physical devices before launch. Borrow or purchase a mid-range Android phone (Samsung A-series or a Redmi device in the 5,000–8,000 baht range) for realistic testing. The rendering differences between a flagship iPhone and a mid-range Android — font rendering, tap responsiveness, scroll performance — are significant and easy to miss if you only test on your own newer phone.

BrowserStack provides cloud testing across hundreds of real device/OS combinations — useful for catching edge cases before a Bangkok client reviews the site on whatever phone happens to be in their hand during the demo.