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.

Passing the Checklist Is the Floor, Not the Finish Line

These standards are the baseline for a Thai website in 2026. Meeting them means your site is genuinely usable on the device your customer is holding; it does not make the site distinctive. The next layer is meaning. Sites TecTony builds under AI-Native Web Development keep their content in a vectorised knowledge base alongside the normal pages, so AI systems answer questions about the business from real information rather than inferring from whatever page they happened to reach. Both layers belong to the same project and should be decided together, because retrofitting content structure after launch always costs more than getting it right during the build.

Frequently Asked Questions

Q1: What is the most common viewport mistake?
A1: Adding maximum-scale so users cannot zoom. The article's correct value is width=device-width with initial-scale=1.0 and no zoom lock, since locking zoom makes the page unusable for anyone who needs to enlarge text.

Q2: Why must Thai websites be designed mobile-first?
A2: 95% of Thai users arrive on a smartphone, Google enforces mobile-first indexing fully, and Core Web Vitals are measured primarily on mobile. Starting from desktop designs for the minority and for a ranking system that is not looking at that screen.

Q3: When in a project should this checklist be applied?
A3: Before launch. The article compiles the technical standards a site must pass, starting with viewport and responsive foundation, so they are verified up front rather than retrofitted once hundreds of pages exist.