Structuring Business Website Sections
Given a business type, output a section-by-section outline covering: purpose, content elements, layout (desktop + mobile), SEO basics, and CTAs. Default to 5 sections (Home, Services, Testimonials, About Us, Contact Us) unless the business model needs a different structure — use the Decision Framework below to check first.
Minimal invocation example:
"Outline the website sections for a local dental clinic."
Output: full section breakdown following the structure below, populated for "dental clinic," including mobile layout notes and per-section SEO guidance.
Before defaulting to the standard 5, ask:
| Business situation | Recommended structure |
|---|---|
| Simple local service, low content volume, budget-conscious | Single-page site: all 5 sections as anchored scroll sections on one page (Home → Services → Testimonials → About → Contact) |
| Service business with distinct offerings needing detail (clinic, agency, consultancy) | Multi-page: Home, Services (with sub-pages per service if 4+), Testimonials, About Us, Contact Us |
| E-commerce | Replace/add: Home, Shop/Products, Product Detail, Testimonials/Reviews, About Us, Contact Us, Cart/Checkout |
| SaaS product | Replace: Home, Features, Pricing, Testimonials/Case Studies, About Us, Contact/Demo Request |
| Restaurant | Replace: Home, Menu, Gallery, Testimonials/Reviews, About Us, Reservations/Contact |
| Portfolio/freelancer | Often drop Testimonials to a smaller strip; add Portfolio/Work as primary section |
Rule of thumb: fewer than 5 total offerings or one core service → single page. 5+ offerings or need for SEO-targeted separate pages → multi-page. State which structure you're using and why before the outline.
Progress:
- Step 1: Identify business type, target audience, and number of distinct offerings
- Step 2: Apply Decision Framework — confirm single-page vs multi-page, and confirm/adjust the 5 sections
- Step 3: For each section, define purpose, content elements, desktop layout, mobile layout, and SEO notes
- Step 4: Assign a primary CTA per section (avoid more than one competing CTA per section)
- Step 5: Note navigation order, sticky header behavior, and anchor-link behavior if single-page
- Step 6: Summarize with a build-priority note (Home + Contact first, since they carry conversion weight)
Home
- Purpose: First impression, communicate what the business does and why it's trustworthy
- Content: Headline, short intro, hero image/video, primary CTA (e.g., "Book Now" / "Get a Quote"), trust indicators (logos, ratings, years in business)
- Desktop layout: Full-width hero, then 3-column highlights (services/benefits), then testimonial strip
- Mobile layout: Stack hero text above image, collapse 3-column highlights into vertical stack, shrink CTA button to full-width tap target (min 44px height)
- SEO: H1 = primary keyword + brand (e.g., "Dental Clinic in [City] | [Brand]"), meta description ≤160 chars, hero image alt text describes service+location
Services
- Purpose: Explain what's offered and help visitors self-select the right service
- Content: List/grid of services, short description each (1-2 sentences), icon or image per service, "Learn more" links if multi-page
- Desktop layout: Card grid (3-4 columns)
- Mobile layout: Single-column stacked cards, icons above text, ensure tap targets don't crowd
- SEO: Each service gets an H2 with keyword variant; if multi-page, each service sub-page targets a distinct long-tail keyword (e.g., "emergency root canal [city]")
Testimonials
- Purpose: Build trust via social proof
- Content: 3-6 customer quotes, name/photo if available, star ratings, source (Google/Yelp) if verifiable
- Desktop layout: Carousel or 3-column grid of quote cards
- Mobile layout: Swipeable single-card carousel, avoid multi-column cramming
- SEO: Mark up with Review/AggregateRating schema (structured data) to enable rich snippets
About Us
- Purpose: Humanize the brand, share story/mission/team
- Content: Short brand story, team photos/bios, mission statement, credentials/certifications
- Desktop layout: Text + image split section, team grid below
- Mobile layout: Stack image above text; team grid collapses to 1-2 columns
- SEO: Target brand + trust keywords ("family-owned," "certified," "since [year]"); include Organization schema
Contact Us
- Purpose: Make it easy to reach the business and convert
- Content: Contact form (name, email, message, minimal required fields), phone/email/address, hours, map embed if physical location
- Desktop layout: Form on one side, contact details/map on the other (2-column split)
- Mobile layout: Stack form above or below details; use
tel:links for phone numbers; map embed collapses to fixed-height block - SEO: Add LocalBusiness schema with NAP (Name, Address, Phone) consistent with Google Business Profile
Example 1: Input: "Local dental clinic" Output: Multi-page structure (5+ services justify separate visibility). Home highlights "Gentle, modern dental care" with CTA "Book Appointment," LocalBusiness schema. Services lists Cleanings, Whitening, Root Canals, Emergency Care as cards, each linking to a short sub-page for SEO. Testimonials show patient reviews with star ratings and schema markup. About Us introduces the lead dentist, credentials, and clinic philosophy. Contact Us includes form, click-to-call phone link, and embedded map. Mobile: sticky "Call Now" button in header.
Example 2: Input: "Freelance graphic designer portfolio" Output: Single-page structure (one person, low content volume). Home/hero shows tagline and featured work anchored at top. Services section lists Branding, Web Design, Illustration as compact cards. Testimonials condensed to a 3-quote strip, not full carousel. About Us shares designer's background and process in a text+image split. Contact Us has a simple form and social links, no map needed. Mobile: single scroll with anchor nav collapsing into hamburger menu.
Example 3: Input: "Direct-to-consumer skincare e-commerce brand" Output: Multi-page, e-commerce structure. Home features hero product shot, bestseller carousel, CTA "Shop Now." Replaces "Services" with Shop/Product Grid (filterable by category), each product links to a Product Detail page (images, ingredients, reviews, Add to Cart). Testimonials become embedded reviews on product pages plus a dedicated trust section on Home with UGC photos. About Us covers brand story/ingredients philosophy. Contact Us includes support form + FAQ link. Mobile: sticky "Add to Cart" bar on product pages, thumb-friendly filter drawer for shop grid. SEO: Product schema with price/availability, category pages targeting "[ingredient] skincare" keywords.
Example 4: Input: "B2B SaaS project management tool" Output: Multi-page structure. Home leads with value prop headline + product screenshot, CTA "Start Free Trial." Replaces "Services" with Features (grid of capability cards with short GIFs/screenshots) and a separate Pricing page (tiered plan comparison table). Testimonials become Case Studies — short customer success stories with metrics, plus a logo bar of known clients on Home. About Us covers company mission and team. Contact Us becomes "Request a Demo" form routed to sales, with a separate lightweight support contact for existing users. Mobile: collapse pricing table into stacked plan cards with horizontal scroll for comparison rows.
Example 5: Input: "Neighborhood Italian restaurant" Output: Single-page or light multi-page structure. Home shows ambiance photo, tagline, CTA "Reserve a Table" (OpenTable/Resy embed). Replaces "Services" with Menu (categorized: appetizers, mains, desserts, drinks) — PDF or styled HTML, not both if avoidable for SEO crawlability. Adds Gallery section for food/interior photos. Testimonials pull from Google/Yelp reviews with schema markup. About Us tells the chef's story and cuisine philosophy. Contact Us includes hours, address, click-to-call, embedded map, and reservation CTA repeated. Mobile: sticky "Reserve" button, tap-to-call, swipeable gallery.
- Always run the Decision Framework before defaulting to 5 sections — don't force-fit e-commerce, SaaS, or restaurants into the generic template
- Design mobile layout notes alongside desktop for every section — never treat mobile as an afterthought
- Keep one primary CTA per section; secondary actions (e.g., "Learn more") should visually defer to it
- Bake in baseline SEO per section (H1/H2 targeting, schema markup, meta description) rather than treating SEO as a separate late-stage task
- Order sections to match user decision-making flow: awareness (Home) → offering (Services/Shop/Features) → trust (Testimonials) → credibility (About) → action (Contact)
- For single-page sites, specify anchor-link navigation and smooth-scroll behavior explicitly
- For multi-page sites with many offerings, recommend individual sub-pages per offering for SEO long-tail targeting
- Do NOT overload the Home page with all content — it should summarize and link to other sections/pages
- Do NOT skip a clear CTA in each section, but avoid stacking multiple competing CTAs in one section
- Do NOT assume every business needs identical sections — adapt naming/order to the actual business type (Shop instead of Services, Menu instead of Services, Features/Pricing instead of Services)
- Do NOT ignore mobile layout — cramped multi-column grids and tiny tap targets are the most common failure mode
- Do NOT treat SEO as optional — missing schema markup and generic headings quietly kill local/organic visibility
- Do NOT default to multi-page for a business with only 1-2 offerings — a single, well-organized page converts better and costs less to build