7 ms·

Show HN: Density userstyle to remove spacing from popular websites

92 points by phil294 4y ago

akrymski 4y ago
All of these are CRUD apps. Can we not standardize a universal interface for such apps? Something like Norton Commander for the web? I can imagine using the same UI to browse HN/Twitter/GitHub ...
phil294 4y ago
Hello, imo the trend of websites adding more spacing (padding) as the years go by is annoying, so I decided to do something about it. I hope this to become a manually curated, collaborative effort, but so far the 500 lines CSS are for GitHub, GitLab, Reddit and Twitter only.
- wuyishan 4y ago
  Thanks for building this! Especially on small screens the (useless?) whitespace is annoying and rather distracting. The problem with whitespace (or also colored whitespace) is in my opinion a true problem on mobile devices too. The ratio between available information and screen estate is oftentimes very off.
  - sokoloff 4y ago
    I have a gallery of screenshots from Zoom meetings where (mostly tech workers) are pushing 50-70% content-free pixels in their screen share. 75% of the time, I just find it amusing, but 25% of the time it drives me crazy. I wonder what they’re thinking when they start a screen share to push so few pixels of content.
- gruez 4y ago
  I tried out the github style and while I liked the increased density, the lack of padding caused issues on a 27" monitor. For instance, the file listing ended up taking up almost the entire width of the monitor, which made it hard to read because it was too wide[1]. [1] https://graphicdesign.stackexchange.com/questions/13724/recommended-column-width-for-text-reading-digital-vs-printed https://graphicdesign.stackexchange.com/questions/13724/reco...
  - phil294 4y ago
    Thanks for your input. Yes, but I don't really know how to fix it. I mean we could add a guideline for future rules (and update the existing ones) to always use `max-width 45em` or the like for text instead of `100%`, whenever possible. That would complicate things quite a bit though, currently it's as easy as it gets... I am also not super sold on capping max width. My personal take is, if text gets unreadable for you on a 27 inch screen, then don't buy a 27 inch screen, or at least resize the browser window accordingly. I haven't grasped yet why anyone would want to have a large widescreen display/window for reading text, I think it's only counterproductive. That is admittedly a rather egoistic take though, and insane screen resolutions are seemingly becoming the norm now, so I don't know what to do.
radiojasper 4y ago
As a web designer, I love the white space. Calms the web down. Your screenshot is giving me the heebie jeebies.
- adambatkin 4y ago
  But I think that's the problem. For some things, the "form" is important, things like marketing sites, maybe prose. But for sites that are supposed to be highly functional, information density (function) should always win out. That's not to say that it shouldn't still be presented nicely, and that may make it more difficult. But when I'm browsing files or commit history on GitHub, the more stuff I can see at one time, the more useful it is.
  - gravypod 4y ago
    At work we have many internal systems with no padding, confirmation models, etc which are used for development tasks. I am usually afraid when interacting with them and others do not seem to understand why. Recently I made a mistake where I had to click "Accept" on each item in a row of ~100 items. It's a simple HTTP webserver where every button is an <a> and does a new page load which causes a new paint. I accidentally clicked "Revert" on 3 / 100 items because when things reloaded I clicked too soon and the "Accept" / "Revert" buttons are horizontally aligned but vertically offset. Spacing/padding/alignment improves UX for tools when used correctly.
    - sokoloff 4y ago
      The need to click Accept on 100/100 items one-by-one seems like the bigger UX failure than the alignment of the buttons.
      - netsharc 4y ago
        At that point I'd use the Developer Tools to make each link open in a new window, and then a loop that simulates a click of each Accept link.
ohCh6zos 4y ago
This is awesome. I can't think of a website I visit that would not benefit from higher density.
- mattlondon 4y ago
  Hacker news is already pretty dense. You'd not gain much by cramming in an extra line or two at the cost of legibility
  - toastal 4y ago
    Dense and doesn't respect the user's default font size so it always appears way too small.
barnabee 4y ago
Great idea, thanks!
ftio 4y ago
At a previous company, we had strong feedback from sales that prospects thought our legacy, cash-cow product looked old and outdated. They were right, and those first impressions are hard to shake. We lost deals (in part) because of design. We did a minor design update in a beta release that introduced ~30% more vertical padding in lists. Beta testers (long-time customers) hated it. They were pros. They could not only handle the density, but the density enabled key workflows that the additional padding broke. We ended up making the whitespace preference-controlled. Defaulted to on for new users; defaulted to off for existing users. Solved the sales problem while keeping our long-time customers happy. For infrequently-used tools, especially transactional ones (e.g., Google Maps), additional whitespace seems to improve legibility, usability, and ultimately engagement. For power-user tools like GitHub in which users spend hours of their time every week, I want to see an industry shift "back" to denser UIs. Power users can handle them and typically benefit from them greatly.
- nine_k 4y ago
  GMail has three density settings. which mostly affect the amount of whitespace.
  - zagrebian 4y ago
    The HTML version of Gmail is also very dense, maybe even the densest of all Gmail versions.
    - llagerlof 4y ago
      I only use html gmail. Not because the default GUI is bad, but because its too heavy. Look at these numbers. I just opened here, clicked nothing: "393 request, 5.7 MB transferred, 34.3MB resources" It's crazy.
      - nine_k 4y ago
        It's an SPA, so it's more like `apt install` than a normal page load. Much of it sits in cache afterwards, and the traffic is reasonable. What I do dislike about Gmail is its propensity to consume CPU sometimes, but it's not the worst offender.
yewenjie 4y ago
This is a super cool idea but I wish this project becomes popular so that there emerges a consistent style that does not look 'broken'.
cwillu 4y ago
Now we just need userstyles to eliminate floating headers/footers.
- phil294 4y ago
  It's funny you say that because I've been considering doing exactly the opposite: Adding a curated user style sheet for common websites which adds floating headers/sticky scroll/contextual scroll/semantic scroll/whatever you call it. Like this one for HN[1] (also mine), but everywhere. I'd honestly be curious why you dislike floating headers? Especially for navigation, I think it is preferable. I regularly make use of it, like here [2] (also mine, sorry for all of that) [1] https://greasyfork.org/en/scripts/427429-hacker-news-contextual-comments-sticky-tree https://greasyfork.org/en/scripts/427429-hacker-news-context... [2] https://phil294.github.io/AHK_X11/ https://phil294.github.io/AHK_X11/
  - cwillu 4y ago
    I _never_ have any use for “tools” while I'm reading something. I do have a use for seeing a couple more lines of text at the top and bottom of the screen. Edit: I actually lied, I have often wished I could get to ublock's “select element” control a little easier. Because I so often have to kill obnoxious floating elements :D
    - 57FkMytWjyFu 4y ago
      You may find this useful, although you have to tap it for each visit. https://addons.mozilla.org/en-US/firefox/addon/kill-sticky/ https://addons.mozilla.org/en-US/firefox/addon/kill-sticky/
  - philsnow 4y ago
    My two complaints about floating headers / footers: - they grow over time, so at first 90% of the vertical space is for content but later it becomes closer to 70% or worse. - they hide the content that's underneath them, but hitting 'space' (or pgdn) still scrolls a screen's worth of content scrolls, say, 1000 vertical pixels even though you can only see 900-700 pixels' worth of content at a time. I'm forced to either scroll with a mouse wheel, trackpad, etc, or else pgdn and then up-arrow a couple times. I don't know shit about fuck re: modern web design (I first learned from an ORielly book titled "Dynamic HTML / the definitive reference (2nd edition)"). iframes do the right thing where pgdn scrolls one iframe-height worth of content, but I guess you'd have to have your header/footer "contain" the content as an iframe, and that's weird?
UIUC_06 4y ago
I have a Chrome extension that disables JS for a specific site. It's for getting around (some) paywalls. If you want to be pedantic, let me save you the trouble: no, it doesn't work for all of them. So I picture a "Densify" browser extension as well. How exactly that would work is left as an exercise for the reader.
inasmuch 4y ago
Love it. I just wanna say if anyone is looking for a designer whose tastes diverge from the other in this thread and who is dying for a chance to design an attractive, effective, and dense app (Ableton Live, anyone?), please let me know.
- dt2m 4y ago
  Ha, I was just about to make a comment about how the Ableton interface is a perfect example of a dense UI still going strong. Wish I could say the same for most new VST plugins that think I want a delay effect to take up half of my monitor. Another positive side effect of dense UIs is that they work as noob repellant. I've heard SO many people mention they chose Logic instead of Ableton "because it looks like Windows 95". That's all you need to tell me about how your mind works lol.
6510 4y ago
wonderful! Stuff on the right is overly spacious now.
zagrebian 4y ago
I had no idea that you could put an Install button on a web page that opens Stylus’s editor.
Yahivin 4y ago
Next steps: - Get rid of the rounded buttons - Add some sick drop shadow - Party like it's 1999

92 points by phil294 4y ago

All of these are CRUD apps. Can we not standardize a universal interface for such apps? Something like Norton Commander for the web? I can imagine using the same UI to browse HN/Twitter/GitHub ...

phil294 4y ago

Hello, imo the trend of websites adding more spacing (padding) as the years go by is annoying, so I decided to do something about it. I hope this to become a manually curated, collaborative effort, but so far the 500 lines CSS are for GitHub, GitLab, Reddit and Twitter only.

wuyishan 4y ago
Thanks for building this! Especially on small screens the (useless?) whitespace is annoying and rather distracting. The problem with whitespace (or also colored whitespace) is in my opinion a true problem on mobile devices too. The ratio between available information and screen estate is oftentimes very off.
- sokoloff 4y ago
  I have a gallery of screenshots from Zoom meetings where (mostly tech workers) are pushing 50-70% content-free pixels in their screen share. 75% of the time, I just find it amusing, but 25% of the time it drives me crazy. I wonder what they’re thinking when they start a screen share to push so few pixels of content.
gruez 4y ago
I tried out the github style and while I liked the increased density, the lack of padding caused issues on a 27" monitor. For instance, the file listing ended up taking up almost the entire width of the monitor, which made it hard to read because it was too wide[1]. [1] https://graphicdesign.stackexchange.com/questions/13724/recommended-column-width-for-text-reading-digital-vs-printed https://graphicdesign.stackexchange.com/questions/13724/reco...
- phil294 4y ago
  Thanks for your input. Yes, but I don't really know how to fix it. I mean we could add a guideline for future rules (and update the existing ones) to always use `max-width 45em` or the like for text instead of `100%`, whenever possible. That would complicate things quite a bit though, currently it's as easy as it gets... I am also not super sold on capping max width. My personal take is, if text gets unreadable for you on a 27 inch screen, then don't buy a 27 inch screen, or at least resize the browser window accordingly. I haven't grasped yet why anyone would want to have a large widescreen display/window for reading text, I think it's only counterproductive. That is admittedly a rather egoistic take though, and insane screen resolutions are seemingly becoming the norm now, so I don't know what to do.

radiojasper 4y ago

As a web designer, I love the white space. Calms the web down. Your screenshot is giving me the heebie jeebies.

adambatkin 4y ago
But I think that's the problem. For some things, the "form" is important, things like marketing sites, maybe prose. But for sites that are supposed to be highly functional, information density (function) should always win out. That's not to say that it shouldn't still be presented nicely, and that may make it more difficult. But when I'm browsing files or commit history on GitHub, the more stuff I can see at one time, the more useful it is.
- gravypod 4y ago
  At work we have many internal systems with no padding, confirmation models, etc which are used for development tasks. I am usually afraid when interacting with them and others do not seem to understand why. Recently I made a mistake where I had to click "Accept" on each item in a row of ~100 items. It's a simple HTTP webserver where every button is an <a> and does a new page load which causes a new paint. I accidentally clicked "Revert" on 3 / 100 items because when things reloaded I clicked too soon and the "Accept" / "Revert" buttons are horizontally aligned but vertically offset. Spacing/padding/alignment improves UX for tools when used correctly.
  - sokoloff 4y ago
    The need to click Accept on 100/100 items one-by-one seems like the bigger UX failure than the alignment of the buttons.
    - netsharc 4y ago
      At that point I'd use the Developer Tools to make each link open in a new window, and then a loop that simulates a click of each Accept link.

ohCh6zos 4y ago

This is awesome. I can't think of a website I visit that would not benefit from higher density.

mattlondon 4y ago
Hacker news is already pretty dense. You'd not gain much by cramming in an extra line or two at the cost of legibility
- toastal 4y ago
  Dense and doesn't respect the user's default font size so it always appears way too small.

barnabee 4y ago

Great idea, thanks!

ftio 4y ago

At a previous company, we had strong feedback from sales that prospects thought our legacy, cash-cow product looked old and outdated. They were right, and those first impressions are hard to shake. We lost deals (in part) because of design. We did a minor design update in a beta release that introduced ~30% more vertical padding in lists. Beta testers (long-time customers) hated it. They were pros. They could not only handle the density, but the density enabled key workflows that the additional padding broke. We ended up making the whitespace preference-controlled. Defaulted to on for new users; defaulted to off for existing users. Solved the sales problem while keeping our long-time customers happy. For infrequently-used tools, especially transactional ones (e.g., Google Maps), additional whitespace seems to improve legibility, usability, and ultimately engagement. For power-user tools like GitHub in which users spend hours of their time every week, I want to see an industry shift "back" to denser UIs. Power users can handle them and typically benefit from them greatly.

nine_k 4y ago
GMail has three density settings. which mostly affect the amount of whitespace.
- zagrebian 4y ago
  The HTML version of Gmail is also very dense, maybe even the densest of all Gmail versions.
  - llagerlof 4y ago
    I only use html gmail. Not because the default GUI is bad, but because its too heavy. Look at these numbers. I just opened here, clicked nothing: "393 request, 5.7 MB transferred, 34.3MB resources" It's crazy.
    - nine_k 4y ago
      It's an SPA, so it's more like `apt install` than a normal page load. Much of it sits in cache afterwards, and the traffic is reasonable. What I do dislike about Gmail is its propensity to consume CPU sometimes, but it's not the worst offender.

yewenjie 4y ago

This is a super cool idea but I wish this project becomes popular so that there emerges a consistent style that does not look 'broken'.

cwillu 4y ago

Now we just need userstyles to eliminate floating headers/footers.

phil294 4y ago
It's funny you say that because I've been considering doing exactly the opposite: Adding a curated user style sheet for common websites which adds floating headers/sticky scroll/contextual scroll/semantic scroll/whatever you call it. Like this one for HN[1] (also mine), but everywhere. I'd honestly be curious why you dislike floating headers? Especially for navigation, I think it is preferable. I regularly make use of it, like here [2] (also mine, sorry for all of that) [1] https://greasyfork.org/en/scripts/427429-hacker-news-contextual-comments-sticky-tree https://greasyfork.org/en/scripts/427429-hacker-news-context... [2] https://phil294.github.io/AHK_X11/ https://phil294.github.io/AHK_X11/
- cwillu 4y ago
  I _never_ have any use for “tools” while I'm reading something. I do have a use for seeing a couple more lines of text at the top and bottom of the screen. Edit: I actually lied, I have often wished I could get to ublock's “select element” control a little easier. Because I so often have to kill obnoxious floating elements :D
  - 57FkMytWjyFu 4y ago
    You may find this useful, although you have to tap it for each visit. https://addons.mozilla.org/en-US/firefox/addon/kill-sticky/ https://addons.mozilla.org/en-US/firefox/addon/kill-sticky/
- philsnow 4y ago
  My two complaints about floating headers / footers: - they grow over time, so at first 90% of the vertical space is for content but later it becomes closer to 70% or worse. - they hide the content that's underneath them, but hitting 'space' (or pgdn) still scrolls a screen's worth of content scrolls, say, 1000 vertical pixels even though you can only see 900-700 pixels' worth of content at a time. I'm forced to either scroll with a mouse wheel, trackpad, etc, or else pgdn and then up-arrow a couple times. I don't know shit about fuck re: modern web design (I first learned from an ORielly book titled "Dynamic HTML / the definitive reference (2nd edition)"). iframes do the right thing where pgdn scrolls one iframe-height worth of content, but I guess you'd have to have your header/footer "contain" the content as an iframe, and that's weird?

UIUC_06 4y ago

I have a Chrome extension that disables JS for a specific site. It's for getting around (some) paywalls. If you want to be pedantic, let me save you the trouble: no, it doesn't work for all of them. So I picture a "Densify" browser extension as well. How exactly that would work is left as an exercise for the reader.

inasmuch 4y ago

Love it. I just wanna say if anyone is looking for a designer whose tastes diverge from the other in this thread and who is dying for a chance to design an attractive, effective, and dense app (Ableton Live, anyone?), please let me know.

dt2m 4y ago
Ha, I was just about to make a comment about how the Ableton interface is a perfect example of a dense UI still going strong. Wish I could say the same for most new VST plugins that think I want a delay effect to take up half of my monitor. Another positive side effect of dense UIs is that they work as noob repellant. I've heard SO many people mention they chose Logic instead of Ableton "because it looks like Windows 95". That's all you need to tell me about how your mind works lol.

6510 4y ago

wonderful! Stuff on the right is overly spacious now.

zagrebian 4y ago

I had no idea that you could put an Install button on a web page that opens Stylus’s editor.

Yahivin 4y ago

Next steps: - Get rid of the rounded buttons - Add some sick drop shadow - Party like it's 1999