Building and Structuring Pages
Assembly Time
You've planned your site, chosen a platform, secured a domain, designed a visual direction, and written your content. Now you put it all together.
This chapter covers the practical mechanics of building pages — the elements every good site needs and how to structure them for maximum impact.
The Header
Your header (the top bar on every page) contains your navigation and sets the first impression. Keep it simple.
Logo or site name on the left. Navigation links in the center or right (5–7 max). CTA button on the far right, visually distinct from nav links.
Sticky headers (that stay visible as you scroll) are standard and useful. They keep navigation accessible without scrolling back up.
Mobile navigation collapses into a hamburger menu (the three horizontal lines). Make sure your mobile menu works smoothly — more than half your visitors are on phones.
The Footer
Footers are underrated. They're the last thing visitors see before leaving and a reliable place for important links.
Essential footer elements: navigation links (repeating your main nav plus secondary pages like Privacy Policy and Terms), contact information (email, phone, address if applicable), social media links, copyright notice, and a brief description of your business or a final CTA.
Don't overload the footer, but don't leave it empty either. A clean, organized footer signals professionalism.
The Homepage Layout
Most effective homepages follow a predictable structure because it works. Visitors know where to look for information because the pattern is familiar.
Section 1: Hero. Headline, subheadline, CTA, strong visual. Full-width. This is your hook.
Section 2: Social proof bar. Client logos, "As seen in" logos, or a key statistic. Brief and visual. Builds immediate trust.
Section 3: Services/offerings overview. Three or four cards, each with an icon, a short title, and a one-sentence description. Links to dedicated pages.
Section 4: How it works. Three-step process, visually presented. Makes the next step feel simple.
Section 5: Featured work or case study. Show, don't just tell. A project, a result, a transformation.
Section 6: Testimonials. Real quotes from real people with names and photos if possible.
Section 7: Blog preview or resources. Show your latest content. Demonstrates expertise and activity.
Section 8: Final CTA. A clear call to action with a different angle than the hero. "Ready to get started?" with a contact button.
You don't need every section. But this structure gives you a proven framework to build from.
Interior Page Layouts
Service/Product Pages
Hero with service-specific headline. Then benefits (not features), process, a testimonial or case study, pricing (optional), FAQ, and CTA.
About Page
Your photo and opening story. Then your mission, your credentials, your team (if applicable), and a personal touch. End with a CTA to contact or work together.
Contact Page
Multiple contact methods. Form (essential), email, phone, location/map (if relevant), social links, and business hours. Keep the form short — name, email, message. Every additional field reduces submissions.
Blog Posts
Title, featured image, content. Use subheadings every 200–300 words. Include images to break up text. End with a CTA (subscribe, read another post, contact you). Include author info and publish date.
Portfolio/Work Pages
Grid or gallery of projects. Each clicking through to a detail page with the project description, your role, the outcome, and visuals. Let the work be the star — minimal text, maximum visual impact.
Forms
Forms collect leads, inquiries, bookings, and sign-ups. They need to be simple, functional, and trustworthy.
Form Best Practices
Ask for the minimum. Name and email for a newsletter signup. Name, email, and message for a contact form. Every field you add reduces completion rates by roughly 10%.
Use clear labels. "Your Name" not "Name." "Your Email Address" not "Email." Small touches that feel human.
Include a confirmation. After submitting, show a "Thank you" message or redirect to a confirmation page. People need to know their submission went through.
Set up notifications. Make sure form submissions notify you immediately via email. A lead that sits unread for three days is a lost lead.
Most platforms have built-in form builders. For more sophisticated needs, tools like Typeform, Tally, or Jotform integrate with any site.
Pages That Convert
The Anatomy of a Converting Page
Every page that wants visitors to take action should follow this flow: attention (headline that hooks), interest (content that educates or resonates), desire (benefits, social proof, results), and action (clear CTA).
This isn't manipulation — it's clear communication that respects your visitor's time by making it easy to understand what you offer and how to get it.
AI Prompt: Page Review
Review this website page and suggest improvements.
Page type: [homepage, about, service, contact, blog]
Page URL or content: [paste the content or describe it]
Goal of this page: [what I want visitors to do]
Current conversion rate: [if you know it, or "not sure"]
Please evaluate:
1. Is the headline clear and compelling?
2. Is the content structured effectively?
3. Are the CTAs visible and compelling?
4. What's missing that should be there?
5. What should be removed or shortened?
6. Specific rewrite suggestions for the weakest sections
Mobile-First Thinking
Over 60% of web traffic is mobile. If your site doesn't work perfectly on phones, you're losing the majority of your visitors.
Test constantly on mobile. Every platform has a mobile preview mode. Use it after every change.
Stack, don't shrink. Content that sits side by side on desktop should stack vertically on mobile. Three columns become three rows.
Tap targets. Buttons and links need to be large enough to tap with a thumb. At least 44x44 pixels.
Readable text. If you have to pinch-zoom to read, your text is too small.
Simplified navigation. The hamburger menu should be easy to open, navigate, and close. Every link should be tap-friendly.
Most modern platforms handle responsive design automatically, but always verify the result. Automated doesn't mean perfect.
Next: making sure people can actually find your site.