Five ways to list the open positions on careers.html, plus the row that is on the
page today so the comparison has a baseline.
.roles is one flex row of
full job titles — at three it fits on one line and looks tidy, which is exactly the trap.
A component that only works at the count it was drawn for is not a component.
| option | at three | at nine | what it costs |
|---|---|---|---|
| P0 — today's flex row | 29px | 89px | no alignment; wraps into a paragraph |
| P1 — cards | 173px | 566px | a big object for a line of text |
| P2 — ruled rows | 168px | 501px | plain |
| P3 — sticky rail | 303px | 628px | 280px of width, always |
| P4 — no index | 395px | 1183px | nothing to jump with |
| P5 — grouped | 298px | 587px | needs a taxonomy the firm has not given |
#6B6B6B 5.33:1, doors #2F7186 5.50:1, hover
#A94A29 5.68:1. Brand orange is 3.03:1 and carries no word: it is a rule and a
border, nothing else..roles: one flex row of full job titles. At three it sits on one line and looks tidy, which is the trap — look at the nine. There is no alignment to run the eye down, the titles are different lengths so nothing lines up, and a wrapped row of links reads as a paragraph rather than a list. Adi's objection, drawn.
A card per role, three across, wrapping. The count stops mattering — nine is three rows, twelve is four — and every card is the same size whatever the length of its title, which is the one thing a flex row cannot do. Cost: a card is a big object for a line of text, so three cards take more room than three rows do, and the panel makes each role look like a product.
One row per role with the columns aligned down the page: name, place, door. Alignment is exactly what the wrapping row cannot give you, and it is what makes a long list scannable — the eye runs down one column instead of through a paragraph of links. The cheapest of the five in vertical space per role. Cost: it is plain, and at three roles it can read as a list of files rather than an invitation.
The roles stay on screen while the postings scroll past them, so a reader deep in the third posting can still see the first two exist. The sidebar round already measured what this costs: a sticky block taller than the viewport has a bottom the reader can never reach, so the rail is capped at calc(100vh - 48px) and scrolls inside itself — which is precisely the case a long board produces. Cost: it spends 280px of width on navigation for a page most visitors read once.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
The postings and nothing above them. Every other option here is an index plus the postings; this one asks whether the index earns its place. At three it plainly does not — the three headers are visible in one and a half screens. The frames below are the posting HEADERS, so the cost at nine is visible too: nine of them is nine screenfuls with nothing to jump with, and the page has no way to tell a visitor what it holds.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
… the full posting runs here.
Roles under headings. The only option whose readability improves as the board grows: three roles do not need grouping, nine do, and at twelve it is the difference between a list and an inventory. It also answers a question none of the others do — a conveyancing assistant and an articling student are not looking for the same page. The grouping is a proposal derived from the titles; the firm has not published one, which is the same standing the injury claims are grouped on. If it is wrong, this option is wrong in a way P1–P4 are not.