9 ms·

> They have ruined web design. But I should probably write a whole article on that. I sure am looking forward to that article, from where I'm sitting they abso

> They have ruined web design. But I should probably write a whole article on that. I sure am looking forward to that article, from where I'm sitting they absolutely saved web design. Before mobile, I absolutely could not get any designer to grok that browser windows were flexible things, and most users were not looking at the web on full-screen browsers on desktop displays. The term "responsive design" didn't even exist until the advent of the smartphone, to the best of my knowledge. Hell, we were still looking down the barrel of an eternity of MSIE 6 support until iOS Safari became important. (and the Youtube thing, of course)

dylan604 5y ago
And Flash. Don't forget the days of Flash only websites.
- grishka 5y ago
  I miss those days.
- the_af 5y ago
  Flash for general websites and for navigation was hellish. But Flash for games? It was a boon. I really enjoyed the early/mid era of Flash games, Kongregate and the like. I'm not arguing for Flash games now, I think there are much better tools today. But back then it was a boon to indie/experimental game developers (and animation artists) and enabled them to develop relatively cheap games and reach a wide audience.
Beltalowda 5y ago
Many sites seem designed for two kinds of devices: huge 29" screens, or small 5" screens. If you use a "normal" laptop things often look less than great. It's not uncommon for some fixed header or whatnot to take up a quarter or even a third of the total screen, especially if you like to zoom text a wee bit.
- vladvasiliu 5y ago
  > Many sites seem designed for two kinds of devices: huge 29" screens, or small 5" screens. I don't know about the 5" screens since I rarely browse the web on my phone, but it's pretty clear to me that most sites are not designed for huge screens. I have a 4K 32" screen, and I've lost count of the number of sites that will expand to take up all the available width and show absurdly long lines of text. And since I'm using a tiling window manager, the window is basically full-screen. One such example: TFA.
  - flobosg 5y ago
    If it is a website I frequent I usually add a custom CSS stylesheet that limits the linewidth to a reasonable length.
    - The_rationalist 5y ago
  - hericium 5y ago
    > And since I'm using a tiling window manager, the window is basically full-screen. Tiling wm works well for me with tall/narrow browser windows utilizing the "phone view". I rarely have full-screen browser window, it's more often 1/4 to 2/3 screen width.
  - StillBored 5y ago
    The problem here is twofold. The first is that css still makes it really hard (AFAIK) to do multi-column text flowing (aka newspaper style). The second is of course using the tiling window manager, I expect that a web page uses the entire browser canvas area its presented with (aka its not putting in 16" margins around a 2" wide bit of text, as is the other common failure). So, I'm fine with the entire web page becoming a single line of text if I give it a 8k pixel wide/40" screen. I will resize it to something more appropriate if that is its problem. edit: Well I would delete this comment, because it looks like its a fixed problem, I guess not doing css for the past 4 years, i'm a bit out of the loop. http://xahlee.info/js/css_multi-column_layout.html http://xahlee.info/js/css_multi-column_layout.html Although its still not 100% reasonable (if i'm understanding), there should be a way to instead of specifing the column counts rather specify roughly the column attributes and have the browser determine the column count and flow the text. You would think `column-count: auto` would do that but at least on ff, that just means `column-count: 1`
grishka 5y ago
So much of modern design is ruined by the existence of touchscreens. People seem to have forgotten that the design of a UI must be guided by the kinds of input devices it will predominantly be used with. Almost no one is designing for mice and keyboards. These days it's mostly touch UIs with some hotkeys and hover cards thrown in.
- k__ 5y ago
  But touch screens are the predominantly used input device.
  - badsectoracula 5y ago
    On mobiles. On laptops, they are the minority but somewhat common i think. I'd guess trackpads are still way more common. On desktops it is mouse and keyboard. And CSS still seems to be unable to differentiate between these three - or even just between mobile/tablet and laptop/desktop (though there are cases where a 27" desktop monitor is not the same as a 14" laptop monitor), which is one of the reasons things are so awful. So people use hacks like minimum width or whatever as shown here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://www.w3schools.com/css/css_rwd_mediaqueries.asp Now it might be w3schools being bad and there is a better way but every single site i see out there that uses responsive design (what a name) does that. Assuming they bother with desktop at all. Not to mention that they assume that all people use browsers in a maximized state. I have a huge monitor so i always keep browsers at around 1000px or less, which often triggers the "oh you are on a mobile, lemme bloat up everything for you" style.
    - grishka 5y ago
      In my personal project, I simply have two sets of templates and which one I use depends on the user agent. It isn't possible to adapt the same exact markup to two input paradigms this different without compromise.
  - anthk 5y ago
    And it sucks. Often the controls are non-discoverable. Compared it to Mac OS 6/7. Everything on the menus was everything you could do. Easy, usable. That was a good GUI. https://jcs.org/wallops https://jcs.org/wallops https://jcs.org/system6c https://jcs.org/system6c
HWR_14 5y ago
> Before mobile, I absolutely could not get any designer to grok that browser windows were flexible things, and most users were not looking at the web on full-screen browsers on desktop displays. Except, before mobile almost everyone was looking at the web on full-screen browsers. Hell, now its hard to convince people that you don't want to download an app to use a webservice. > we were still looking down the barrel of an eternity of MSIE 6 support until iOS Safari became important. It was Chrome that really dislodged MSIE. And, frankly, at least MSIE believed in keeping legacy features available. Whatever else the issues were (and they are legion), MS hated bitrot.
- Eric_WVGG 5y ago
  They were looking at the web on full-screen laptops. Laptops that might be 13", 15", or who knows? And most designers were on full-screen desktops.
  - HWR_14 5y ago
    Full screen desktops before smartphones were also in the 15"-19" range. The idea of a 27" monitor being close to normal is far more modern than smartphones.
dredmorbius 5y ago
Fluid design is easy once you abandon a misplaced obsession with pixel-perfect layouts. The example here works on displays from 3" to 30" (and presumably larger): https://codepen.io/dredmorbius/full/KpMqqB https://codepen.io/dredmorbius/full/KpMqqB I've used that as the foundation for more complex designs. Fluid is nice. It's hardly complicated of itself, though of course, a sufficiently brittle design will make it so.

dylan604 5y ago

And Flash. Don't forget the days of Flash only websites.

grishka 5y ago
I miss those days.
the_af 5y ago
Flash for general websites and for navigation was hellish. But Flash for games? It was a boon. I really enjoyed the early/mid era of Flash games, Kongregate and the like. I'm not arguing for Flash games now, I think there are much better tools today. But back then it was a boon to indie/experimental game developers (and animation artists) and enabled them to develop relatively cheap games and reach a wide audience.

Beltalowda 5y ago

Many sites seem designed for two kinds of devices: huge 29" screens, or small 5" screens. If you use a "normal" laptop things often look less than great. It's not uncommon for some fixed header or whatnot to take up a quarter or even a third of the total screen, especially if you like to zoom text a wee bit.

vladvasiliu 5y ago
> Many sites seem designed for two kinds of devices: huge 29" screens, or small 5" screens. I don't know about the 5" screens since I rarely browse the web on my phone, but it's pretty clear to me that most sites are not designed for huge screens. I have a 4K 32" screen, and I've lost count of the number of sites that will expand to take up all the available width and show absurdly long lines of text. And since I'm using a tiling window manager, the window is basically full-screen. One such example: TFA.
- flobosg 5y ago
  If it is a website I frequent I usually add a custom CSS stylesheet that limits the linewidth to a reasonable length.
  - The_rationalist 5y ago
- hericium 5y ago
  > And since I'm using a tiling window manager, the window is basically full-screen. Tiling wm works well for me with tall/narrow browser windows utilizing the "phone view". I rarely have full-screen browser window, it's more often 1/4 to 2/3 screen width.
- StillBored 5y ago
  The problem here is twofold. The first is that css still makes it really hard (AFAIK) to do multi-column text flowing (aka newspaper style). The second is of course using the tiling window manager, I expect that a web page uses the entire browser canvas area its presented with (aka its not putting in 16" margins around a 2" wide bit of text, as is the other common failure). So, I'm fine with the entire web page becoming a single line of text if I give it a 8k pixel wide/40" screen. I will resize it to something more appropriate if that is its problem. edit: Well I would delete this comment, because it looks like its a fixed problem, I guess not doing css for the past 4 years, i'm a bit out of the loop. http://xahlee.info/js/css_multi-column_layout.html http://xahlee.info/js/css_multi-column_layout.html Although its still not 100% reasonable (if i'm understanding), there should be a way to instead of specifing the column counts rather specify roughly the column attributes and have the browser determine the column count and flow the text. You would think `column-count: auto` would do that but at least on ff, that just means `column-count: 1`

grishka 5y ago

So much of modern design is ruined by the existence of touchscreens. People seem to have forgotten that the design of a UI must be guided by the kinds of input devices it will predominantly be used with. Almost no one is designing for mice and keyboards. These days it's mostly touch UIs with some hotkeys and hover cards thrown in.

k__ 5y ago
But touch screens are the predominantly used input device.
- badsectoracula 5y ago
  On mobiles. On laptops, they are the minority but somewhat common i think. I'd guess trackpads are still way more common. On desktops it is mouse and keyboard. And CSS still seems to be unable to differentiate between these three - or even just between mobile/tablet and laptop/desktop (though there are cases where a 27" desktop monitor is not the same as a 14" laptop monitor), which is one of the reasons things are so awful. So people use hacks like minimum width or whatever as shown here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://www.w3schools.com/css/css_rwd_mediaqueries.asp Now it might be w3schools being bad and there is a better way but every single site i see out there that uses responsive design (what a name) does that. Assuming they bother with desktop at all. Not to mention that they assume that all people use browsers in a maximized state. I have a huge monitor so i always keep browsers at around 1000px or less, which often triggers the "oh you are on a mobile, lemme bloat up everything for you" style.
  - grishka 5y ago
    In my personal project, I simply have two sets of templates and which one I use depends on the user agent. It isn't possible to adapt the same exact markup to two input paradigms this different without compromise.
- anthk 5y ago
  And it sucks. Often the controls are non-discoverable. Compared it to Mac OS 6/7. Everything on the menus was everything you could do. Easy, usable. That was a good GUI. https://jcs.org/wallops https://jcs.org/wallops https://jcs.org/system6c https://jcs.org/system6c

HWR_14 5y ago

> Before mobile, I absolutely could not get any designer to grok that browser windows were flexible things, and most users were not looking at the web on full-screen browsers on desktop displays. Except, before mobile almost everyone was looking at the web on full-screen browsers. Hell, now its hard to convince people that you don't want to download an app to use a webservice. > we were still looking down the barrel of an eternity of MSIE 6 support until iOS Safari became important. It was Chrome that really dislodged MSIE. And, frankly, at least MSIE believed in keeping legacy features available. Whatever else the issues were (and they are legion), MS hated bitrot.

Eric_WVGG 5y ago
They were looking at the web on full-screen laptops. Laptops that might be 13", 15", or who knows? And most designers were on full-screen desktops.
- HWR_14 5y ago
  Full screen desktops before smartphones were also in the 15"-19" range. The idea of a 27" monitor being close to normal is far more modern than smartphones.

dredmorbius 5y ago

Fluid design is easy once you abandon a misplaced obsession with pixel-perfect layouts. The example here works on displays from 3" to 30" (and presumably larger): https://codepen.io/dredmorbius/full/KpMqqB https://codepen.io/dredmorbius/full/KpMqqB I've used that as the foundation for more complex designs. Fluid is nice. It's hardly complicated of itself, though of course, a sufficiently brittle design will make it so.