> To make the website more readable, we’ll limit the content width
Please don't do this. Despite what usability studies say, I prefer wide content over scrolling every few seconds and having to make my eyes follow the moving text. I, the user, can already control the content width by resizing my browser, thank you very much.
jancsika 10 minutes ago [-]
> I, the user, can already control the content width by resizing my browser, thank you very much.
Nearly every techie and non-techie I know has a bazillion tabs open 100% of the time. The likelihood that even the top 10 are all single-column text is 0%. And I'd sooner read web pages hot off a dot matrix printer than constantly pecking at the edge of an un-maximized window, resizing it like some kind of meth-addled chicken.
Note: I may be overstating slightly for effect.
shayief 59 minutes ago [-]
I actually prefer limited content width for prose content. Full width content on wide screens requires moving eyes all the way from one side to another for every line.
yosefk 33 minutes ago [-]
The real problem is that the browser won't let you control the width of a tab without resizing the browser window, which is a bit fiddly, exposes stuff behind the window, and makes you resize the window again and again when moving between tabs.
If you could easily shrink a tab, I would prefer websites to not limit text width. Since you can't, I sorta prefer them to do it, though it's much worse than the user controlling it in a nice per tab way
rixed 38 seconds ago [-]
[delayed]
Cockbrand 11 minutes ago [-]
You could use the browser's dev tools to emulate a narrower viewport.
It should also be almost trivial to create a browser extension for this, if it doesn't even exist yet.
galaxyLogic 36 minutes ago [-]
Right, if you have wide columns then you have to move eyes BOTH from left to right AND when you reach the end of the line you have to move them back to left AND down to next line. Whereas if the line is narrow enough to read without moving eyes horizontally you only need to move your eyes down after each line.
froddd 23 minutes ago [-]
If a text-heavy website does not constrain the width of its content, what do you tend to resize the browser to? Does it depend on text size? Or other factors?
geokon 2 hours ago [-]
you can also just display text with multicolumn.
solves the paragraph width "usability" and uses the full screen space
not sure why its never used..
I also really dislike the current trend of giant white sidebars
shdon 2 hours ago [-]
Because it would make scrolling more frequent? For multicolumn text to reduce scrolling, the column height would have to match the available viewport height. And if your text exceeds what can fit in multiple columns on a single screenful, scrolling also becomes awkward, because you'd have to scroll exactly to the next screenful to have any consistency. Multiple text columns only make sense on extremely restricted layouts, or where the volume are entirely independent instead of a single flowing piece of text, or where there is still a direct horizontal relationship (like annotations or translations beside the main text).
andai 10 minutes ago [-]
>you'd have to scroll exactly to the next screenful to have any consistency.
Or to the right. (That might be even worse though, I don't know.)
wtallis 58 minutes ago [-]
> And if your text exceeds what can fit in multiple columns on a single screenful, scrolling also becomes awkward, because you'd have to scroll exactly to the next screenful to have any consistency.
That used to be a solved problem, before every website started to include multiple oversized "dickbars" floating over the real content and taking up 15+% of the available vertical space. Pressing the "Page Down" button on a keyboard would scroll down by exactly one screenfull. We also used to have scrollbars that on most operating systems would let you scroll down by exactly one screenfull with a single click.
hiAndrewQuinn 2 hours ago [-]
It's a little annoying to change from 3 to 2 to 1 columns when someone does resize, though. I just let people resize the window itself on my blog if they want to compress the text down.
3371 21 minutes ago [-]
No. No no no.
I browse hundreds even thousands of pages every singe days, and I either just close such sites or go the extra mile to write custom css for them when they are disgustingly wide.
andai 5 minutes ago [-]
While we're on the subject of "the user needs to become the programmer to have an acceptable experience" (sites needing my custom css added to be usable), my pet peeve is when the scrollbar is present but intentionally offset from the right edge of the screen by one pixel.
So then you hug the right edge of the screen, looking for it, where it looks like it is, and where it's been for like the entire history of computing, and then you click, and there's just nothing there.
This is a special case of Fitts's law, where a button at the edge of a screen becomes effectively infinitely wide, as far as ease-of-clicking goes.
This was used intentionally with great effect on usability in the 90s and 2000s. (Scrollbar, start menu, show desktop, etc.)
In the last decade however the trend appears to have reversed: it is now fashionable be to make the scrollbar as difficult to click as possible, by offsetting it, making it narrower, or hiding it altogether.
klinch 2 hours ago [-]
No offence, but "please don't do X" where X is favoured by the big majority of users AND has a broad scientific base sounds a bit... entitled?
kmoser 1 hours ago [-]
It has nothing to do with entitlement. If you choose an arbitrary width based on usability studies, you may make a large percentage of users happy, but if you let users set the width by resizing their browser, you make 100% of users happy. Why not choose the latter?
chrismcb 41 minutes ago [-]
You won't make 100% of the users happy. In fact if argue you would make the majority of the users unhappy. I don't want to have to realize my browser for every web site. Is rather have a website that is fairly easy to read without me doing anything. I think most people would want that.
Waterluvian 1 hours ago [-]
My windows stay maximized and I’m not about to faff about, resizing them. When I come across an Ultra Panavision website I usually just open the dev tools with a single F-key to squish it.
joegibbs 1 hours ago [-]
If the user needs to set their own width by resizing the window they can also set the width by right-clicking -> inspect element -> disabling the CSS style on the div that gives it a max width. Which is only a couple more clicks than resizing the window and affects a lot less people.
majkinetor 21 minutes ago [-]
Resizing browser is cumbersome and will definitely NOT make me happy. Especially since I have tiled desktop but even without it.
If you really want to please everybody here, introduce an option that is remembered in a cookie (reading preference, trivial to implement). There is no one size fit all here.
Gigablah 1 hours ago [-]
I’m not going to resize my browser each time I follow a link or switch between tabs.
lawn 25 minutes ago [-]
> but if you let users set the width by resizing their browser, you make 100% of users happy
It's very ignorant to believe 100% of users are happy with having to resize their browsers just to get a pleasant rendering of the site.
xdennis 1 hours ago [-]
Nonsense. People almost always use browsers maximized. And many people have 2.5k or 4k screens. Even on 1080p screens full width text is unreadable.
I seriously doubt there are any people who resize their browser window every time they switch tabs.
galaxyLogic 31 minutes ago [-]
Right, there is a reason newspapers long ago realized multiple columns is better than full-width text. Imagine reading New York Times if it had only one full-width column. People would stop subscribing to it.
I’ve seen this one a few times and something about it doesn’t agree with my eye. It’s somehow in the weird awkward zone of not old enough to truly feel simple and functional, but not new enough to look modern minimal/clean. Might just be the font also, but I don’t find it very easy to read. Could just be me though.
bigtones 1 hours ago [-]
Note this website itself uses way more CSS than what it is proposing in the article. I count at least 300 lines all up. Still a good baseline though.
thakoppno 24 minutes ago [-]
Thanks for doing the detective work for your friends on mobile. This fact severely diminishes the message of this medium. I’ll check for myself later; but until then, I will hope it leverages the techniques it describes.
paulhebert 2 minutes ago [-]
The article emphasizes multiple times this is a baseline example to be built upon
edoceo 4 hours ago [-]
Still need a lot of the reset stuff - to at least get a baseline consistency.
If you only target modern (5 year window) that one popular reset can be trimmed.
nine_k 1 hours ago [-]
It's not about consistency, it's about basic readability. On different platforms / browsers things will differ, but remain readable. Not necessarily aesthetically perfect, but more usable than with defaults from 1994.
moron4hire 2 hours ago [-]
Resets are overrated. You don't really need all that much consistency between platforms when you're talking about a minimal setup for something like a personal blog like the OP is doing. Resetting for consistency is mostly just designer-brain not being able to accept that things can look slightly different in different places and be completely fine.
Interesting comparison in the context of the top rated discussion about setting width. I'm with @kmoser. The original actually looks better--to me--and I like that I can manage it.
Ok but what happened after that. It's been years with no word.
armchairhacker 4 hours ago [-]
> ...it is a best practice to allow users to manually toggle the color-scheme as well.
> Some people prefer a dark system theme, but light website themes, and vice-versa.
Is this common? Why don't those people configure their browser to use a light theme? Or if they prefer different websites to be different themes, use a browser plugin?
...a more general issue is that every website has to re-implement many things. It's a small issue, but it discourages newcomers, and the redundancy on every website adds up. Ideally, a site should look decent with no CSS, but in order to support legacy sites (a good thing) the default styles are the legacy ones (a bad thing); keeping what even back then would probably be considered "bugs" (except, like how crimes become legal, they managed to become "features" by being discovered too late), such as large images causing horizontal overflow. Honestly, is there a single good reason to make the default font Times New Roman 16px?
ponooqjoqo 3 hours ago [-]
Browsers _should_ have been set up to allow per-site toggling of the dark mode CSS preference, much like how they allow per-site zooming.
Configuring the whole browser to have a light theme is the wrong solution - some websites look better in dark mode and some look better in light mode. Also, the browser setting also affects the UI of the browser itself, not just website contents.
These are of course solvable problems, but the most obvious and trivial way to handle this is just to store an extra flag per-website in the same place as the zoom preference.
o11c 3 hours ago [-]
Obligatory "there is a way, it's just that your browser refuses to implement it".
Is that persistent? As in, if I select a style sheet for a website, will it use that same style sheet if I reload the website or navigate back at a later date? Browsers do this all the time with zoom levels, but it would be really useful for much more than that.
majkinetor 8 minutes ago [-]
I prefer light at day and dark at night. I have scheduler that turns on OS like that and all other stuff follows (e.g. apps with auto setting and browser with dark reader).
This is particularly important on mobile, as dark is very reflective at day, and light blinds you at night.
justmedep 3 hours ago [-]
Browser extension that do that require full access to the contents of the website. That’s why some people decide not to use those extension.
sgc 3 hours ago [-]
If I want to use an extension that needs full permissions on sensitive websites, I just download it and install it manually after looking at the source code. I rarely have to update them, and I'm not worried about future injections at that point.
kennywinker 3 hours ago [-]
It’s been a while since i mucked around with browser extensions, but i assume they don’t have network access by default. Surely there is an extension with page read access and without network access, no?
Browser extensions that modify webpages are just javascript code injected in the page; They can definitely access the internet.
kennywinker 3 hours ago [-]
I don’t think that’s an accurate description of browser extensions. Content scripts work that way, and many browser extensions include content scripts… but not all browser extensions use content scripts.
Anyway, a quick readthru of the code of the extension i linked shows it does use content scripts, but also it doesn’t do any network access.
zzo38computer 3 hours ago [-]
I think the default styles are OK; I do not think they are so bad as some people say. However, the thing I would add (for web pages that have pictures) would be:
img { max-width: 100%; }
(which is one of the things mentioned in that article; it probably would make sense for videos and SVG as well like they mention.) But, if you don't like them, the user should be allowed to customize them. In case this causes problems with web pages that use different styles that interfere with them, then hopefully an attribute could be added to specify that the user's CSS should be used instead of this one (and in some cases the browser might be able to decide this automatically for when the web page does not specify this attribute, e.g. if the styles are only associated with media queries and HTML element names rather than IDs, classes, etc). The user could still override this to disable the web page's CSS entirely if desired, but this would make it possible to specify that the web page's CSS is not needed for styling classes and other more complicated stuff within the specific web page or web app. (If the user does not define their own CSS, then it would use that defined in the web page (or the defaults if there is no CSS in the web page; the defaults probably should be changed to support the light/dark scheme properly for web pages that lack CSS, though), and the hypothetical attribute that I mentioned would be ignored.)
deadbabe 2 hours ago [-]
The least amount can be zero.
Jabrov 5 hours ago [-]
More sites should be like this
hsbauauvhabzb 4 hours ago [-]
Why? There’s a huge amount of JavaScript bloat, but I’ve never really had an issue with css on any site. If anything, I wish more sites supported a dark mode.
phantomathkg 54 minutes ago [-]
Why not?
Code is liability. Less code to maintain also enhance engineer's ability to reason the code and implement better website.
librasteve 4 hours ago [-]
CSS bloat is there also, perhaps not as big a deal. I think that complexity is the main enemy (both JS and CSS and React and npm …) or over on the WordPress plugin morass. I like that the OP is aiming for a simpler world, kind of like the HTMX and Pico CSS ideas that I currently prefer.
lelandfe 4 hours ago [-]
> perhaps not as big a deal
If I load CNN.com right now and scroll to the bottom, I receive 26.9 MB over the wire.
Of that, 52.2 kB are CSS.
5,547 kB are JS.
CSS bloat is not as big a deal.
prisenco 2 hours ago [-]
52K of CSS should be an opportunity for optimization but you're right, we're so far gone on javascript we should really focus on the mountains before the molehills.
SoftTalker 3 hours ago [-]
Use lite.cnn.com instead.
sublinear 3 hours ago [-]
I'm curious how much of that JS is functional and how much is adware.
The adware is typically injected onto the page by 3rd parties so it's nothing the web devs can do anything about.
kmstout 3 hours ago [-]
> how much of that JS is functional
Lots of sites become more functional with JS disabled.
2 hours ago [-]
typpilol 4 hours ago [-]
Tailwind v4 tree shakes too so even thats not technically bloated anymore
_heimdall 3 hours ago [-]
Tree shaking and bloat are different concerns. And, technically, is tailwind tree shaking? I thought they only built styles that the compiler could find being used rather than removing styles the compiler couldn't find being used.
o11c 3 hours ago [-]
Tree-shaking really only works for languages that are designed to be tree-shakable, which no web language is.
Please don't do this. Despite what usability studies say, I prefer wide content over scrolling every few seconds and having to make my eyes follow the moving text. I, the user, can already control the content width by resizing my browser, thank you very much.
Nearly every techie and non-techie I know has a bazillion tabs open 100% of the time. The likelihood that even the top 10 are all single-column text is 0%. And I'd sooner read web pages hot off a dot matrix printer than constantly pecking at the edge of an un-maximized window, resizing it like some kind of meth-addled chicken.
Note: I may be overstating slightly for effect.
If you could easily shrink a tab, I would prefer websites to not limit text width. Since you can't, I sorta prefer them to do it, though it's much worse than the user controlling it in a nice per tab way
It should also be almost trivial to create a browser extension for this, if it doesn't even exist yet.
solves the paragraph width "usability" and uses the full screen space
not sure why its never used.. I also really dislike the current trend of giant white sidebars
Or to the right. (That might be even worse though, I don't know.)
That used to be a solved problem, before every website started to include multiple oversized "dickbars" floating over the real content and taking up 15+% of the available vertical space. Pressing the "Page Down" button on a keyboard would scroll down by exactly one screenfull. We also used to have scrollbars that on most operating systems would let you scroll down by exactly one screenfull with a single click.
So then you hug the right edge of the screen, looking for it, where it looks like it is, and where it's been for like the entire history of computing, and then you click, and there's just nothing there.
This is a special case of Fitts's law, where a button at the edge of a screen becomes effectively infinitely wide, as far as ease-of-clicking goes.
This was used intentionally with great effect on usability in the 90s and 2000s. (Scrollbar, start menu, show desktop, etc.)
In the last decade however the trend appears to have reversed: it is now fashionable be to make the scrollbar as difficult to click as possible, by offsetting it, making it narrower, or hiding it altogether.
If you really want to please everybody here, introduce an option that is remembered in a cookie (reading preference, trivial to implement). There is no one size fit all here.
It's very ignorant to believe 100% of users are happy with having to resize their browsers just to get a pleasant rendering of the site.
I seriously doubt there are any people who resize their browser window every time they switch tabs.
Cash money
If you only target modern (5 year window) that one popular reset can be trimmed.
https://motherfuckingwebsite.com/
and
http://bettermotherfuckingwebsite.com/
LOL.
Interesting comparison in the context of the top rated discussion about setting width. I'm with @kmoser. The original actually looks better--to me--and I like that I can manage it.
(i collect a lot of these design advice. more: https://github.com/swyxio/spark-joy/)
> Some people prefer a dark system theme, but light website themes, and vice-versa.
Is this common? Why don't those people configure their browser to use a light theme? Or if they prefer different websites to be different themes, use a browser plugin?
...a more general issue is that every website has to re-implement many things. It's a small issue, but it discourages newcomers, and the redundancy on every website adds up. Ideally, a site should look decent with no CSS, but in order to support legacy sites (a good thing) the default styles are the legacy ones (a bad thing); keeping what even back then would probably be considered "bugs" (except, like how crimes become legal, they managed to become "features" by being discovered too late), such as large images causing horizontal overflow. Honestly, is there a single good reason to make the default font Times New Roman 16px?
Configuring the whole browser to have a light theme is the wrong solution - some websites look better in dark mode and some look better in light mode. Also, the browser setting also affects the UI of the browser itself, not just website contents.
These are of course solvable problems, but the most obvious and trivial way to handle this is just to store an extra flag per-website in the same place as the zoom preference.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
This is particularly important on mobile, as dark is very reflective at day, and light blinds you at night.
Edit: this looks pretty harmless https://github.com/the-code-rider/dark-theme-extension/blob/...
Anyway, a quick readthru of the code of the extension i linked shows it does use content scripts, but also it doesn’t do any network access.
If I load CNN.com right now and scroll to the bottom, I receive 26.9 MB over the wire.
Of that, 52.2 kB are CSS.
5,547 kB are JS.
CSS bloat is not as big a deal.
The adware is typically injected onto the page by 3rd parties so it's nothing the web devs can do anything about.
Lots of sites become more functional with JS disabled.
You hear this, HN?