Home Roadmap Mobile Optimization — v1
The home page as a phone meets it, four ways: as it stands today, and under the three options in the proposal. Section 01 is the real thing at real size — the controls in those frames are the site's own, painted by the site's own rules. Section 02 draws the same four as blocks, because a whole page is four screens long and a frame can only show one.
Each frame is exactly 390×844: one phone screen. Whatever is inside it is what somebody sees without scrolling, and the bottom edge of the frame is the fold. Scroll inside a frame for the rest of the page.
Scroll sideways for the other three. The controls below are real: .sign,
.cbx, .findem, .stop, .act and
.pill, lifted out of index.html's stylesheet and re-scoped so
they cannot collide with this bench's own classes. Nothing here is wired up
— pressing things does nothing, and the map's dots are placed by hand rather than
by the real projection.
The same four, at about a twelfth of size, so all four screens fit. Every block is its real measured height; every dashed line is a fold. Switch Show to 20 and watch what happens to the map — that single change is the argument for one option over the other three.
Where the three things a reader is looking for actually land. Lower is better in every row.
Costs are estimates and are marked as such. Everything with a number in pixels or screens was measured.
Thirteen kinds of control are under 44×44 at 390px. These are not all the same kind of miss, and the last row is not a miss at all.