Good website footer design is mostly about answering the questions visitors still have when they reach the bottom of a page: how do I contact you, where is the page I could not find in the menu, and can I trust this business. A footer that does this well catches people who were about to leave. A footer stuffed with every link on the site, or one that holds nothing but a copyright line, misses that chance.
This guide gives you a practical checklist for what to include, how to organize it, and how to adapt the footer to different types of sites, with example layouts you can borrow.
Quick answer: a well designed website footer includes contact details, a short set of grouped navigation links, legal pages (privacy policy, terms), social links and, where it fits, a newsletter signup or call to action. Keep it scannable with three to five columns on desktop that stack cleanly on mobile, readable contrast and clear tap targets.
What the footer is for
The footer is the last consistent element on every page. People scroll there for a few predictable reasons:
- They want contact information, an address or opening hours
- They are looking for a page that is not in the main navigation, such as careers, returns or documentation
- They want legal information: privacy policy, terms, cookie settings, company registration
- They are checking credibility before buying or getting in touch
- They finished reading and want to know where to go next
Treat the footer as secondary navigation plus a trust panel. It does not need to be beautiful in a showy way, but it needs to be easy to scan in a few seconds.
Website footer design checklist
Use this checklist when you design or audit a footer. Not every site needs every item, but you should make a conscious choice about each one.
Essential items
- Logo or business name, optionally with a one line description of what you do.
- Contact details: email, phone, and a physical address if you have one customers visit. Make the email and phone clickable.
- Grouped navigation links: the key pages organized into a few labeled columns.
- Legal links: privacy policy, terms of service, cookie preferences, and any required notices for your region.
- Copyright line with the business or legal entity name. Generate the year dynamically so it never looks outdated.
Common additions
- Newsletter signup: a single email field with a clear reason to subscribe.
- Social media links: only the profiles you actively maintain.
- Call to action: “Book a call”, “Get a quote” or “Start free trial” for sites focused on leads.
- Trust signals: payment method icons, security badges, certifications or memberships that customers recognize.
- Opening hours and a map link for local businesses.
- Language or region switcher for international sites.
- Back to top link on long pages.
Things to leave out
- Every page on the site. That is what a sitemap is for.
- Long blocks of keyword stuffed text. It does not help SEO and makes the footer look spammy.
- Social icons for abandoned accounts.
- Auto playing media or heavy embeds such as live social feeds, which slow every page.
- Duplicate copies of the full main menu with no grouping.
How to organize footer content
Most effective footers follow a column structure on desktop. Group links by what the visitor is trying to do, and give each group a short label.
| Column | Typical links | Who it helps |
|---|---|---|
| Product or Services | Main offers, pricing, features, templates | Buyers comparing options |
| Company | About, careers, press, contact | Candidates, partners, journalists |
| Resources | Blog, guides, documentation, help center | Existing customers and researchers |
| Support or Legal | FAQ, returns, shipping, privacy, terms | Customers with a specific issue |
| Contact and social | Email, phone, address, social icons, newsletter | Anyone ready to get in touch |
Keep each column to about four to seven links. If a column grows beyond that, it is a sign you need a dedicated page, such as a resources hub, and a single link to it.
Visual design guidelines
Hierarchy and spacing
Use a clear difference between column labels and links, for example a slightly bolder or larger label and regular weight links. Give columns generous spacing. A cramped footer is hard to scan even when the content is good.
Contrast and readability
Dark footers are popular because they visually close the page, but light gray text on a dark gray background often fails contrast checks. Aim for at least the WCAG AA contrast ratio of 4.5 to 1 for body text. Keep link text at a readable size, roughly 14 to 16 pixels, rather than shrinking it because it is “just the footer”.
Mobile layout
On phones, columns should stack in order of importance, with contact details and the main call to action first. Accordions for link groups can save space on large footers, but keep contact information and legal links visible without tapping. Make tap targets large enough and well spaced; Google’s guidance on accessible tap targets is a good reference.
Accessibility
- Wrap the footer in a
<footer>element so assistive technology recognizes it as a landmark. - Use a
<nav>element with anaria-labelfor footer link groups. - Give icon only links, such as social icons, an accessible name.
- Make sure every link has a visible focus state for keyboard users.
Website footer design examples by site type
The right footer depends on what the site needs to achieve. Here are example layouts for common site types.
SaaS or software product
Four or five columns: Product (features, pricing, integrations, changelog), Resources (docs, blog, guides), Company (about, careers, contact), Legal (privacy, terms, security). A newsletter field or “Start free trial” button sits above or beside the columns. A status page link is helpful for existing customers.
Online store
Focus on customer service: shipping, returns, order tracking, size guides and contact. Add payment method icons and any trust badges customers recognize. A newsletter signup with a clear benefit works well here. Keep category links to the main departments only.
Local business
Lead with the address, phone number, opening hours and a link to directions. Add a short list of services, a booking or quote button, and links to review profiles. For local search, keep the business name, address and phone number identical to your listings elsewhere.
Agency or service business
A strong closing call to action (“Have a project in mind? Book a call”) followed by services, selected work, company links and contact details. Many agencies use a large, bold footer headline as a final pitch, which works when it is backed by an easy way to get in touch.
Blog or content site
Popular categories, an about link, a newsletter signup and social links. Keep it light so it does not compete with related articles placed above it.
Footer SEO: what matters and what does not
Footer links are crawled like any other links, so they help search engines discover important pages. But links repeated on every page carry less weight than contextual links inside your content, and stuffing the footer with keyword anchor text can look manipulative. Link to genuinely useful pages with plain, descriptive labels. Make sure legal and contact pages are reachable, since they support trust for both visitors and search quality evaluation.
Building a footer quickly
If you are starting a new site, a good template saves you from designing the footer from scratch, because grouping, spacing and responsive behavior are already handled. TNCFlow’s Webflow templates and Framer templates include footer layouts built as reusable components, so you update the links and contact details once and they change across every page.
Whatever tool you use, build the footer as a single global component or template part. Editing a footer page by page is how outdated phone numbers and broken links end up living on a site for years.
Final footer audit
Before you publish, check the following:
- Contact details are correct, clickable and consistent with your other listings.
- Every link works, including legal pages and social profiles.
- The copyright year updates automatically.
- Text passes contrast checks and links have focus states.
- The mobile layout puts the most important information first.
- The footer loads quickly, with no heavy embeds.
Frequently asked questions
What should be included in a website footer?
Most footers should include the business name, contact details, grouped navigation links, legal pages such as a privacy policy and terms, and a copyright line. Social links, a newsletter signup and a call to action are common additions.
How many links should a footer have?
There is no fixed number, but three to five columns of four to seven links each keeps a footer scannable. If you need more, link to a hub page instead of listing everything.
Do footer links help SEO?
Footer links help search engines discover important pages, but they carry less weight than links within your content. Use clear, descriptive labels and avoid stuffing the footer with keyword anchors.
Should the footer be the same on every page?
Usually yes. A consistent global footer helps visitors find key information anywhere on the site. Landing pages focused on one action are a common exception, where a minimal footer reduces distractions.
What is a fat footer?
A fat footer is a large footer with many grouped links, contact details and extra content such as a newsletter form. It works well for sites with lots of content, as long as it stays organized.
