2TechniqueSmashing and WebKit
The accordion icon that draws the tap
Vitaly Friedman's guide to accordion icons recommends a downward caret as the default, flipped when the panel opens, with plus and minus as the alternative. Links that go to another page get an underline and no icon at all.
It draws on a 2020 Nielsen Norman Group study of 136 people tapping through 11 mobile mockups. The caret drew more taps on the icon than on the label, yet 29 percent of caret taps still landed on the label, a good reason to make the whole row the target. Plus signs and arrows showed no clear pull toward the icon.
summary::after { content: ""; transition: transform .15s; }
details[open] > summary::after { transform: rotate(180deg); }
summary { display: flex; padding: 14px 0; } /* whole row is the target */
Safari Technology Preview 255 works on clamped text
WebKit's release notes for build 255, out October 22, list changes to line clamping set to auto and block ellipsis, intrinsic sizing for auto-fill grids, implicit line names in subgrid, and the open state on a select that uses native select appearance with a button inside.
3WorkflowLufthansa Systems and Figma
Prototype on the real map, not a picture of it
The Lufthansa team skipped the static mockup. They started from the map the iPad app already uses, pasted their Figma frames into Make, and let real traffic fill the screen, so pilots judged marker sizes against actual density. The team also meets pilots in remote and in-person sessions and on observation flights.
In the post, Juvekar calls Make "a collaborative thinking partner." For a client with a live API, the same order holds: wire the data first, then argue about the pins.
iPhone 18 frames reach Make's preview
Figma's release notes for October 23 add iPhone Duo and iPhone 18 frame presets wherever a mobile frame can be picked, including prototype settings and the device picker in Make's preview.
4Design MoveBorrow this pattern
Let the marker carry the weight
On any map with results of uneven importance, size the markers in a few named classes tied to one real attribute, show the scale in a legend, and give each pin and its card a shared id so hovering or scrolling one lights the other. Lufthansa sizes by aircraft weight; a store locator could size by stock, a venue finder by capacity.
.pin { --d: 24px; width: var(--d); height: var(--d); }
.pin.super { --d: 42px; } .pin.heavy { --d: 34px; }
.pin.large { --d: 28px; } .pin.small { --d: 22px; }
- Use it
- Store locators, rental and real estate search, event venue maps, service area pages.
- Keep it
- Four classes at most, each named in a visible legend, with a number in every pin so size is never the only cue.
- Sync it
- One id per result. The card in view marks its pin, and a hovered pin outlines its card.
On this page: hover a card or scroll, and its pin on the chart lights up.
Build the Chart Search
Build a responsive map search results page, the kind used for a store locator, rental listings or a venue finder. Treat it as a real client page, ready to ship.
Ground and palette: a cool pale blue-grey page ground (#DCE4EA) with a fine dot field (1px ink dots at about 17 percent opacity on a 22px grid). Results sit on near-white cards (#F8FAFB) with deep blue-black ink text (#15202B). One accent, a darker vermilion (#CC4520), for map pins, the main button and rules; slate (#4A5D70) for small labels; a pale blue tint (#EAF0F3) for one highlighted card and hover rows. No gradients, no glow, no neon.
Type: Barlow Condensed 600 for the headline and card headings (tall signage grotesk); B612 400/700 for body at 19px with 1.7 line height, B612 italic for one pullquote; B612 Mono for small uppercase labels only.
Structure:
1. A plain top nav: wordmark left, three links right.
2. A two-column grid, 7 parts to 5. Left: the hero, a nameplate folded into it (a small bordered plate: an ink block with the number, then two labelled fields), a 13ch condensed headline, a two-sentence deck, a vermilion button and a text link that jumps to the map.
3. Right: a sticky map panel that stays in view while the left column scrolls: a heading row with a result count, a contained map illustration with numbered HTML pins placed on it, a legend of four pin sizes in fixed columns, and a numbered results index whose row for the card in view inverts to ink.
4. Pins are sized in four named weight classes tied to one real attribute (48, 36, 27 and 20px circles, about 1.35 times per step, each with its number). Every pin is a link to its card, and each card opens with the same numbered marker, a mono label and a source line.
5. A results header (count, sort label) over a 2px ink rule, then one card per result. Use a dt/dd facts list, one italic pullquote under a 2px vermilion rule, and code blocks on ink where needed.
6. One highlighted card in the pale tint with a 2px ink border for the key pattern, ending in three ruled tips.
7. A small script: an IntersectionObserver marks the pin and index row of the card in view; hovering a card outlines its pin and hovering a pin outlines its card.
8. Footer navigation as three bordered tiles, then a colophon.
Readability and craft guardrails: body text at least 18px with line height at least 1.6 and 60 to 75 characters per line; WCAG AA contrast for every label on its real background, including white numbers on vermilion pins; cards 12px radius, buttons 8px, circles only for pins; one soft shadow, on the map panel only; hover and focus states on every link, pin and button with 150ms easing and a prefers-reduced-motion guard. The map image has no readable text; every label is HTML. No fake search fields or filter toggles, no logo walls, no three identical feature cards, no accent stripe on the left of cards. On mobile the map panel drops below the hero and stops being sticky, the index hides, a slim sticky strip of the seven numbered pins (still sized by class) rides under the top of the screen with the current section name, code blocks wrap, and every split goes to one column.
Works in Claude Code, Figma Make, Framer, v0, Lovable, Cursor and Beaver Builder AI.
