What is a website layout?
A website layout is the arrangement of blocks on a page: where the headline sits, how many columns the content runs in, where the images go and where the main button appears.
It is the skeleton. Colours, fonts and photos sit on top of it, but the layout decides what a visitor sees first and what they have to scroll to find.
People often mix it up with three other words. A theme is the whole visual package installed on a platform such as WordPress, and it usually contains several layouts. A template is one reusable page type inside that theme, for example "blog post" or "product page". Design is the broader job of making all of it look right and work well. When you agree a layout, you are agreeing the structure of a page before anyone argues about colours, and that is the cheapest moment to get it right.
This guide names nine layouts in common use, says what job each one does and where it fails, and ends with a way to pick one for your own site.
How visitors scan a page: the F and Z patterns
Visitors do not read web pages line by line. Eye-tracking research by the Nielsen Norman Group found that on text-heavy pages many people scan in a rough F shape: across the top, across again a little lower, then down the left edge. For sparse pages with few words, such as a homepage hero, designers often plan for a Z instead: top left to top right, diagonally down, then across the bottom.
What this means for placement
- Headline and first sentence: put the answer to "am I in the right place?" in the top band, where both patterns start.
- Left edge on long pages: start subheadings and list items with the words that carry meaning, because the left edge is what F-scanners see.
- Main button: on a Z layout, the end of the Z (bottom right of the first screen) is a natural spot. On an F layout, place it right after the first useful paragraph, not at the very end.
The F pattern is not a goal. It is what happens when a page gives readers nothing better to hold onto. Clear subheadings, short paragraphs and bold key phrases break it into a more useful scan.
Nine layouts and the job each one does
The table gives the short version. Below it, a few lines on each layout and the mistake we see most often with it.
1. Single column
One stream of content, top to bottom. Easy to read and already mobile-shaped. Weak point: long pages feel endless without strong subheadings.
2. Z-pattern hero
Logo top left, menu top right, headline and button below. Good for a homepage with one message. Weak point: it holds only a few words, so it cannot carry detail.
3. F-pattern content
Headline, then scannable blocks with left-aligned subheadings. Right for guides and service detail. Weak point: walls of text if the writer ignores the structure.
4. Split screen
Two equal halves, often image and text, or two audiences side by side. Weak point: on a phone the halves stack, and the second one can end up far below the fold.
5. Card grid
Repeated boxes of equal weight: products, rooms, articles. Weak point: every card looks equally important, so nothing stands out.
6. Magazine
Mixed card sizes with a lead story. Suits a busy blog or news section. Weak point: it needs a steady flow of content, or it looks empty.
7. Featured image hero
A full-width photo with a short line of text. Strong for hotels and restaurants. Weak point: heavy images slow the page, and text on photos is often hard to read.
8. Sidebar
Main column plus a narrow side column for filters, contents or contact. Useful for long guides and shop filters. Weak point: the sidebar drops below everything on a phone.
9. Fixed or sticky header
The top bar stays visible while you scroll, keeping the menu and a call or WhatsApp button in reach. Weak point: a tall sticky bar eats a large share of a small screen.
| Layout | Best for | Watch out for |
|---|---|---|
| Single column | Articles, simple service pages | Long pages without clear subheadings |
| Z-pattern hero | Homepages with one clear message | Too little room for detail |
| F-pattern content | Guides, service detail pages | Dense text blocks |
| Split screen | Two audiences or image plus text | Second half lost on phones |
| Card grid | Products, rooms, article lists | No visual priority |
| Magazine | Busy blogs and news sections | Looks empty without fresh posts |
| Featured image hero | Hotels, restaurants, venues | Slow images, unreadable overlay text |
| Sidebar | Long guides, shop filters | Sidebar pushed to the bottom on mobile |
| Sticky header | Any site with a key contact action | Tall bars covering small screens |
Which layout suits your business and page type?
Most sites use several layouts: one for the homepage, another for listings, another for long pages. The useful question is which layout each page type needs.
- Service firm homepage (law, accounting, B2B, a clinic): a Z-pattern hero with one headline and one button, then single-column sections that explain services in turn. A sticky header keeps the call or WhatsApp button close.
- Restaurant menu page: a featured image hero for mood, then a single column of menu sections that reads well on a phone held in one hand. Our guide to planning a restaurant website covers what else that page needs.
- Hotel rooms: a card grid of room types, each card leading to a page with a featured image, key facts near the top and a booking or enquiry button that stays visible. Our notes on hotel and resort website design cover the rest of that page type.
- Product listing: a card grid with a sidebar for filters on desktop, turned into a filter button on phones.
- Long guide or policy page: F-pattern content with a table of contents at the top or in a sidebar.
When a client asks us for custom web design for a Bangkok business, this mapping is one of the first things we agree, page type by page type, before any visual work starts.
How each layout behaves on a phone
On a phone, almost every layout turns into a single column. The design decision is the stacking order: which block comes first when the columns collapse. Many Bangkok customers find a business on their phone, often after a search or a link shared in a chat, so the phone version is where we start the layout, not where we finish it.
- Split screen: decide which half goes on top. Usually the text with the button, not the photo.
- Card grid: one or two cards per row. Keep the price or key fact visible on the card itself.
- Sidebar: move filters behind a button and put the table of contents at the top, collapsed.
- Featured image hero: crop the photo to a shorter height so the headline and button show without scrolling.
- Sticky header: keep it slim, with the logo, a menu icon and one contact button.
Thumb reach matters too. The main action should be large enough to tap and sit where a thumb lands easily, which is why a bottom contact bar often works better on phones than a small button in the top corner. Hide decoration on small screens if you must, but never hide prices, opening hours or contact details.
Grid, whitespace and hierarchy: the rules under every layout
Whatever layout you pick, three rules hold it together.
A grid
Many web layouts sit on a 12-column grid, because 12 divides cleanly into halves, thirds and quarters. A two-column split uses six and six; a sidebar might take three of the twelve. The grid keeps edges lined up from section to section, which is much of what makes a page look planned rather than assembled.
Whitespace
Space between blocks tells the reader what belongs together. Use a small set of spacing sizes and repeat them, instead of nudging each gap by eye. Crowded pages feel cheap and are harder to scan, especially when Thai and English text sit side by side.
Hierarchy and one main action
Each screen should have one thing that is clearly most important and one primary button. Size, weight and position create that order. If a first screen offers five equal buttons, visitors often choose none of them. Once these rules are written down as reusable parts, you have the start of a design system for your website, which keeps new pages consistent later.
Layout, reading order and accessibility
A layout is visual, but screen readers and keyboards follow the order of the code, not the order on screen. If a designer uses CSS to move the button above the headline on desktop while the code still lists it last, a keyboard user meets things in a different sequence from everyone else. WCAG 2.2 addresses this under success criterion 1.3.2, Meaningful Sequence: when order affects meaning, the reading order in the code must be one that makes sense.
In practice:
- Write the content in the order it should be read, then style it. Avoid reordering blocks with CSS for layout effects.
- Check that pressing Tab moves through links and buttons in the same order the eye would.
- Keep carousels and hover-only menus out of key paths, because they are hard for keyboard and touch users alike.
Our practical guide to website accessibility covers contrast, alt text and forms in more depth.
What are the most common layout mistakes?
- A carousel as the hero. Rotating slides split the first screen between several messages, and many visitors see only the first. One strong message beats five rotating ones.
- Too many columns. Four narrow columns of text look tidy on a wide monitor and turn into a long, confusing scroll on a phone.
- The button buried under a long intro. If the enquiry form or WhatsApp button appears only after 600 words, many people leave before they reach it.
- Different layouts for the same page type. When every service page is arranged differently, visitors have to relearn the page each time.
- Copying a trend without a reason. Reading about this year's web design trends is useful for ideas, but a layout should follow the job of the page first.
How do you test a layout before you build it?
You do not need a lab to check a layout. Three cheap methods catch most problems:
- Paper sketch. Draw the phone version of each key page on paper, box by box. If you cannot decide what goes first, the page has too many jobs.
- Clickable mock. Link a few rough screens together so someone can tap through them on a real phone.
- Five-user test. Ask five people who match your customers to find a price, a room or the contact button while you watch in silence. Where they hesitate, the layout needs work. Our post on UX research for a small business budget explains how to run this without special tools.
If testing shows the problem is not one page but the structure of the whole site, you are looking at a full website redesign rather than a layout tweak, and it is better to know that before spending on small fixes.
Getting your layout designed and built
If you would rather have the layout planned and built for you, our packages cover it. The Starter package, from THB 10,000, gives you up to five pages with a custom, mobile-first design on WordPress. The Business package, from THB 30,000, runs to fifteen pages in English and Thai on a custom WordPress theme, with two revision rounds so you can adjust the layout after seeing it. Prices are indicative, and a typical project takes about 15 days.
Send us your current site or a rough sketch of the pages you need and we will prepare a written quote for your layout and build.
Who reviewed this guide
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 usMore on web design and UX
Sources
- Nielsen Norman Group: F-Shaped Pattern for Reading Web Content
- W3C: Understanding WCAG 2.2 Success Criterion 1.3.2 Meaningful Sequence