> 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.
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.
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).
> 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.
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.
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?
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.
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.
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.
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.
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.
> ...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?
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.
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?
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.
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.
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.)
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.
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.
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.
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.
> 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.
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.
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
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).
> 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.
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.
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?
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?
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.
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.
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.
I’m not going to resize my browser each time I follow a link or switch between tabs.
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.
https://meyerweb.com/eric/tools/css/reset/
Cash money
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.
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.
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.
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.
Ok but what happened after that. It's been years with no word.
58 bytes of CSS to look great nearly everywhere https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad...
100 bytes: https://www.swyx.io/css-100-bytes
(i collect a lot of these design advice. more: https://github.com/swyxio/spark-joy/)
Obligatory mention of
https://motherfuckingwebsite.com/
and
http://bettermotherfuckingwebsite.com/
Yep, this is my standard.
> ...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?
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.
Obligatory "there is a way, it's just that your browser refuses to implement it".
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
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.
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?
Edit: this looks pretty harmless https://github.com/the-code-rider/dark-theme-extension/blob/...
Browser extensions that modify webpages are just javascript code injected in the page; They can definitely access the internet.
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.
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.
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:
(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.)The least amount can be zero.
More sites should be like this
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.
Why not? Code is liability. Less code to maintain also enhance engineer's ability to reason the code and implement better website.
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.
> 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.
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.
Use lite.cnn.com instead.
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.
> how much of that JS is functional
Lots of sites become more functional with JS disabled.
Tailwind v4 tree shakes too so even thats not technically bloated anymore
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.
Tree-shaking really only works for languages that are designed to be tree-shakable, which no web language is.
But even a small bit of css can slow down page rendering. https://www.granola.ai/blog/dont-animate-height
reset.css