SEO·15 · 11 · 24·8 MIN READ

Mobile-First Website Build Checklist 2026: Technical Standards Every Thai Website Must Meet

Mobile-First Website Build Checklist 2026: Technical Standards Every Thai Website Must Meet

Building a website in Thailand in 2026 means building for mobile users first — not desktop. 95% of Thai users access the web via smartphone, Google enforces 100% Mobile-First Indexing, and Core Web Vitals are measured primarily on mobile. This checklist compiles every technical standard a Thai website must meet before launch, including Thai-specific considerations that standard checklists miss.

Category 1: Viewport and Responsive Foundation

Viewport Meta Tag

The most common foundational error:

<!-- ✅ Correct -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ❌ Wrong — blocks accessibility zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Important: user-scalable=no or maximum-scale=1.0 blocks Accessibility Zoom, violates WCAG 2.1, and can negatively affect rankings.

  • Correct Viewport Meta Tag on every page
  • User Zoom not blocked (user-scalable=no not present)
  • Tested in Chrome DevTools → Mobile Simulation

Responsive Layout

  • Layout uses CSS Grid or Flexbox (not fixed-width table layout)
  • All containers use relative units: %, vw, em, rem (not fixed px for width)
  • Breakpoints defined for: 375px (iPhone SE), 390px (iPhone 16), 412px (Samsung A-Series), 768px (Tablet)
  • Layout tested at 5 different screen sizes before launch
  • No horizontal scroll on mobile (extremely common defect)

Responsive Images

<!-- ✅ Correct — srcset for responsive images -->
<img 
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Image description"
  width="800"
  height="450"
  loading="lazy"
>
  • Every image has srcset for responsive delivery
  • Every image has explicit Width and Height attributes (prevents CLS)
  • Hero Image uses loading="eager" (not lazy — it's above the fold)
  • Below-the-fold images use loading="lazy"

Category 2: Typography for Thai Language on Mobile

Minimum Font Size

Samsung A-Series users typically have 6-6.5 inch high-DPI screens:

  • Body Text minimum 16px (both Thai and English)
  • Subheading H3-H4 minimum 18px
  • H2 minimum 20px, H1 minimum 24px
  • No readable text smaller than 12px (except legal disclaimers)

Thai language specifically: Thai characters have more complex ascenders/descenders than Latin script. Increase line-height accordingly:

body {
  font-size: 16px;
  line-height: 1.8; /* Higher than English 1.5 */
}

Thai Font Rendering

  • Use fonts with proper Thai Unicode support: Sarabun, Noto Sans Thai, Prompt, IBM Plex Sans Thai
  • Fonts loaded via Google Fonts or self-hosted (not system fonts that vary across devices)
  • Set font-display: swap to prevent Flash of Invisible Text
  • Test rendering on Android 12/13 + Samsung One UI and iOS 17/18
  • Thai special characters display correctly: tone marks (่้), vowels (-ั), compound characters
/* ✅ Correct font stack for Thai websites */
body {
  font-family: 'Sarabun', 'Noto Sans Thai', 'Helvetica Neue', Arial, sans-serif;
  font-display: swap;
}

Text Link Size and Spacing

  • Text links have minimum 44px width and 44px height touch target
  • Minimum 8px spacing between adjacent links to prevent accidental taps
  • Links in body text are underlined or have sufficient colour contrast — not colour alone

Category 3: Touch Targets and Interactive Elements

Minimum Touch Target Size

WCAG 2.1 and Google recommendation:

  • All buttons: minimum 44×44px (width×height)
  • Navigation Menu Items: minimum 44px height
  • Form Input Fields: minimum 44px height
  • Checkboxes and Radio Buttons: minimum 44×44px clickable area

Thumb Zone Design: Most mobile users hold their phone with one hand. The thumb naturally reaches the centre-bottom of the screen most comfortably:

  • Primary CTA (Buy Now, Contact Us) positioned in Thumb Zone (lower half of screen)
  • Frequently used navigation not placed at the very top if avoidable

Form Design for Mobile

  • Correct Input Types: type="email" for email, type="tel" for phone, type="number" for numbers
  • Appropriate keyboard appears automatically for each input type
  • autocomplete attributes configured: autocomplete="name", autocomplete="email"
  • Form Labels positioned above inputs (not beside) for wider typing space
  • Error messages clear and positioned adjacent to the relevant field

Category 4: Image and Media Optimisation

Image Formats

  • All images use WebP (25-35% smaller than JPEG) or AVIF
  • PNG/JPG fallback for older browsers that don't support WebP (use <picture> element)
  • Logo: SVG (scales without pixelation at any resolution)
<!-- ✅ WebP with fallback -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="450">
</picture>

Image Compression Targets

Image Type Target File Size
Hero Image (Above Fold) <150KB
Product Image <80KB
Blog Thumbnail <50KB
Icon / Logo SVG <10KB

Free Tools: Squoosh.app, TinyPNG, Cloudflare Image Optimisation

Video on Mobile

  • Never use autoplay without muted attribute (mobile browsers block unmuted autoplay)
  • For autoplaying video: autoplay muted loop playsinline
  • For Hero Video: provide Background Image fallback for slow connections
  • Video File Size: MP4 H.264 or WebM VP9, under <3MB for short loop videos

Category 5: Performance Configuration

Caching

  • Browser Caching configured: Static Assets (Images, CSS, JS) cache for at least 1 year
  • For WordPress: install WP Rocket or LiteSpeed Cache
  • Server-side Caching enabled

CDN

  • CDN deployed to serve Static Assets from edge servers close to users
  • Cloudflare Free Tier recommended for SMEs
  • Test TTFB before and after CDN: should decrease by >30%

Critical CSS

  • CSS required for Above-the-fold content inlined in <head>
  • Non-critical CSS deferred or async loaded
  • Remove unused CSS (use PurgeCSS or WordPress plugins)

JavaScript

  • Non-critical scripts use defer or async
  • Third-party scripts (Analytics, Chat Widget, Social) load asynchronously
  • No render-blocking JavaScript in <head>

Category 6: Pre-Launch Testing

Device Testing Matrix

Device OS Resolution
Samsung Galaxy A35 Android 14 1080×2340
Samsung Galaxy S24 Android 14 1080×2340
iPhone 16 iOS 18 1179×2556
iPhone SE 3rd Gen iOS 17 750×1334
iPad Air iPadOS 17 1640×2360

Final Pre-Launch Checklist

  • PageSpeed Insights Mobile Score: >80 (Green)
  • Core Web Vitals: LCP <2.5s, INP <200ms, CLS <0.1
  • No Mobile Usability Errors in GSC
  • No horizontal scroll on any test device
  • All Touch Targets ≥44×44px
  • Thai Font renders correctly on both Android and iOS
  • Forms complete comfortably on mobile
  • Checkout Flow (if applicable) tested start-to-confirmation on mobile

Key Takeaways

  • Correct Viewport Meta Tag is the foundation — never block User Zoom
  • Body Text minimum 16px, line-height 1.8 for Thai language
  • Touch Targets minimum 44×44px for every interactive element
  • Use WebP/AVIF for photos, SVG for logos and icons
  • Test on a real Samsung A-Series device — it's the most common device among Thai users
  • PageSpeed Insights Mobile score above 80 is the minimum standard before launch

FAQ

Q: Most WordPress themes say they're "Responsive" — do I still need this checklist?
A: Absolutely yes. A theme's "Responsive" claim means the layout doesn't break — it doesn't guarantee adequate Touch Target sizes, correct Thai font rendering, optimised images, or passing Core Web Vitals scores. This checklist audits everything a theme doesn't automatically handle.

Q: Should I choose Responsive Design or a Separate Mobile Site (m.domain.com)?
A: Always Responsive Design for new SME sites. A Separate Mobile Site requires maintaining two versions, introduces Canonical complications, and Google itself recommends Responsive as best practice. Separate Mobile Sites are only justifiable for legacy infrastructure — never start new builds that way.

Q: If my PageSpeed Insights score is very low, where should I start fixing?
A: The sequence that produces the fastest results: (1) Compress images to WebP — typically recovers 20-40 score points; (2) Install a caching plugin; (3) Enable a CDN; (4) Defer non-critical JavaScript; (5) Inline Critical CSS. Follow this order for the fastest visible improvement before moving to advanced optimisation.

Chat on LINE@tectony