Footer blocks, the navigation a header cannot hold#
A footer is where a site puts everything the header had no room for, plus the legal and contact links people expect to find at the bottom. The design problem is making forty links scannable, and the answer is always grouping.
The seven footer layouts#
- Footer Section 1: an inline email capture beside three columns of links.
- Footer Section 2: a half-image footer carrying a postal address, phone and email beside the link columns.
- Footer Section 3: a six-column layout leading with the newsletter form.
- Footer Section 4: five columns covering quick links, resources, legal and a get-in-touch group.
- Footer Section 5: a soft gradient with an address block, contact lines and a subscribe form.
- Footer Section 6: a minimal two-row footer with top navigation, a language menu and city links.
- Footer Section 7: three columns pairing contact details and link groups with a subscribe form.
Grouping, and how many columns#
Four or five groups of five to eight links is the readable maximum. Column titles do the work: somebody scanning a footer reads the headings first and only then the links underneath, so a group called Resources containing pricing and careers is worse than no grouping at all.
The newsletter footer#
Several layouts pair the link columns with an email capture, and on a content site this is the highest-traffic place to put one, because it is where a reader arrives after finishing an article. Say what arrives and how often next to the field; a bare input asks for something and offers nothing.
What must be in a footer#
- Legal pages, since this is the only place people look for them
- A real contact route, written as a mailto link rather than a plain address
- The company entity and year, if you trade under a name different from the brand
- Anything the header names but does not link, because a named destination should always be reachable
Footers on a phone#
Column sets collapse to a stacked or accordion arrangement rather than shrinking to unreadable type, and touch targets stay at a usable size. A footer squeezed into three tiny columns is the most common responsive failure on an otherwise careful site, precisely because nobody scrolls that far when checking their work.
Changing the links#
Column titles and their links live in a typed data file beside the component, so the whole footer structure changes in one place. That also keeps the same navigation data usable by a sitemap or a mobile menu rather than duplicated three times.
Where the footer sits#
At the end of every page, including the error pages, which is where a lost visitor most needs navigation. It pairs with the navbar at the other end of the page, and a call to action immediately above it catches anybody who scrolled the whole way without deciding.
