What is responsive web design?
Responsive web design means one website that rearranges itself to fit whatever screen opens it. The same page, at the same address, shows three columns on a desktop monitor, two on a tablet and a single stacked column on a phone, with text that stays readable and buttons that stay easy to tap.
Nothing is shrunk into a tiny copy of the desktop view, and nobody has to pinch and zoom to read your opening hours.
So, does your site pass? A quick answer: open it on your own phone, and if you can read every line without zooming, tap every button with a thumb, and scroll only up and down (never sideways), you are most of the way there. The rest of this guide explains what sits behind that result, the details that break most often on Thai phones, and when patching stops being worth it. If you want the wider picture first, our articles on web design and UX cover layout, usability and accessibility in their own posts.
The three ingredients: fluid grids, flexible images, media queries
The term comes from a 2010 article by the web designer Ethan Marcotte in A List Apart. He described three techniques that, used together, let one layout adapt to any width. They are still the foundation today.
Fluid grids
Older sites were built at a fixed width, often 960 pixels. A fluid grid sizes columns in proportions instead: the main content takes roughly two thirds of the space and the sidebar one third, whatever the screen measures. When the window narrows, the columns narrow with it rather than spilling off the edge.
Flexible images
A photo placed at a fixed 1,200 pixels wide will poke out of a 390 pixel phone screen and force sideways scrolling. Flexible images are told never to be wider than their container, so they scale down neatly inside the column.
Media queries and breakpoints
Proportions only go so far. Three columns at phone width become slivers. A media query is a rule that says "when the screen is narrower than a certain width, change the layout". The widths where the layout changes are called breakpoints. You do not need to know the code, only the idea: a good site has breakpoints chosen where its own content starts to look cramped, not at the size of one particular iPhone.
A simple example: a restaurant menu page might show dishes in a three-column grid on a laptop, drop to two columns on a tablet, then switch to one column with the price beside each dish name on a phone. Same content, three arrangements, one address.
Responsive, adaptive or a separate mobile site
There are three ways a site can deal with different screens, and owners are sometimes sold the older two without realising it.
- Responsive: one set of pages, one address, a layout that flows continuously between widths.
- Adaptive: a handful of fixed layouts, each designed for a set width. The server or browser picks the closest one. It can look sharp on the sizes it was planned for and awkward on the ones in between, such as a large Android phone held sideways.
- Separate mobile site: a second copy of the site, often at an address like m.example.com. Every change has to be made twice, and the two versions drift apart over time.
For almost every Bangkok business site, responsive is the sensible default. It is what current WordPress themes and Shopify themes are built to do, and it means one set of content to keep up to date in both Thai and English.
| Responsive | Adaptive | Separate mobile site | |
|---|---|---|---|
| Pages to maintain | One set | One set, several layouts | Two sets |
| Web address | Same address | Same address | Different address, e.g. m. |
| In-between screen sizes | Handled smoothly | Can look awkward | Depends on redirect rules |
| Content drift risk | None | Low | High |
| Fit for a typical business site | Default choice | Rarely needed | Avoid for new builds |
Why mobile-first matters for Google
Google now uses the mobile version of a page for indexing and ranking. Its Search Central documentation calls this mobile-first indexing. In practice it means that if your phone layout hides text, drops images or leaves out the structured data that the desktop layout has, Google works from the thinner version.
A responsive site avoids most of that risk because the content is the same at every width; only the arrangement changes. The problems that still turn up are small but real:
- Accordion or tab sections on mobile that load their text only after a tap. Google's guidance is to make sure the same primary content is present on mobile.
- Different headings on phone and desktop, set up by a page builder that lets editors hide blocks per device.
- Images replaced by lighter ones on mobile that have no alt text.
Mobile-first is also a design habit, not only a Google rule. Designing the phone layout first forces you to decide what really matters on a page, because there is room for one clear message and one clear action above the fold. The desktop layout then gets extra space, not extra content. For a clinic that might be the booking button; for a condo agent, the listing search.
Details that break on phones
A layout can reflow perfectly and still be hard to use. These are the details that separate a site that technically fits a phone from one that people can actually use on the BTS with one hand.
Touch targets
Buttons and links need enough size and spacing for a thumb. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels, with exceptions; most designers aim larger for primary buttons. Menus with links packed tightly together are the usual offender. Our website accessibility guide covers target size alongside zoom and contrast.
Font size and Thai line breaking
Body text below about 16 pixels gets hard to read on a phone, and Thai script with its stacked vowels and tone marks needs a little more line height than English. Thai also has no spaces between words, so the browser has to decide where lines can break. Without careful setup, a long Thai heading can split in the middle of a word on a narrow screen, or refuse to break at all and overflow its box. Check every Thai headline on a small phone, not just the English ones.
In-app browsers
Many Thai visitors never open your site in Chrome or Safari. They tap a link inside LINE or Facebook, and it opens in that app's built-in browser, with its own toolbar taking space at the top and bottom. Sticky headers, pop-ups and cookie banners that fit fine in Chrome can cover half the screen there. Forms and file uploads sometimes behave differently too.
These are usability questions as much as layout ones; if the terms are new, our note on UX design basics explains how designers think about them.
Test your own site in ten minutes
You do not need a developer to get a first answer. Work through these checks on the pages that matter most: home, your main service or product page, and contact. One point deserves a word first: speed. A responsive site should also send smaller images to smaller screens, using a technique called responsive images (the srcset attribute), so a phone on 4G is not downloading a photo sized for a 27 inch monitor. If your mobile pages feel slow, image size is the first thing to ask about.
- Desktop browser device modeIn Chrome, right-click, choose Inspect, then the phone icon. Drag the width from wide to narrow and watch for anything that overlaps, gets cut off or creates a sideways scrollbar.
- Your own phone, both waysOpen the pages on a real phone upright and sideways. Read a full paragraph without zooming.
- Thumb testTap every menu item, button and form field with your thumb. Note anything you miss or hit by accident.
- LINE and Facebook linksSend the link to yourself in LINE and open it there, then do the same from a Facebook post. Check banners, the header and the form.
- Thai textSwitch to the Thai version and check headings for words split in the wrong place or text running out of its box.
- Forms end to endFill in the contact or booking form on the phone and send it. Confirm the enquiry actually arrives.
- Mobile speed feelLoad the page on mobile data, not office Wi-Fi. If the main image takes seconds to appear, image sizes need work.
When you need a responsive redesign
Some problems from the test are quick fixes: a menu spacing tweak, a heading size, a banner that needs a smaller mobile version. Others point to a site that was never built to be responsive, and patching those tends to cost more over time than rebuilding. Signs you are in the second group:
- The site uses a separate m. mobile version, or shows a zoomed-out desktop page on phones.
- Fixing one screen size breaks another, because the theme was built at a fixed width.
- Tables of prices or room rates force sideways scrolling and cannot be restyled.
- The Thai version was added later as a copy of the English layout and wraps badly throughout.
- The page builder has separate mobile settings for every block, and nobody remembers which are hidden.
A responsive website redesign is also the moment to tidy the visual side. Browsing website design ideas helps you decide what you like; setting up website design systems such as shared button, heading and colour rules keeps every new page consistent across screen sizes. It is worth a look at this year's web design trends too, mostly to spot which ones work on a phone and which only look good on a large monitor.
Getting it fixed
In Thailand, responsive web design is not normally priced as a separate item. It is part of how a site is designed and built, so the real question is what the whole project costs.
Our Starter package for a small business website starts from THB 10,000 (indicative, one-time) for up to five pages with a mobile-first custom design on WordPress, contact, WhatsApp and LINE buttons, on-page SEO and PDPA cookie consent. Larger sites and two-language builds fit the Business package, from THB 30,000. The final price is set in the written quote for each project, and payment terms are set out there as well.
A typical project takes around 15 days. If your current site fails the checks above, our page on website design and redesign explains how we approach a rebuild, and you can get a written quote once you have listed the pages you need.
Reviewed by
Who builds your site
Litesh Dhir
Builds and ranks the websites: the systems behind the 17 client sites whose Search Console numbers we publish.
More about usKeep reading
Sources
- Ethan Marcotte, Responsive Web Design, A List Apart
- Google Search Central: Mobile-first indexing best practices
- MDN: Responsive design
- W3C: Understanding WCAG 2.2 Target Size (Minimum)