Blueprint 05
Forms and footers sit at opposite ends of the page and share one property: they are where visitors go when they have already decided to act. Both reward boring, predictable structure over invention.
A single-column form has one reading path, one tab order and one obvious next field. Multi-column forms save vertical space at the cost of an ambiguous scan pattern, and they force a reflow decision at every breakpoint. The defensible exceptions are naturally paired fields — first and last name, city and postcode, expiry and security code — which can share a row because they are read as one unit. Everything else stacks.
Field width should hint at expected input. A postcode field the same width as a message field tells the user nothing and invites mistakes. Set explicit maximum widths per field type while keeping all fields full width below 640px, where an inset field just wastes the little horizontal space you have.
| Placement | Pros | Cons |
|---|---|---|
| Above the field | Fastest completion, no truncation, translates well into any language | Uses vertical space |
| Left aligned beside the field | Compact vertically; familiar in enterprise settings | Long labels wrap badly; poor on mobile |
| Floating label | Space efficient and tidy at rest | Animation complexity, small text when floated, fragile with autofill |
| Placeholder as label | Nothing — avoid | Label disappears on focus; fails accessibility outright |
Use labels above fields unless you have a strong reason not to. Give each label a real for attribute pointing at the field's id, put 8px between the label and the input, and 24px between one field group and the next. Mark optional fields rather than required ones when most fields are required; mark required ones when most are optional. Never rely on an asterisk alone — spell out the convention above the form.
Validate on blur for format problems, on submit for everything, and never on every keystroke — character-by-character errors punish people mid-thought. An error state needs four parts working together: a state class on the field wrapper, a visible border or outline change, an icon or text cue that does not depend on colour alone, and a message placed directly below the field.
aria-describedby and set aria-invalid="true" on the field.Reserve space for the message so the layout does not jump when it appears. A hidden paragraph with a fixed minimum height, or a container that always occupies a line, is enough.
A footer is a navigation component, an identity component and a legal component at once. Structure it in columns by purpose, not by whatever fits. The common arrangements are four columns — brand, product links, company links, legal — and a wide-first arrangement where the brand column takes roughly twice the width of the link columns, which suits footers carrying a short description or newsletter field.
Layout A
Brand, two link groups, company details. Below it a full-width base bar holding the copyright line and registration details. Predictable, easy to maintain, and it stacks to one column below 768px without any reordering.
Layout B
A 2fr brand column beside three 1fr link columns. Gives the description or sign-up field room to breathe. Needs care at tablet: collapse to two columns rather than three, or the link groups become one item wide.
Whichever you choose, the footer must be byte-for-byte identical on every page. A footer that loses a legal link on one template is both an inconsistency and, for statutory information, a compliance risk. Include the registered entity name, company number, registered address and a contact email — this site carries all four, in the same place, on all ten pages.
Cap each footer column at around six links. Beyond that the column becomes a wall and scanning collapses. If you have forty links, you do not need a bigger footer; you need a sitemap page linked from the footer. Group links by the visitor's intent — things to read, things to buy, things about the company, things the law requires — and label each group with a real heading element so assistive technology can jump between them.
Desktop: four columns, 40px gap, 64px of padding above and 40px below. Tablet: two columns, same gaps, headings kept visible. Mobile: one column at 24px gaps with 16px minimum inset from the screen edge, all groups expanded rather than collapsed into accordions — a collapsed footer saves scroll at the cost of hiding the exact links people came down here to find. Below 400px, make sure the email address and the brand name can wrap mid-string so nothing forces a horizontal scrollbar.