Website Footer Design Best Practices & Examples

ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More

A well-designed website footer is more than a copyright line. It is a secondary navigation and trust layer that helps visitors find contact details, services, support, policies, social profiles, and one appropriate next step after reaching the end of a page.

The best footer depends on the site. A painting contractor needs contact information, service areas, hours, and a quote request. A SaaS company needs documentation and status information. An online store needs shipping, returns, and order support. Use the guidance below to build a footer that is useful, accessible, responsive, and easy to maintain.

What is a website footer?

A website footer is the section at the bottom of a webpage, usually shared across the site. It commonly contains secondary navigation, contact details, legal links, company information, social links, and a final call to action.

A site footer supports the overall page or website. An article footer is different: it may contain an author, publication date, category, or sharing controls. Landing pages, checkout pages, login screens, and web applications may also use reduced, page-specific footers instead of the full global version.

W3C recommends semantic page regions such as <footer> and appropriately labeled navigation landmarks. A page-level footer can expose the contentinfo landmark, while a footer nested inside an article or section does not automatically have that same page-level role. See W3C’s guidance on page regions.

What makes a good website footer?

An effective footer is:

• Useful: It answers common questions and provides important destinations.
• Organized: Links are grouped by user goals rather than internal departments.
• Scannable: Headings, spacing, and labels make the content easy to understand.
• Accessible: It works with keyboards, screen readers, zoom, and different contrast settings.
• Responsive: It remains usable on small screens and with long translated labels.
• Relevant: Its CTA and content match the site’s audience and business model.
• Maintainable: Links, policies, contact details, and forms stay accurate over time.

A footer can improve discoverability and provide a useful final interaction, but it is not automatically an SEO or conversion hack. Adding more links does not make a footer better.

What should a website footer include?

Do not treat the following as a universal checklist. Start with the destinations visitors genuinely need, then add only the elements that support the site’s goals.

Core elements for most websites

• Company or brand name
• A short description or tagline, when it clarifies the business
• A contact link or relevant contact details
• Privacy policy
• Terms of use or terms of service, where applicable
• Accessibility statement, where applicable
• Copyright notice
• Secondary navigation
• Links to active, relevant social profiles

Small-business and service-business links

A local painting business, for example, might prioritize:

• Interior painting
• Exterior painting
• Commercial painting
• Color consultation
• About the company
• Service areas and locations
• Project gallery
• Reviews or testimonials
• Hours and contact information
• Request-a-quote form
• Privacy and terms

Showing a service area can be more useful than adding a generic “Resources” column. Include only locations the business actually serves.

Common company, product, and support links

• Company: About, Careers, Press, Contact
• Products or services: Overview, Features, Pricing, Integrations
• Resources: Blog, Guides, Documentation, Help center
• Support: Contact support, FAQ, Returns, Shipping, Order tracking
• Legal: Privacy, Terms, Cookies, Accessibility
• Connect: Social profiles, Newsletter, Community

Ecommerce elements

• Product categories
• Customer service
• Shipping and delivery
• Returns and refunds
• Order tracking
• Account access
• Payment information
• Gift cards
• Warranty details
• Store locator

For an ecommerce site, these links often matter more than a large brand statement because they address purchase and post-purchase concerns.

Calls to action

A footer CTA works best when it is the natural next step after the page:

• Service page: Request a quote
• Portfolio page: Discuss your project
• Product page: Start a free trial
• Blog: Get new articles by email
• Ecommerce page: Shop best sellers
• Nonprofit page: Donate

Use one primary CTA where possible. A newsletter form should explain what subscribers receive, how often they will receive it, and where to find the privacy policy. It should also provide accessible error and success messages.

How to organize footer links

Group links by the way visitors think about them, not by the company’s internal org chart. Concise headings such as Company, Services, Resources, Support, and Legal are easier to scan than “Miscellaneous” or “Useful links.”

Use a real heading where it represents a content group. For multiple navigation regions, give each one a distinct accessible label.

A footer does not need to repeat every item in the header. Repetition is useful when the page is long, the header is minimal, the footer offers a fuller secondary structure, or visitors need quick access to support and company information. It is unnecessary when it merely duplicates a comprehensive primary navigation.

There is no universal maximum number of footer links. Remove links that are duplicated, outdated, rarely used, unclear, or present only because “footers usually contain them.” If the footer has become a full site map, create a dedicated sitemap or resource directory instead. Baymard’s information-architecture guidance similarly emphasizes meaningful choices and categories based on user understanding.

Website footer design best practices

1. Prioritize user needs

Identify the questions visitors ask after reading a page. A painting company’s visitors may need a phone number, service area, project examples, preparation information, or a quote. A software buyer may need pricing, documentation, security, or system status. Build the footer around those needs.

2. Use descriptive link text

Prefer “Shipping and delivery,” “Customer support,” “View pricing,” or “Privacy policy” over “Click here,” “Learn more,” or “Read more.” Google recommends concise, descriptive, relevant anchor text and cautions against generic labels and keyword stuffing. Read Google’s guidance on crawlable links.

3. Give every group a clear purpose

Visitors should be able to predict what they will find under each heading. Avoid overlapping columns such as “Company,” “Our business,” and “About us” when all three contain the same destinations.

4. Keep essential information easy to find

Do not hide contact, support, legal, account, or returns information behind several interactions merely to create a cleaner visual design. A reduced footer can be appropriate, but essential trust information should remain accessible.

5. Use one relevant conversion path

A prominent quote button can be useful on a painting-services page; the same button may be distracting inside a customer-support flow. Match the CTA to the visitor’s likely next action and test it rather than assuming it will improve conversions.

6. Design for content growth

Use flexible columns, natural wrapping, and content-driven height. Avoid fixed-height containers, absolute positioning for essential links, and layouts that assume every label fits on one line.

7. Plan for translation

Translated labels can be substantially longer than English labels. Test navigation headings, accordion buttons, legal rows, addresses, phone numbers, and form messages in the languages your site supports.

8. Maintain the footer

Audit it periodically. Check every link, phone number, address, social profile, policy date, copyright year, translated version, mobile interaction, and logged-in or logged-out state. A current copyright year does not prove that the legal documents themselves are current.

How to design a footer for mobile

On mobile, stack groups vertically rather than forcing users to horizontally scroll through narrow columns. Keep contact, support, legal, and account links easy to reach.

Accordions are appropriate when a genuinely large link collection would make the page excessively long. They are not automatically better because they look modern. Hidden links are harder to scan and add interaction cost.

When using accordions:

• Use a real <button>, not a clickable <div>.
• Expose the state with aria-expanded.
• Connect the control to its panel with aria-controls.
• Make the entire control area tappable.
• Keep the reading and focus order logical.
• Ensure the content remains understandable without color.
• Test keyboard and screen-reader behavior.

W3C notes that responsive regions may be collapsed or hidden on smaller screens, but visible components should retain a consistent order. Avoid tiny text, fixed-width columns, hover-only controls, and fine print that becomes unreadable on a phone.

Accessible footer implementation

A simple page-level structure might look like this:

<footer>
  <nav aria-label="Company">
    <h2>Company</h2>
    <ul>
      <li><a href="/about">About us</a></li>
      <li><a href="/careers">Careers</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>

  <nav aria-label="Legal">
    <ul>
      <li><a href="/privacy">Privacy policy</a></li>
      <li><a href="/terms">Terms of use</a></li>
    </ul>
  </nav>
</footer>

Use separate labels when there are multiple navigation regions. A skip link near the beginning of the page can help keyboard users bypass repeated navigation and reach the main content.

Keyboard and focus requirements

• Every link and button is reachable with the Tab key.
• Focus indicators remain clearly visible.
• Accordion controls work with keyboard input.
• Focus is never trapped unexpectedly.
• Tab order follows the visual and semantic order.
• No essential information depends on hover.

Contrast and readable typography

For WCAG 2.2 Level AA, normal text requires a contrast ratio of at least 4.5:1; large text requires at least 3:1. Interactive controls and focus indicators must also remain visibly distinguishable under applicable criteria. See W3C’s contrast guidance.

Test normal, hover, focus, visited, disabled, and placeholder states. Gray text on a dark footer may look refined in a design mockup but become unreadable in practice.

Icons and social links

Icon-only links need accessible names. Use visible text when an icon may be unfamiliar, do not rely on color alone, and give icons sufficient contrast and focus visibility. Remove abandoned social profiles; an empty profile can signal neglect rather than credibility.

Website footer SEO best practices

A footer can help users and search engines discover important pages, but footer links do not guarantee higher rankings. Search visibility depends on the broader site architecture, content quality, technical accessibility, relevance, and many other factors.

• Link to important pages that visitors genuinely need.
• Use normal crawlable HTML anchors.
• Choose descriptive, concise labels.
• Fix broken and outdated links.
• Avoid repeating large lists of keyword variations.
• Do not add irrelevant sitewide links.
• Do not use city names or service terms as a link dump.

Google advises that important pages should be reachable through internal links and that anchor text should help users and search engines understand the destination. The goal is useful information architecture, not maximum footer volume.

Legal information in a footer

Include policies relevant to the site and its operations, such as:

• Privacy policy
• Terms of service
• Cookie policy or cookie preferences
• Accessibility statement
• Shipping, refund, and returns policies
• Licensing or disclaimers
• Regional disclosures, where applicable

Putting a policy link in the footer does not by itself create legal compliance. Obligations vary by jurisdiction, industry, data practices, cookies, accessibility requirements, and business model. Legal copy should be reviewed for the applicable geography.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Website footer examples by pattern

1. Minimal portfolio footer

Structure: Name or logo, short statement, one project CTA, contact link, a few active social links, privacy, and copyright.

Best for: Designers, photographers, freelancers, and simple landing pages.

Borrow: Clarity and a fast path to contact.

Avoid copying: Removing every useful destination just to preserve minimalism.

2. Small-business service footer

Structure: Services, company, service areas, contact details, hours, quote CTA, reviews or project gallery, privacy, and terms.

Best for: Local contractors, painting companies, consultants, and professional services.

Borrow: Practical information that reduces uncertainty before a visitor makes contact.

Avoid copying: Listing locations the business does not serve or hiding the phone number behind a form.

3. Ecommerce utility footer

Structure: Shop categories, customer service, shipping, returns, order tracking, account, payment information, newsletter, and legal links.

Best for: Online stores and marketplaces.

Borrow: Clear post-purchase support.

Avoid copying: Repeating every product category from the header or burying returns information.

4. SaaS product footer

Structure: Product, pricing, integrations, documentation, API or developer resources, help center, security, status, company, and legal.

Best for: Software and technology businesses.

Borrow: Separate product discovery from support and trust information.

Avoid copying: Adding security or compliance claims without current evidence.

5. Agency conversion footer

Structure: Short value proposition, selected services, work or case studies, contact details, one strong CTA, and a small legal row.

Best for: Creative studios, marketing agencies, and lead-generation businesses.

Borrow: A clear final action after visitors review the work.

Avoid copying: Letting animation, oversized typography, or a visual effect obscure basic navigation.

6. Sitemap-style footer

Structure: Broad, carefully organized navigation for multiple audiences, plus support and policy links.

Best for: Universities, publishers, marketplaces, government-style information architectures, and large organizations.

Borrow: Audience-based organization and comprehensive discovery.

Avoid copying: Using dozens of links on a small site where a compact footer would be clearer.

Common website footer mistakes

• Tiny or low-contrast text: Test against WCAG thresholds and at zoom.
• SEO link dumping: Remove irrelevant, repetitive, keyword-heavy links.
• Unclear categories: Replace internal department names with user-centered headings.
• Generic labels: Use descriptive destination names.
• Inactive social icons: Remove abandoned profiles.
• Broken links: Include the footer in routine link audits.
• Inaccessible accordions: Use buttons, states, labels, and keyboard testing.
• Unnecessary duplication: Repeat navigation only when it adds value.
• Outdated legal information: Review documents, company details, regional disclosures, and consent settings.
• Unusable newsletter forms: Explain the value, link to privacy information, and test error and confirmation states.
• Unexpected new tabs: Use normal navigation unless opening a new tab has a clear reason; identify external destinations when appropriate.
• Fixed-height layouts: Let the footer expand for longer labels, translations, and accessibility settings.

When to use a reduced footer

A global footer improves consistency, but a full marketing footer is not right for every screen.

• Checkout: Retain privacy, terms, support, returns, and relevant security information while reducing distractions.
• Campaign landing page: Use a focused footer, but do not remove essential trust and policy links.
• Login or authentication screen: Keep support and legal access without adding a large promotional navigation system.
• Logged-in application: Prioritize help, documentation, status, support, legal, and account settings.
• Temporary promotion: Use page-specific content only if it remains accurate and is removed when the campaign ends.

Choosing a website platform for footer design

The platform should match the site’s complexity, editing needs, commerce requirements, and accessibility process—not just the appearance of its footer templates.

• Webflow: A strong fit for designers and agencies that need precise visual control, reusable components, and sophisticated responsive marketing sites. See Webflow’s current plans.
• Squarespace: A practical fit for portfolios, creators, small businesses, and brochure sites that need polished standard footer content with limited custom development. See Squarespace’s current plans.
• Shopify: Best aligned with commerce-first sites whose footer must support shipping, returns, accounts, payments, and customer service. See Shopify’s current plans.
• Wix: Suitable for small businesses that want a visual editor and built-in marketing, booking, and basic commerce features. Plan prices and currency vary by location and billing period; check Wix’s current plan page.

Plan names, features, prices, taxes, billing terms, and regional availability can change. Check the official pages before purchasing. For complex work, a designer, front-end developer, accessibility specialist, or agency should be able to show responsive footer examples and explain how keyboard, screen-reader, zoom, mobile, and localization testing will be handled.

Website footer audit checklist

• Can visitors quickly find contact information?
• Are the most important destinations included?
• Are links grouped by user intent?
• Are headings and navigation labels clear?
• Does every link have descriptive text?
• Does the footer work with only a keyboard?
• Are focus indicators visible?
• Does text meet the applicable contrast thresholds?
• Do icons have accessible names?
• Does the layout work on small screens without horizontal scrolling?
• Do accordions expose their state and work with assistive technology?
• Are policies, addresses, phone numbers, and copyright information current?
• Are social profiles active?
• Is the CTA relevant to the page and audience?
• Does the footer still work with longer translated labels?
• Have links been checked in both logged-in and logged-out contexts?

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.