Hacker News Reader

Comment by strmpnk | Hacker News Reader

The big problem I have started seeing is web design assuming you always browse using a maximized window. Combine this with a prevalent market of wide screens and most sites won’t look right without at least 1200px. So once you put anything like a toolbar or inspector on this side, you have a problem.

Designers of many sites I have to use daily seem to assume I’d never want to see two windows at once, let alone rearrange my UI or use non-widescreen devices. The responsive sites can be even worse too since they’ll snap into a mobile layout at anything less than 1000px wide or so and then increase all of the margins and icon sizes for touch accuracy purposes. It looks extremely silly and wastes even more space than these layers of toolbars hanging around the edge of a browser.

View on HN

Not only that, but many websites tend to have very large left and right margins. One would expect that by reducing the width of the browser window the margins would be adjusted but instead the website either "won't fit" in the resized window requiring you to scroll horizontally or will reduce the width of the central column.

My preferred styling is for a modest padding (2-4 em), auto margins, an auto width, with a max defined width of ~30 - 45 em units.

See: https://codepen.io/dredmorbius/pen/KpMqqB

That's people doing margins wrong. They see a CSS property called 'margin' and go for that, which ends up only working well for displays and window sizes comparable to their own. What they should be using 'margin' for is to specify the minimum outer padding and combine it with 'max-width' to allow the browser to apply flexible margins appropriate for whatever window size the reader actually has.

Another problem is the default styles for Bootstrap (which is very convenient for those of us who aren't graphic designers). If you resize or snap your windows to be half-width, they'll be relegated to the mobile styles. Bootstrap does this when the view width is at 960px or less which is exactly half of a 1080 screen (1920px). So even if your windows had no borders, you'll still end up with the mobile styles.

We ended up building our own framework to solve for that with a simple tank confit if we need to change the breakpoints. Bootstrap was just too big yet too limiting for all of our client work. We don’t force the mobile menu either.

https://github.com/firstandthird/clientkit

You might want to look at your website before trying to get the word out about your UI framework:

This is how http://clientkit.io/ looks for me:

https://i.imgur.com/H3wYjba.png

Yeah that’s been on the back burner for a while. It’s using an extremely old version and frankly I forgot about it until you mentioned. :/

We’re using the latest version on http://leanin.org

That website also snaps into a mobile-optimized design at 960px width.

Well, wow. And it’s not even missing JS or anything.

Oh is that why mobile design seems to have taken over so much! I keep running into sites with uselessly gigantic fonts and big square buttons, and I assumed it was either laziness and an assumption that everyone is browsing on a phone, or just another inexplicable designer fad. Do people really just not use portrait-mode windows?

> The big problem I have started seeing is web design assuming you always browse using a maximized window.

That's been a problem for roughly twenty years now. Way back in the 1990s (on a 4:3 CRT, natch) I started out with half the screen dedicated to my browser and the other half left free for other things (back in those days it was normal to have many windows open at once on a Mac screen — weird how we have so many more pixels now, but typically just have one thing on the screen at a time!).

Eventually I had to stop doing that, because so many sites assumed that I'd have the browser opened full-screen. At the time, I believed that to have originally been a Windows-ism, but I don't know anymore if that was really the case.

Even though I love my tiling WM, I do kinda miss the days when I'd have multiple windows open. Now, I have a second, portrait-mode, monitory — but I only have code on it, and leave my browser on the landscape-mode screen.

It was a Windowsism, but I guess these days it's a smartphone/tabletism

It's funny too because these days in Windows it's so easy to tile to halves or quadrants (the semi-maximized "snap" states and their mouse and keyboard shortcuts), yet macOS seems to have regressed to mostly encouraging only full screen/maximized apps (with most tiling options disappeared from system menus and now seemingly relegated to third party tools) and so many web developers seem to be on macOS these days.

I'd actually argue that Windows handles "not maximizing things" better than Mac from a usability perspective.

Sure, the visual treatment of maximized windows felt "more natural" on Windows, but the Mac's #$@&! global menu bar often made moving between multiple non-maximized apps more annoying (especially on a large display).

Indeed. I have global menu on KDE with a multimotor setup. Nearly enforces to use a "click to focus" policy, as if you have a "follow the mouse" focus policy, is pretty annoying. Doing weird mouse moventa to avoid the focus being stoked, isn't fun. Also, I enabled having the app menu on the windows border icon (you can have both options enabled). I find it very usable and I'm begin to use it more that the global menu bar.

I'd upvote this comment more if I could.

Since the 90s, my first test with any new design was to resize the browser and see how the page reacts. Most of the time they failed.

Similar to that is that a lot of desktop sites often don’t look right if the window is taller than it is wide.

A 4.8 inch Galaxy S for example is 720x1280 or 1280x720. iPhone 6 1334 x 750 or 750 x 1334.

Really, a small resolution laptop is vastly less common than mobile on most websites. Looking ugly but working for group A is much better than not working for larger group B.

I don't think you understand how browsers on mobile report resolutions. Those HiDPI devices report widths and heights as the actual widths and heights divided by the device pixel ratio.

I can tell you how the iPhone responds to CSS media in our test setup, should I be doing something else?

Yea, iPhone X should say 812px width landscape etc, but that's not necessarily happening.

Reply on news.ycombinator.com