Hacker News Reader

Comment by zionic | Hacker News Reader

Maybe this is a good place to ask since there's a lot of web devs here:

What is SO effing hard about drawing within the screen on web?! I can't tell you the number of times I've seen this issue. Just the other day I saw reddit's sign up form is totally broken on iOS, you have to swap between landscape/portrait multiple times and hope whatever garbage layout engine it uses redraws the button inside the screen.

View on HN

It's because designers work with placeholder data. I worked full-time as a dev and saw this over and over and over again. The good designers would adapt, but some never learned.

As soon as you put real data into a website, especially if the website is a CMS that you've handed-off to a _non-technical_ client, it's going to overflow every pretty, grid-based box.

I think it's because almost all web design happens on computer screens, not mobile devices. More important, all web designers show their bosses their creations on a big computer screen in a conference room--the bigger the better so everybody can go "oooh!" and "aaaah!" and the designer can get a big fat raise.

I expect it's fairly rare for the employer of a web designer to give a shit what the site looks like on a phone, which means the designers don't give a shit either.

What's strange about that is that a collection of old devices is very cheap. It's trivial to have a box and test them.

You don't need a collection of devices to test layout issues - just use e.g. Firefox's Responsive Design Mode [0] or another browser's equivalent and resize the viewport to whatever. Same applies for native applications - make your window resizable (it should be resizable anyway) and drag the corner around. Does the content behave and look how you'd expect it to? Good. Otherwise, fix it.

I see this "we can't afford to test on different resolutions" excuse with games that completely break for anything that is not 16:9 a lot. Don't target a fixed size. Don't target a fixed aspect ratio. Don't target a set of aspect ratios. Make your application responsive - you don't need different devices to test that responsiveness.

[0] https://firefox-source-docs.mozilla.org/devtools-user/index....

"People using those devices are not our target demographic."

Then they complain that people in that demographic don't use their product. Because it turns out that people in that demographic exist and they're trapped in a bubble where anyone who is using an old device is a child, elderly person or homeless.

Yep. My favourite was somebody said a device was crap and nobody worth pursuing as customer would be using it ... and it was the same phone our CEO was using.

It starts with the fact that designs, and the development that uses them, usually think in terms of fixed rectangles. You've got a 1920x1080 desktop rectangle and a 375x812 mobile rectangle and rarely is much thought put in to what happens when your viewport is a different size. And what thought that is put in goes toward horizontal differences, since the assumption is that things will just scroll vertically.

But, as you've noticed, with more complex UI (especially modals and toolbars fixed to the screen) it becomes more important that things are built to fit horizontally and vertically. It's not necessarily hard but it does take more thought to work out how things will shrink, grow, scroll, etc.

> What is SO effing hard about drawing within the screen on web?!

It’s because the web’s layout primitives don’t compose well. There’s no easy way to say “this is a full-width container and nothing inside it can go off screen.” As an obvious example, any descendant of that container can use fixed positioning and do whatever it wants. But there are subtler examples that are easier to fall victim to. The way to fix this is to built your own higher-level layout primitives and have conventions or tooling to enforce that you compose them only in approved ways.

> There’s no easy way to say “this is a full-width container and nothing inside it can go off screen.”

  overflow: auto;

> As an obvious example, any descendant of that container can use fixed positioning and do whatever it wants.

Fixed positioning is you explicitly opting out of composability.

> The way to fix this is to built your own higher-level layout primitives and have conventions or tooling to enforce that you compose them only in approved ways.

No, the way to fix it is to look at your DOM and CSS instead of adding more abstractions with broken edge cases on top of your abstractions.

Reply on news.ycombinator.com