Service index — options
Six ways to draw one service and its pages, all six carrying the real thirteen injury
claims with their real URLs, lifted at build time from the same two sources the index page uses:
the live site's menu decides what exists, home_v1's mega menu decides how it groups. Nothing here
can drift from service-index.html.
Injuries is not an example, it is the worst case. Thirteen pages in
three groups, against Estates' seven, Real Estate's two, and Business and Marine's
nothing at
all. An option that reads well on Marine has been tested against nothing. Every caption below
says what its option does to the four thin services — because whatever wins here has to
survive an area with an empty list, and only one of the six does that without help.
| option | height at 1280 | tallest element | an area with no pages |
|---|
| S1 — rail and columns | __H1__ | the rail, not the list | holds its shape |
| S5 — dense strip | __H5__ | the head | collapses to the head alone |
| S3 — group panels | __H3__ | the 6-row panel | nothing left to draw |
| S2 — head across, columns | __H2__ | the 6-row column | head with a hole under it |
| S4 — numbered index | __H4__ | the 6-row group | a heading and no list |
| S6 — ruled rows | __H6__ | the 6-row group | a label column beside nothing |
Heights measured in headless Chrome at a 1440px viewport, not estimated.
S1 is the shortest and it is not close — 335 against S5's 419 — and the reason is
structural rather than stylistic:
S1 is the only option that puts the service's head BESIDE the
list instead of above it, so the plate, the name, the paragraph and the door cost nothing
vertically. Every other option pays 150–220px before its first claim. Stack five services on
one page and that is the whole difference between a page you scroll once and a page you scroll
five times.
The grouping is a proposal, not the firm's. Road Accidents,
On Premises and Other Claims come from home_v1's mega menu; the live site's own menu
lists the thirteen flat, with no groups at all. Three of the six options (S3, S6 and to a lesser
extent S4) make the grouping structural — if it is wrong, they are wrong in a way S1 and S5
are not. Someone at the firm has to confirm it before those three can be picked.
Two constraints bound all six, and only S4 escapes both. The five practice
icons are 93×107 8-bit PNGs with the brand colour baked into the file — 96px is
already an upscale and they cannot be recoloured, so nothing here draws one above 46px, and the
dark plate was checked rather than assumed (orange 3.58:1, teal 4.18:1 on
#423C37, both over the 3:1 non-text floor). And there is no photograph for any of
the thirteen claims, which is why no option on this sheet is photo-led: a tile-per-claim
layout cannot be drawn from what exists.
Colour is not one of the variables. It is settled and identical in all six,
so the comparison is about structure. On white: page names brown 10.87:1, group labels and
copy #6B6B6B 5.33:1, the door #2F7186 5.50:1, hover
#A94A29 5.68:1. Brand orange is 3.03:1 and carries no word anywhere on
this sheet — it is a rule, a plate edge or a hover marker. Orange marks, brown reads.
"""
def build():
body = []
for tag, name, fn, note in OPTIONS:
body.append(
'