Visit Website →
← Back to blog

Footer Design: What to Include and How to Lay It Out

October 20, 2026
Footer Design: What to Include and How to Lay It Out

A good footer is a short, consistent block at the bottom of every page that answers the questions a visitor still has after reading: how do I reach you, where are you, what else is here, and what do I do next? Keep it curated, readable on a phone, and identical across the site. That is most of footer design. The rest is choosing the right pieces for your kind of business and getting the details right.

Below is a practical guide: what belongs in a footer, how to arrange it, how to keep it accessible, and how it fits into local search. It is written for owners of local service businesses, restaurants and freelancers, but the principles hold for any site.

Forge-web-studio
Make Every Page Easier to Contact
Forge Web Studio builds mobile-friendly websites for Texas businesses, with clear contact paths and lead flow designed to help visitors take action.
Visit Forge Web Studio

TL;DR

  • Treat the footer as secondary navigation and a second chance to convert: contact path, a handful of key links, one repeated call to action.
  • Curate. Pick the links that answer remaining questions instead of mirroring the whole menu in tiny type.
  • Put the phone number and email as tap-to-call and tap-to-email links, and keep the footer identical on every page.
  • Check contrast, keyboard access, tap target size and sticky behavior so the footer works for everyone.
  • Match the footer's business details to your Google Business Profile and your LocalBusiness structured data.

Table of Contents

Most design time goes to the top of the page. Yet visitors do reach the bottom, and when they do they are usually in one of two situations. Nielsen Norman Group's research on footers describes them as a "second chance" to convince someone who read the page but did not act, and a "last resort" for people hunting for hard-to-find information such as contact details or policy pages.

That framing is useful because it tells you what to put in the footer and what to leave out. A footer costs nothing in user experience: people who found what they needed higher up never notice it. People who did not find it get one more chance.

The same source warns against the most common mistake, which is treating the footer as a dumping ground for orphaned links. If a link has no home elsewhere, the answer is usually to ask whether it deserves a place at all.

What a footer is actually for — overview diagram

Here is the checklist we work from. Not every site needs every row; the point is to decide on purpose.

ElementWhy it earns its placeNotes
Business name and logoAnchors the visitor and signals who is behind the siteLink the logo to the home page
Phone numberThe fastest path to a lead for service businessesMake it a tap-to-call link
Email or contact form linkGives a second contact routeUse a visible address or a clear "Contact" link
City or service areaBuilds local trust and supports local searchMatch your Google Business Profile exactly
HoursAnswers "are they open?" without a clickKeep identical to your listing
Key page links (3 to 6)Helps people who scrolled past the headerServices, pricing, about, reviews
One repeated call to actionConverts the uncommittedA single button, not three
Trust signalsLicenses, insurance, associations, review badgesOnly ones you actually hold
Social linksOptional proof of activityInclude only active profiles
Legal linksPrivacy policy, terms, accessibility statementSmall, but legible
Copyright lineConventionKeep the year current

If you run a business that serves several cities, add a short list of city or service pages. That is one of the few cases where a longer link list pays off, because those pages are real entry points for customers and for search engines.

Contact details are the number one reason people scroll to the footer, so give them extra care.

The U.S. Web Design System footer guidance recommends keeping contact information to clickable phone and email links and sending long physical addresses to a dedicated contact page, which works better on small screens. For a local business with a storefront or a defined service area, we would still show the city and state in the footer, and put the full street address on the contact page.

A few practical rules:

  1. Use tel: and mailto: links. On a phone, one tap should start the call. Write the number with an area code, such as (210) 555-0100, in a format people recognize.
  2. Make the number large enough to tap. Crowding three links on one line is a common cause of mis-taps.
  3. Mark up the address properly. The HTML <address> element is meant for contact information for a person or organization, which makes it the right wrapper for this block.
  4. Keep it consistent. The name, address and phone should read the same in the footer, on the contact page, and in your Google Business Profile.

Layout patterns that work

The layout depends on how much a visitor might still need. Three patterns cover nearly every small business site.

Logo, a few links, copyright. This suits a one-page site, a landing page or a portfolio where the main action happens higher up. Add a phone number and you have a functional footer.

Three or four columns: a brand and contact column, a services column, a company column and a legal or resources column. This suits service businesses with several offerings. The USWDS footer component describes a range from a slim footer to a "big footer" that replicates site navigation, and notes that the footer need not mirror the header. We read that as permission to be selective.

A band above the link columns with one sentence and one button: "Get a free quote," "Book a table," "Request an inspection." This puts the "second chance" idea to work. It is the pattern we reach for most often for lead-driven sites.

If you want to see structural options side by side, the British Red Cross design system lists the building blocks of a footer: primary links, secondary links, social links, copyright text and logo, each optional. That is a useful reminder that nothing in a footer is mandatory except what your visitors need.

Most local-business visitors arrive on a phone, often while they are in a hurry. A footer that looks tidy on a desktop can fall apart there.

  • Stack the columns. One column, with the contact block first.
  • Collapse long lists. If you have many city pages, use an accordion or a link to an index page rather than 30 stacked links.
  • Space the links. Give each link room so a thumb hits the right one. For reference, the WCAG 2.2 target size criterion sets a minimum pointer target of 24 by 24 CSS pixels, with exceptions such as adequate spacing between smaller targets. Treat that as a floor, not a goal.
  • Keep the call button reachable. A tap-to-call button in the footer is good, but do not rely on it alone for a roofer or plumber; the header needs one too.

We go deeper on this in our piece on why mobile optimization matters for local businesses, and in the mobile accessibility checklist for business owners.

When a footer gets crowded, the temptation is to reduce the font size. Don't. The footer is not hidden content, and the Nielsen Norman Group source above cautions against tiny, illegible type; the fix is curation. Pick the links that genuinely help someone who has reached the bottom and still has questions.

A simple filter: for each link, finish the sentence "A visitor who scrolls this far might need ___." If you cannot finish it, cut the link. How you choose and group links also affects how people and crawlers move through your site, a topic covered in this practical guide to internal linking.

The footer is code like any other part of the page, and it gets skipped in accessibility reviews more often than it should. Check these:

  • Contrast. Light gray text on a dark background is a classic footer failure. WCAG asks for at least a 3:1 contrast ratio for interactive components such as icons, and body-size text has stricter requirements. Our guide to accessible color contrast is not needed here; use our own quick tests and fixes for color contrast to check each pair.
  • Keyboard access. Every link and button should be reachable with the Tab key, in a logical order, with a visible focus outline.
  • Icon-only links. A row of social icons needs accessible names, for example an aria-label that says "Facebook" or "Instagram," otherwise a screen reader announces nothing useful. Further reading on interactive elements and their SEO impact is in this overview of web accessibility and SEO.
  • Images. If you use an <img> in the footer, give it a descriptive alt. If it is purely decorative, use an empty alt="" so screen readers skip it, as the MDN reference for the image element explains. Better still, make decorative graphics CSS backgrounds.
  • Sticky footers. A footer fixed to the bottom of the screen can hide the element a keyboard user just tabbed to. WCAG 2.2 added a Focus Not Obscured criterion for exactly this, and the CSS scroll-padding technique is one way to keep focused content visible.

Consistency beats cleverness

The footer should look and behave the same on every page. The Nielsen Norman Group piece treats it as a signature at the bottom of the site that people learn once and then rely on. A custom footer for every page makes visitors re-learn where things are. The one acceptable variation is the call to action band above it, which can change to suit the page, as long as the footer below stays put.

For a business that depends on local customers, the footer is a quiet but useful place to reinforce who you are and where you work. It does not rank a site by itself, but consistent details help search engines and customers trust that the business is real.

  • Show your business name, city and phone exactly as they appear in your Google Business Profile.
  • Link to your main service pages and city pages.
  • Pair the visible details with structured data. Google's LocalBusiness documentation advises defining your business with name, address, telephone and opening hours, and using the most specific business type available, such as Restaurant. It also advises including country and area codes in phone numbers.

We published a copy-ready JSON-LD guide for local businesses if you want to see what that markup looks like, and our local SEO tips for small businesses cover the wider picture.

The same ingredients get mixed differently depending on what your customers want.

Roofing and home services. Lead with a tap-to-call number and a "Request an inspection" button. Add your service area cities, license and insurance details if you hold them, and a link to your reviews. After a hailstorm, people are scrolling quickly and stressed; the footer should make the next step obvious.

Restaurants. Hours, address, phone, a reservation or order link, and the menu page. Keep these the same as your listing, since diners check them last-minute on a phone.

Freelance designers and consultants. A short line on what you do, an email link, a link to your portfolio and a single "Start a project" button. Resist a long social icon row; one or two profiles you actually use are enough.

Footer ideas by business type — overview diagram

Multi-service local companies. Two or three columns: services, locations, company. Keep the call to action band, and link to a locations index instead of listing every suburb.

  1. Link dumping. Thirty links, no hierarchy, no purpose.
  2. Tiny, low-contrast text. Looks tidy in the mockup, fails in sunlight on a phone.
  3. No clear contact path. A footer with only a copyright line wastes the last-resort moment.
  4. Outdated details. An old phone number, wrong hours or last year's copyright date quietly erodes trust.
  5. Different footers on different pages. Visitors lose their bearings.
  6. Icon-only links with no names. Invisible to screen reader users.
  7. Heavy widgets. Embedded maps, feeds and chat scripts in the footer can slow every page. Link out or load them on demand.

Our perspective

We build small-business sites for Texas companies, and the footer is where we see the gap between a site that looks finished and a site that works. Owners often ask us for something decorative. What we tend to recommend is plainer: a footer that gives a hurried visitor a phone number they can tap, a short list of pages that answer the leftover questions, and one clear next step.

We work directly with the founder on every project and keep the scope clear, so the footer is decided early, not bolted on at the end. Your business details should be written once, kept in one place, and reused in the footer, the contact page, structured data and your Google Business Profile. That way a change of phone number or hours is a five-minute job instead of a hunt.

Our rule of thumb: if a footer element does not help someone call, book, ask or trust, it is decoration, and decoration can wait.

— Dylan

  1. List what visitors ask at the bottom of the page. Think of the last ten customer calls. What did people need that they could not find?
  2. Write the contact block first. Name, city, tap-to-call phone, email or form link, hours.
  3. Choose 3 to 6 links. Use the filter above and cut the rest.
  4. Add one call to action. Match it to the action that earns you money.
  5. Decide the layout. One row, columns, or CTA band plus columns.
  6. Build it mobile first. Stack, space, and test with a thumb.
  7. Check accessibility. Contrast, keyboard, names for icons, sticky behavior.
  8. Match the markup. Add LocalBusiness structured data that mirrors the visible details.
  9. Review it every quarter. Hours, phone, links and the copyright year.

If you would like a second pair of eyes on the rest of your site too, our website review checklist covers what to look at beyond the footer.

A footer is one piece of a site built to turn visitors into leads. At Forge Web Studio we design custom, mobile-first websites for Texas businesses, with clear contact paths and trust signals built in. Published pricing starts at $500 for a Starter Website, $1,200 for a Growth Website and $2,500 for a Custom Business Website, all one-off, with a $250 project deposit; see the pricing page. Already have a site that is not pulling its weight? Look at our website redesign services or browse the demo gallery to see industry-specific examples.

FAQ

A typical footer holds your business name or logo, contact details, a short set of links, optional social links, legal links and a copyright line. Each element is optional in the design systems we reviewed, so include only what helps your visitors. For a local business, contact details and hours matter most.

Should the footer be the same on every page?

Yes. Consistency is one of the most important usability features of a footer, because visitors learn where it is and what is in it. You can vary a call to action band above it, but keep the footer itself identical across the site.

There is no fixed number, but fewer is usually better. For most small business sites, three to six main links plus legal links is enough. If you serve many cities, link to a locations page rather than listing every one.

Use an <img> tag with a descriptive alt attribute if the image carries meaning, such as a logo or a license badge. If it is decorative, use a CSS background image or an empty alt="" so screen readers skip it.

Sometimes, for example a tap-to-call bar on mobile. But a fixed bar can cover keyboard-focused content and cause accessibility failures, so test tabbing through the page and add scroll padding if needed.

Sources