5 ms·

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 an

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.

spystath 8y ago
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.
- dredmorbius 8y ago
  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 https://codepen.io/dredmorbius/pen/KpMqqB
- carussell 8y ago
  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.
zeveb 8y ago
> 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.
- kalleboo 8y ago
  It was a Windowsism, but I guess these days it's a smartphone/tabletism
  - WorldMaker 8y ago
    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.
- octorian 8y ago
  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).
  - Zardoz84 8y ago
Retric 8y ago
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.
- kccqzy 8y ago
  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.
  - Retric 8y ago
    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.
cpburns2009 8y ago
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.
- dawnerd 8y ago
  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 https://github.com/firstandthird/clientkit
  - mkhalil 8y ago
    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/ http://clientkit.io/ looks for me: https://i.imgur.com/H3wYjba.png https://i.imgur.com/H3wYjba.png
    - dawnerd 8y ago
      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 http://leanin.org
      - jamesgeck0 8y ago
        That website also snaps into a mobile-optimized design at 960px width.
    - ealhad 8y ago
      Well, wow. And it’s not even missing JS or anything.
evan_ 8y ago
Similar to that is that a lot of desktop sites often don’t look right if the window is taller than it is wide.
jkmcf 8y ago
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.

spystath 8y ago

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.

dredmorbius 8y ago
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 https://codepen.io/dredmorbius/pen/KpMqqB
carussell 8y ago
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.

zeveb 8y ago

> 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.

kalleboo 8y ago
It was a Windowsism, but I guess these days it's a smartphone/tabletism
- WorldMaker 8y ago
  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.
octorian 8y ago
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).
- Zardoz84 8y ago

Retric 8y ago

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.

kccqzy 8y ago
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.
- Retric 8y ago
  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.

cpburns2009 8y ago

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.

dawnerd 8y ago
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 https://github.com/firstandthird/clientkit
- mkhalil 8y ago
  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/ http://clientkit.io/ looks for me: https://i.imgur.com/H3wYjba.png https://i.imgur.com/H3wYjba.png
  - dawnerd 8y ago
    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 http://leanin.org
    - jamesgeck0 8y ago
      That website also snaps into a mobile-optimized design at 960px width.
  - ealhad 8y ago
    Well, wow. And it’s not even missing JS or anything.

evan_ 8y ago

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

jkmcf 8y ago

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.