Building interfaces that survive contact with real devices
A layout that holds up on a desk monitor can fall apart on a three-year-old phone. Some habits that stop that happening.
Sample post. This entry is placeholder content used to build out the journal. It is not a statement by or about Tecnicubes.
Most layout bugs are not really layout bugs. They are assumptions — about width, about font loading, about how much text a field will hold — that were true on the machine where the work was done and false everywhere else.
Design at the edges first
Start at 320px and at your widest supported width, not in the comfortable middle. The middle almost always works. If a composition survives both edges, everything between them tends to follow.
- Give every scrollable region an explicit overflow strategy
- Cap line length in characters, not pixels
- Reserve space for images before they load
- Test with the longest string the field actually allows
Measure, don’t estimate
A horizontal scrollbar is easy to miss and hard to ignore once seen. Assert against it in the browser rather than checking by eye, and the class of bug disappears for good.
// Fails loudly instead of quietly ruining every phone
const overflowing =
document.documentElement.scrollWidth > window.innerWidth + 1;The device you build on is the least representative device your work will ever run on.
Budget before you optimise
Decide what the page is allowed to cost before writing it. A number agreed up front is a design constraint; a number measured afterwards is only ever a disappointment.