Hacker News new | ask | show | jobs
by chrismorgan 1917 days ago
On the web, people came up with the concept of “mobile-first”, meaning that you should first of all make sure everything can work with the smallest size, and then add whatever adjustments, improvements, extra functionality due to size, &c. for larger screens after that.

(Of course, in practice people made a hash of it (as they always do) and it often became mobile-only design, with users of larger screens getting a comically bad experience that was manifestly designed for tiny screens; but that’s not the idea of mobile-first.)

I’d say it’s generally a sound philosophy, even though at larger sizes you may desire to recompose the UI quite substantially. It’s generally easier and/or safer to design for small screens and reformat or add extras for larger screens, rather than to design for large screens and reformat or remove for smaller screens.

But people definitely regularly don’t go small enough in their idea of “mobile”. I decided some years ago that I would target 300px as my baseline width, and I feel that’s served me well. (And if convenient, I make it work past 260px.) 300px is a bit smaller than anything mainstream, and is thus pretty safe. (I haven’t often done much that needs a baseline height, but I’d use 300px and/or 450px there, considering both portrait and landscape usage as necessary or applicable.)

1 comments

Something that I do that most people seem to miss is disable sticky headers below a certain height. It's super easy to do with a simple media query.

I used to use a square-screened BlackBerry 10 device, and the number of websites that didn't do this was infuriating, and I made frequent use of a "Kill Sticky" bookmarklet. But everyone runs into this issue at some point just by turning their phone to landscape mode, which most web developers evidently don't test with.

I came here to bring this up, I use a Key2 daily and have used a UniHertz Titan for a time. Many applications don't handle odd screen aspects very gracefully. (Like Instagram opting for zooming stories instead of lettering).

But sticky headers are the bane of my existence.