.areas — practice-area layout options

Nine layouts for section 4 of home-v2. Every option carries the same five practices, the same five paragraphs verbatim from the live site, and the same five icon files. The one exception is flagged on the page itself: A6 has nowhere to put a paragraph, so it carries a single new caption line, badged NEW COPY. What changes between options is geometry, hierarchy and how much of the “What We Do” tree is exposed on the homepage.

Verified before drawing — database + a read-only read of the live homepage
The icons are the hard constraint — measured, not assumed
filepixelsformatink colourweight
icon-injuries.png93×107PNG, 8-bit palette#E16239 orange3.1 KB
icon-estates.png93×107PNG, 8-bit palette#46ADC8 teal1.9 KB
icon-business.png91×104PNG, 8-bit palette#46ADC8 teal2.8 KB
icon-marine.png93×107PNG, 8-bit palette#EF6D3E orange1.6 KB
icon-real-estate.png93×107PNG, 8-bit palette#46ADC8 teal1.5 KB
Two consequences that constrain every option on this page:
Why the baseline looks unresolved: five items in a three-column grid
A1 is the layout home-v2 carries now. Three columns, five items — so row two holds Marine and Real Estate under columns one and two and leaves a hole at the right. This is the same shape of defect the team section had (thirteen tiles in four columns), and it has the same two honest cures: change the column count to divide the item count, or stop using a grid. A2, A3, A7 and A9 take the first; A5 and A8 take the second; A4 and A6 change the hierarchy instead.
Content questions this section raises — for Darren, not for me
A1Baseline replica — three across, five items~905pxWhat home-v2 carries now, with the ONE correction the replica had wrong: on the live site the icon and the heading are both links to the practice page. Everything else is untouched, including the orphan row.

League and Williams

With over 160 years of experience in helping clients in the following areas of law

Injuries

Did you get in an accident? We will help you recover your fullest potential.

Estates

Need a will? Left out of a will? Did a family member pass away without one? Estate litigation, planning & administration.

Business

Are you planning to start a new business in British Columbia? Are you buying, selling, or restructuring an existing business?

Marine

Had a boating accident? Boat been seized? Have anchoring or mooring concerns?

Real Estate

Buying or selling Real Estate in BC? Get peace of mind with our real estate law team.

A2Five across — one row, no orphan~615pxThe five areas are five columns. The orphan row disappears because the grid stops fighting the count. Costs: the icon drops to 74px and each paragraph narrows to about 31 characters, so Estates and Business run five lines.

League and Williams

With over 160 years of experience in helping clients in the following areas of law

Injuries

Did you get in an accident? We will help you recover your fullest potential.

Estates

Need a will? Left out of a will? Did a family member pass away without one? Estate litigation, planning & administration.

Business

Are you planning to start a new business in British Columbia? Are you buying, selling, or restructuring an existing business?

Marine

Had a boating accident? Boat been seized? Have anchoring or mooring concerns?

Real Estate

Buying or selling Real Estate in BC? Get peace of mind with our real estate law team.

A3Five across, ruled — one strip, hairline dividers~635pxA2's geometry, but the five read as one banded strip rather than five floating columns. The name drops to a small tracked label so the icon carries the identity. Hover lifts a column to white — legitimate here because the whole column is a link target.

League and Williams

With over 160 years of experience in helping clients in the following areas of law

Injuries

Did you get in an accident? We will help you recover your fullest potential.

Estates

Need a will? Left out of a will? Did a family member pass away without one? Estate litigation, planning & administration.

Business

Are you planning to start a new business in British Columbia? Are you buying, selling, or restructuring an existing business?

Marine

Had a boating accident? Boat been seized? Have anchoring or mooring concerns?

Real Estate

Buying or selling Real Estate in BC? Get peace of mind with our real estate law team.

A4Feature and four — Injuries leads~800pxStops pretending the five are peers. Injuries has thirteen sub-pages behind it; the other four have three, two, none and none. The feature panel gives Injuries its real weight and surfaces its top claims as links; the rest tile two-by-two beside it.

Content decision, not a styling one — it publicly ranks the practice. Needs Darren's word.

A5Ruled rows — five full-width lines~880pxNo grid, so no orphan row is possible at any count — a sixth area would just be a sixth line. Each paragraph gets its full length on one or two lines instead of five. The whole row is one link, so the destination is unambiguous.
A6Honeycomb — three over two, brand hexagon~760pxTurns the awkward 3+2 into the point: five cells nest like comb, which is the mark the whole identity is built on. The price is real — there is no room for a paragraph inside a hexagon, so all five descriptions are dropped and replaced by one caption.

Drops five paragraphs of copy that are currently the section's only explanation of what each practice does.

League and Williams

With over 160 years of experience in helping clients in the following areas of law

NEW COPYPersonal injury, estate disputes, marine law, real estate conveyance and estate planning — five practices, one firm.

A7Dark band — five cards on #2A2622~640pxThe same five-across geometry on the dark ground the LaW Facts cards already use. The icons survive it: they are flat brand orange and brand teal, both of which still read against #2A2622. Puts a third dark block into the page though.

home-v2 already carries five separate dark values. Adding a sixth dark section is a brand-guide question, not a layout one.

A8Rail and rows — heading beside the list~600pxThe section head stops being a centred stack above the content and becomes a left rail beside it, which is what buys the height back. Five rows, no orphan, and the “What We Do” page finally gets a link of its own.
A9Five across with sub-pages — the section becomes navigation~720pxEach area shows what is actually behind it, so a visitor who wants “motorcycle accident” reaches it from the homepage instead of two clicks in. It also makes the imbalance impossible to hide: Business and Marine have nothing to list.

The two empty cards are shown honestly rather than padded. Either write sub-pages for Business and Marine, or this option needs a different filler.

League and Williams

With over 160 years of experience in helping clients in the following areas of law

Injuries

Did you get in an accident? We will help you recover your fullest potential.

Estates

Need a will? Left out of a will? Did a family member pass away without one? Estate litigation, planning & administration.

Business

Are you planning to start a new business in British Columbia? Are you buying, selling, or restructuring an existing business?

No sub-pages exist for this practice.

Marine

Had a boating accident? Boat been seized? Have anchoring or mooring concerns?

No sub-pages exist for this practice.

Real Estate

Buying or selling Real Estate in BC? Get peace of mind with our real estate law team.

Round 2 — a different look, not a different grid

Round 1 solved the geometry: five items, three columns, an orphan row. All nine options there kept the same visual family — a line icon, a name, a paragraph. These eight change the family itself. Three drop the icons for photographs, two drop imagery altogether, one puts the type on the image, one hides four practices behind tabs, and one lets the brand hexagon carry the pictures. The copy is still the live copy, word for word, in every one.

The photographs exist — but nothing says which practice they belong to
Six images sit in the media library attached to the What We Do page (post 14659), plus two more under Injuries and Estates. None of them is set as a featured image on any practice page, so the pairing below is inferred from filenames. It is a proposal, not a fact recovered from the site.
practicefilepixelsnote
Injuriesinjuries-thumb.jpg411×258the odd one out — near-monochrome and dark (mean luminance 60, chroma 1.4) beside four colour photographs, and the smallest file on the page
Estatesestate-law.jpg600×387largest of the five
Businessskyscraper-building-sky.jpg500×333stock
Marineboat-ocean-water.jpg500×331stock
Real Estatebrown-house-sunset.jpg500×334stock
There are no larger originals. The upload folder holds only downscaled derivatives (300px, 150px, 96px, 48px, 24px) — nothing above the sizes listed. So 500–600px is the hard ceiling for any photo-led layout. A five-across grid asks for 244px columns and is comfortable; B2's half-width rows ask for 640px and upscale every image; B7's strips ask for 230px and are fine. Also in that library: adults-analysis-brainstorming-1661004.jpg at 4000×2191 and 1.78 MB, unresized — a page-weight defect wherever it is used.
What each option is immune to
B3 and B8 use neither icon nor photograph, so neither the 93px icon ceiling nor the unassigned-photo question touches them. B1, B2, B4, B6 and B7 depend on the photo mapping being confirmed. Every option in round 1 depends on the icons being redrawn as SVG before they can grow.
B1Photo cards — the icons come off~715pxThe line icons are replaced by the practice photographs. Completely different register: this reads as a firm with places and people rather than a firm with pictograms. Five across, so no orphan row.

Uses the six photographs sitting unassigned in the What We Do media library. The pairing is inferred from filenames — see the photo box above.

B2Editorial rows — photo and copy, alternating sides~2000pxMagazine layout. Each practice gets a full half-width photograph and room for real copy at 16px. It is by far the most generous treatment and by far the tallest — it roughly doubles the page's practice-area section on its own.

Height is the objection. At 640px per photo it also upscales every image: the largest source file is 600px wide, four are 500px, and Injuries is 411px.

League and Williams

With over 160 years of experience in helping clients in the following areas of law

01 — INJURIES

Injuries

Did you get in an accident? We will help you recover your fullest potential.

Injuries
02 — ESTATES

Estates

Need a will? Left out of a will? Did a family member pass away without one? Estate litigation, planning & administration.

Estates
03 — BUSINESS

Business

Are you planning to start a new business in British Columbia? Are you buying, selling, or restructuring an existing business?

Business
04 — MARINE

Marine

Had a boating accident? Boat been seized? Have anchoring or mooring concerns?

Marine
05 — REAL ESTATE

Real Estate

Buying or selling Real Estate in BC? Get peace of mind with our real estate law team.

Real Estate
B3Numbered index — typography only, no icon, no photo~865pxDrops imagery entirely and lets the practice names carry the section at 32px. Reads like a contents page: five numbered lines, name left, description right, one hexagon door. The only option here that is not blocked by the icon resolution ceiling, because it uses no icon.
B4Photo mosaic — names on the image, Injuries leads~800pxThe boldest of the eight. Photographs fill the tiles, names sit on a scrim, and Injuries takes a double tile because it has thirteen sub-pages behind it. Dense and confident, and it hides the uneven copy lengths completely.

The four small tiles reveal their paragraph on hover, so on a touch screen those four descriptions are unreachable. That is a real accessibility cost, not a detail — it needs a tap-to-open or always-visible variant before shipping.

B5Tabs — one practice open at a time~700pxFive names in a row, one panel below. Each open practice gets a photograph, its copy at full 16px, and its real sub-pages as links — more depth per practice than any grid option, in less height than any of them.

Four of the five practices are hidden until clicked. That is a genuine trade: a homepage section that has to be operated before it says anything is weaker for a first-time visitor, and search engines index it but readers may never open it.

League and Williams

With over 160 years of experience in helping clients in the following areas of law

Injuries

Did you get in an accident? We will help you recover your fullest potential.

Read more

Estates

Need a will? Left out of a will? Did a family member pass away without one? Estate litigation, planning & administration.

Read more

Business

Are you planning to start a new business in British Columbia? Are you buying, selling, or restructuring an existing business?

No sub-pages exist for this practice.

Read more

Marine

Had a boating accident? Boat been seized? Have anchoring or mooring concerns?

No sub-pages exist for this practice.

Read more

Real Estate

Buying or selling Real Estate in BC? Get peace of mind with our real estate law team.

Read more
B6Honeycomb photographs — the mark holds the images~900pxA6 from the first round, but the hexagons hold photographs instead of icons, and the five paragraphs come back underneath as a legend row rather than being dropped. The brand mark finally does structural work instead of decorating.

A hexagon crops hard at four corners. Each photo loses roughly a quarter of its frame, so any image whose subject is off-centre will be cut — check all five before committing.

League and Williams

With over 160 years of experience in helping clients in the following areas of law

Injuries

Did you get in an accident? We will help you recover your fullest potential.

Estates

Need a will? Left out of a will? Did a family member pass away without one? Estate litigation, planning & administration.

Business

Are you planning to start a new business in British Columbia? Are you buying, selling, or restructuring an existing business?

Marine

Had a boating accident? Boat been seized? Have anchoring or mooring concerns?

Real Estate

Buying or selling Real Estate in BC? Get peace of mind with our real estate law team.

B7Sticky rail and photo strips~880pxThe heading becomes a left rail that stays with you while the five photo strips scroll past it. Every practice keeps a photograph, its full name at 26px and its whole paragraph — nothing is hidden, nothing is cropped to a square.
B8Colour panels — five solid blocks, no imagery~680pxThe most graphic of the eight and the only one with neither icon nor photograph, so it is immune to both the icon resolution ceiling and the unassigned-photo question. Five blocks, a ghost hexagon in each corner, white type.

The panels are DEEPENED brand colours, not the brand colours. White body copy on #EF6D3E measures 3.03:1 and on #46ADC8 measures 2.60:1 — both fail AA, and teal fails even the large-text 3:1 floor. #B44322 gives 5.61:1 and #2F7186 gives 5.50:1. The icons are omitted because their baked-in brand colour would vanish on these grounds.

Round 3 — B4 without the hover

You liked B4 but not that four of the five descriptions only appear on hover. That was the cost I flagged under it, and you are right to refuse it — on a phone there is no hover at all, so those four paragraphs are simply unreachable. Four ways to keep the mosaic and show every paragraph at rest.

Read this before comparing the heights — the extra height is arithmetic, not styling
B4 measured ~800px because four paragraphs were not on the page. A small tile is 306px wide; inside 22px padding the copy runs about 36 characters a line. Estates (136 characters) and Business (133) therefore need four lines, which is 99px, and with the rule, the name and the spacing the text block is ~144px. On a 212px tile that leaves 68px of visible photograph — not a mosaic any more. So showing the copy costs 175–275px, and no styling choice avoids it.

There is exactly one lever that would buy it back, and it is not mine to pull: the copy itself. Injuries and Marine are 76 characters; Estates and Business are 133–136. Trimmed to Marine's length, every option here loses a line — about 50px — and the tiles stop being ruled by their two longest paragraphs. That is new copy and Darren's call, so every option below carries the live wording untouched.
Legibility was measured, not eyeballed. N1 and N3 still set copy over a photograph, so the scrim was deepened to 0.94 at the bottom: #E2DCD4 on that ground measures 13.9:1 against the flat colour and about 9:1 over a mid-brightness photo — comfortably past AA either way. N2 and N4 sidestep the question entirely by putting the copy on a solid #332E29 panel, which is the same construction the LaW Facts cards already use in home-v2.
B4·N1Same mosaic, taller tiles — copy stays on the image~975pxThe smallest possible change to B4: nothing moves, the tiles just grow from 212px to 296px so the paragraph has somewhere to sit at rest. The scrim is deepened so four lines of copy stay legible over any photograph, not just the dark ones.

Costs ~175px against B4. That is the arithmetic of the request, not a styling choice — see the box above.

B4·N2Copy comes off the image — solid panel under each photo~1075pxThe paragraph never sits on a photograph at all, so its legibility no longer depends on what is behind it. Photo on top, solid #332E29 panel beneath — the same construction as the LaW Facts cards already in home-v2, which makes it the most in-system of the four.

The tallest of the four, and the mosaic reads more as a card grid than a photo wall — some of B4's boldness is spent buying the guaranteed legibility.

B4·N3Mosaic untouched — the five paragraphs move below it~985pxB4 exactly as you liked it, at its original 212px tiles, with the descriptions lifted out into a five-column legend under the wall. The photographs stay dominant and uncluttered; the copy is always readable because it is on the section ground, not on an image.

The one weak point is the pairing: the reader has to map legend column three to the tile it describes. The colour rule under each name is the only thread tying them together.

League and Williams

With over 160 years of experience in helping clients in the following areas of law

Injuries

Did you get in an accident? We will help you recover your fullest potential.

Estates

Need a will? Left out of a will? Did a family member pass away without one? Estate litigation, planning & administration.

Business

Are you planning to start a new business in British Columbia? Are you buying, selling, or restructuring an existing business?

Marine

Had a boating accident? Boat been seized? Have anchoring or mooring concerns?

Real Estate

Buying or selling Real Estate in BC? Get peace of mind with our real estate law team.

B4·N4Lead becomes a band — Injuries across the top, four beneath~1010pxRe-cuts the mosaic instead of stretching it. Injuries takes a full-width band with its photograph, its copy at 16.5px and a real door; the other four sit in one even row below with their paragraphs on solid panels. Keeps B4's hierarchy while giving all five copy nowhere to hide.

Round 4 — N1, short copy, icons back

B4·N1 with the two changes you asked for: the descriptions cut to one short line, and the old-site icons brought back into the tiles. The three options below are the same layout — they differ only in where the icon sits, which is the one thing that genuinely has no obvious answer.

The short copy is NEW COPY — I wrote it, the site did not
Everything else on this page is the live wording, word for word. These five lines are not. They are compressions of the live sentences, keeping every practice claim and dropping the rhetorical questions — but they are still mine, and they need your approval or Darren's before they go anywhere near the site. Read them as a proposal.
practicelive copychproposed short linech
InjuriesDid you get in an accident? We will help you recover your fullest potential.76Hurt in an accident? We help you recover in full.49
EstatesNeed a will? Left out of a will? Did a family member pass away without one? Estate litigation, planning & administration.121Wills, estate planning, administration and disputes.52
BusinessAre you planning to start a new business in British Columbia? Are you buying, selling, or restructuring an existing business?125Starting, buying, selling or restructuring a BC business.57
MarineHad a boating accident? Boat been seized? Have anchoring or mooring concerns?77Boating accidents, seizures, anchoring and mooring.51
Real EstateBuying or selling Real Estate in BC? Get peace of mind with our real estate law team.85Buying or selling in BC, with peace of mind.44
Two things worth noticing. The live copy is 76–136 characters — a 60-character spread, which is why the tiles were being ruled by Estates and Business. The proposed lines run 43–56, a 13-character spread, so all five wrap to two lines and the tiles stop fighting each other. And the live copy is duplicated verbatim in the header mega-menu rails in home-v2 — if these lines are adopted, decide whether the mega menu follows or deliberately keeps the longer version.
The short copy pays for the icons, almost exactly
N1 with the live copy measured ~975px, because Estates and Business needed four lines each. At two lines the text block drops from ~144px to ~94px, which lets the tiles come back from 296px to 240px. i1 lands at ~860px and i2 at ~830px — with every paragraph visible and the icons added, both are within touching distance of the original B4's 800px, which achieved its figure by hiding four descriptions. i3 is the exception: it spends the saving on icon size instead.
Measured: the icons will look lighter here than they do on the current homepage
Median stroke width across the five files is 3px at 93px wide. At i1/i2's 46px that renders as about 1.5px, and at i3's 64px about 2.1px — against roughly 3px in today's 96px rendering. On a retina screen this is fine; on a 1× display the thinnest strokes will soften. None of the three upscales the icons (93px is the ceiling and all three sit under it), so this is the raster set showing its limit from the other direction — and the third distinct symptom of the same root cause. The fix is the same one already on the list: redraw the five as SVG.
B4·N1·i1Hexagon stamp, top-left — icon on the photo~860pxThe icon sits in a dark hexagon plate in the top corner, like a seal on the photograph, and the name and short line stay at the bottom. The brand mark and the old icon set arrive together, and the two ends of the tile stay balanced.

The plate is dark, not light, and that was measured rather than chosen: on white the teal icons give 2.60:1 — below the 3:1 floor for graphics. On this plate over a photo they measure about 4.2:1 and the orange ones 3.6:1.

B4·N1·i2Inline lockup — icon beside the name~830pxThe icon replaces the colour rule and locks up horizontally with the name and the short line, all inside the deepest part of the scrim. The tightest of the three, the shortest section on this page since B4 itself, and every icon sits where legibility is already guaranteed.

The icon takes 46px off the copy width, so the short line matters more here than anywhere else — it is the option that most depends on the rewritten copy being approved.

B4·N1·i3Vertical lockup — icon above the name, large~970pxThe icon is given real size — 64px on the small tiles, 88px on the lead — and stacks above the name. The closest of the three to how the icons read on the current homepage, where they are the largest thing in the section.

Buys that size with height: the icon and its margin push the text block to 179px, so the tiles have to grow to 296px and the section lands back near N1's original figure.