# Website Layout Examples That Actually Convert - **URL:** https://boomcycle.com/blog/tips-for-creating-an-effective-website-layout/ - **Published:** 2026-09-17 Most advice about website layout is written by designers, for designers. This isn't that. I've spent 22 years watching what happens after the design gets approved, when real customers land on a page and decide in a couple of seconds whether to stay. So before writing this, I pulled up 40 service business websites across the Bay Area, in plumbing, roofing, HVAC, dentistry, landscaping, home building and medical aesthetics. Same measurement on each one. What does the first screen say, at a normal desktop size, before anyone scrolls. 15 of the 40 never said what they sell. The biggest words on the screen were a slogan, a welcome, or the company name. That's the layout problem in a nutshell, and it has almost nothing to do with taste. A layout has three jobs, and only three Strip away the trends and every page that works does the same three things in order. It says what you sell. It gives a reason to believe you. It makes the next step obvious. Everything else, the grid, the typography, the parallax, exists to serve those three. When a layout decision makes one of them harder to do, it's the wrong decision, no matter how good it looks in the mockup. That's also the order visitors use. They won't evaluate your credentials before they know what you do, and they won't call before either one is settled. What 40 Bay Area homepages actually show above the fold Here's what the September 2026 sample turned up. 24 of the 40 named a city or region in the first screen, which is better than I expected for local businesses. 37 had a call to action there, and 30 had a tappable phone number. The next step is rarely the problem. The problem is what surrounds it. 12 sites had an H1 that sat below the fold, and three had no H1 anywhere on the page. The median first screen carried 43 words. One carried zero. Another carried 256, which is its own kind of failure. A first screen with no sentence in it: (1) a photograph where the promise should be, (2) a chat widget covering the corner, (3) nine menu items doing the explaining instead. The pattern above is common in appearance-driven trades. The photography is gorgeous. A visitor who arrived from a search for a specific treatment still has to scroll, or read the menu, to confirm they're in the right place. Beauty isn't the issue. Silence is. Four layouts that earn their keep These aren't styles to copy pixel for pixel. They're arrangements that solve a particular business problem, and each one came out of that same sample. The split hero with a form in it A San Jose home services site: (1) the headline names three trades and the city, (2) the estimate form sits in the first screen, (3) ratings from three platforms, (4) a menu carrying far more links than it needs. Promise on the left, form on the right. Nobody has to hunt for the contact page, and the form is doing its work while the visitor is still reading. This is the strongest layout I know of for a business where the buying decision is quick and the job is urgent. It has a cost. A form that large pushes everything else down, so the page has to earn attention with the headline alone. If your service needs explaining first, put the form lower. The lead generation hero with service cards A roofing company: (1) trade and city in the headline, (2) the phone number paired with the quote button, (3) service cards that route four different visitors, (4) a row of proof. Those four cards are the useful part. Residential, commercial, solar and repair are four different customers with four different budgets, and the layout sorts them in one glance instead of making them read a paragraph. Notice the phone number next to the button. Roughly a third of the sites I measured hid the phone behind a contact link. For urgent trades that's a strange thing to do. The left aligned hero with exactly one action Stripe: (1) the offer stated in a sentence, (2) one primary button with a quieter alternative beside it, (3) recognizable customers directly beneath. Text starts at the left edge of the content column, which is where English readers start. The headline is a full sentence about the customer's outcome, not a tagline. One button is visually loud and the second is deliberately quiet. This is the layout to copy when your offer needs a sentence to explain. It's also the easiest to get right, because there's nothing decorative holding it up. The centered hero over a photograph An East Bay landscaper: (1) the service named in the headline, (2) a single button, (3) the towns served, spelled out where customers can see them. The town list is the smart move here. A homeowner in Orinda or Danville gets their answer without clicking, and the same line tells search engines where this business works. The risk is contrast. White type over a sunset photo reads beautifully on the designer's monitor and disappears on a phone in daylight. If you're setting text on an image, it needs a scrim, a gradient, or a darker crop behind the words. Not hope. Unlock the Potential of Your Business 💥 Join Boomcycle’s Satisfied Clients & Experience Unparalleled Growth! Get Started Today How many menu items is too many The median site in my sample put 8 links in the header. 21 of the 40 carried more than 7, and the largest carried 76 visible links in the first screen. That last one is a directory, not a navigation. You've probably heard the rule that people can only hold about seven items in mind. It gets quoted constantly and it's the wrong rule for a menu, because a menu is sitting right there and nobody's memorizing it. The real cost of a long menu is scanning time and the decision it forces. What I'd do instead: name the things you're paid for, group the rest, and let the footer carry the long tail. If two menu items lead to nearly the same page, you've got a content problem showing up in the navigation. Below the fold, the layout becomes a rhythm People don't read down the page, they scan in an F shape, catching the first words of headings and the first words of paragraphs. The Nielsen Norman Group documented this in eyetracking studies and it has held up for two decades. Which makes headings load bearing. A heading that says "Our Process" tells a scanner nothing. A heading that says "We start with a site survey, usually within 48 hours" tells them everything, and it's the same amount of screen space. Keep sections short enough to hold one idea, alternate the shapes so a wall of text never forms, and put your strongest proof where the scan lands. That's a photo of real work, a number you can defend, or a customer saying it in their own words. The layout decisions that show up in Core Web Vitals Three measurements matter, and layout drives all three. Largest Contentful Paint should land under 2.5 seconds, and it's usually your hero image, so its dimensions and format are a layout decision. Cumulative Layout Shift should stay under 0.1, which means reserving space for anything that loads late. The third one changed. Interaction to Next Paint replaced First Input Delay in March 2024, and it should stay under 200 milliseconds. If you're working from an older checklist that still lists FID, that's a sign the rest of the checklist needs a look too. Google's own current thresholds are the place to check. The layout fixes are unglamorous. Size your images, load fonts with a fallback showing, and stop dropping banners in above content that's already on screen. Layout choices that keep everyone on the page Contrast is where most sites fail. Body text needs a 4.5:1 ratio against its background and large text needs 3:1, which you can check in seconds with the WebAIM contrast checker. Grey on grey is the single most common casualty of a pretty mockup. Then the boring three. Keep body text at 16px or larger. Make sure every link and button is reachable with the Tab key and shows a visible focus ring. Use headings in order, so the page structure is real and not just big text. None of this costs you design quality. It does mean the layout has to survive contact with a real person on a real device. The mobile layout is the layout More than half your visitors are on a phone, so the desktop arrangement is the exception, not the default. Everything that sits side by side on a monitor stacks, and the stacking order is a decision somebody has to make on purpose. Check three things on a real handset. Does the headline still say what you sell without scrolling. Is the phone number reachable with a thumb. Does anything cover the content, particularly a chat bubble or a cookie banner. Common questions about website layout What is the layout of a website? It's the arrangement of the parts on the page: header, navigation, hero, content blocks, sidebar if there is one, and footer. Layout is where things go and in what order. Design is how they look. What's the best layout for a website? The one that matches how your customers buy. Urgent services do best with a split hero and a form or phone number in the first screen. Considered purchases need the headline, then proof, then the ask. There's no single best arrangement, which is why galleries of beautiful sites are such unreliable guides. How many types of website layout are there? You'll see lists of 7, 12, or 13 depending on who's counting, because most are variations on a handful of ideas: single column, split screen, grid, sidebar, full screen hero, magazine, and asymmetric. The four in this article cover the great majority of service business sites. Should I start from a template? Use one for reference, not as a foundation. A template is built around somebody else's content, and you end up writing to fill its boxes. We build from a blank canvas so the layout follows what the business actually sells, which is the whole point of our approach to web design. Start with the sentence, not the grid If you do one thing after reading this, open your homepage on a phone and cover everything below the first screen. Then ask whether a stranger could say what you sell, where you do it, and what happens next. 15 of 40 Bay Area businesses would fail that test today. It's the cheapest advantage available, and it costs a sentence. If you want a second opinion on yours, how local businesses use design to win work is a good next read, and our web design primer covers the ground beneath it.