I Rebuilt the Desktop Layout Five Times in Four Days
A service that stayed mobile-only for four months turned out to get 96% of its search traffic from desktop. A record of measuring the dead whitespace, adding a rail, throwing away the two-column cards after 6 hours, and rewriting everything from a design handoff
The legislative-activity tracker collects bills and legislators’ activity in one place, and it had been mobile-only since late May. I had pinned no two-column redesign into the project instructions, and then most of the search traffic turned out to be desktop. On a 1440 screen the body was using half the area, so I had to decide whether to keep the instruction or redraw the layout.
What I set out to do
The legislative-activity tracker had been mobile-only since late May. I had pinned “no two-column redesign” into the project instructions. Then in mid-July the search console showed 96% of traffic coming from desktop. At the time I did only the minimum, widening the body from 600 to 720.
Improve the desktop web a bit. So far I’ve only handled mobile.
How I asked
Before fixing anything I had it measure. On a 1440 screen a 720 body used 50% of the area; on 1920 it was 37.5%. 353px on each side, 600px on each side, was dead whitespace. There were three problems. The horizontal margins, the meta information stacked above the body and pushing it down, and the header floating as a 720 island inside a full-width bar.
Two options came out. Keep the policy and only raise density, or keep the 720 reading width but move only the meta information into the right margin. I went with the second and started with the bill detail page.
Where it broke
Day 1, the rail. At 1280 and above I attached a 320px rail on the right and moved the progress gauge and bill meta there. Screen utilization at 1440 went from 50% to 74%. The implementation used duplicates. To keep the phone’s DOM order, I rendered the meta block twice and hid one side with CSS. The next four commits were all sticky traps. overflow-x: hidden made body the scroll container and killed sticky; switching to clip broke only on one specific Safari version; and the global clip created a fixed header the phone never had.
Day 2, the legislator detail page. Same rail, but this time without duplicates. The block bound for the rail was first in the phone order, so I could put the <aside> first in the DOM and just flip the grid columns. The real cost of duplicates showed up in between. The <details> open state of the two copies drifted apart.
Day 3, home. After attaching the rail I said “make it wider, widen the body too.” The agent pushed back with measurements. Widening the track from 685 to 973 to 1133 left the document height exactly the same at 4,771px. Bill titles ran to 35 characters at p95, so there was no text left to reflow. The extra width becomes empty space inside the cards. As an alternative I picked two-column cards. 1440 screen utilization 90%, document height −36%, 4.5 items per screen became 7.6.
Day 4, afternoon. I pasted a screenshot of the production home and said “can’t you do something about the way it looks broken?” The agent gave four candidates, all wrong. “The break with shadows on the left and right.” The body background and the shell background were the same color, so only the shadows remained and showed as two vertical lines. This is where I stopped the partial fixes.
How I fixed it
Twenty minutes later I came back with a design handoff bundle pulled from a design tool. Light and dark HTML for the bill list and the bill detail page. The agent pointed out that it conflicted with the existing rule set, and the answer was “the handoff as is, redesign for all devices, replace tokens and header globally.” I told it to change everything except the app icon.
The two-column card grid merged 6 hours earlier vanished whole. The home rail, two card components, the achromatic policy, even the “nothing changes at 1023 and below” principle. The bill list became a 3-column table of category, bill, and progress, and the header got its own width of 1360, so the 290px jump between home and search became 0. Ten review rounds produced 17 findings. Contrast below threshold, iOS input auto-zoom, a rail hidden behind infinite scroll and unreachable.
For the bill detail page, the core was the side-by-side comparison of current and amended text. The current and amended versions that had been stacked vertically went into two columns side by side at 780 and above, and the changed spans the server doesn’t provide were computed on the client with word-level LCS (longest common subsequence), marking only the words on the amended side. Putting whitespace into the LCS meant the full replacement verdict never triggered, so I took it out. Full replacement and no change are not marked. That is noise, not information. Day 1’s duplicate rail had zero uses left here and was deleted. That night I cleaned up the two-column search and the legislator detail page colors, and it was done.
Lessons
- Whether width may be increased is judged by document height. If you widen and the height doesn’t drop, the added width is empty space. Widen only when there is room for text to reflow.
- Build rails without duplicates. Put it first in the DOM and change only the position with grid. Duplicates bill you later for state synchronization.
- Even a 6-hour-old structure gets thrown away. The two-column cards had good numbers, but when the overall direction changes there is no reason to keep them. Measurements make that decision easy.
- When partial fixes miss through the fourth candidate, redraw the whole thing. One screenshot and a design handoff changed the course of four days.
- A diff display’s job is removing noise. Exclude whitespace, don’t mark full replacement, mark only the amended side. Skip any of the three and the comparison can’t be read.