Perfect Motherfucking Website(perfectmotherfuckingwebsite.com)
perfectmotherfuckingwebsite.com
Perfect Motherfucking Website
https://perfectmotherfuckingwebsite.com/
248 comments
> Yes I know the art theory stuff about never using black because it doesn't appear naturally.
I think the underlying reasons for that are underappreciated.
When you pick #000000 for your text color, people won't see it as pure black anyway. Imperfections in your screen's backlighting aside, your screen reflects the ambient lighting, or, if you're outdoors and pointed the wrong direction on a sunny day, your screen reflects sunlight that is orders of magnitude brighter than the screen itself (measured in cd/m^2). #000000 never shows up as actual black either.
So if you're going to put black text on white background, just use #000000 on #ffffff. Nature doesn't need any more help to make text on screens hard to read.
I think the underlying reasons for that are underappreciated.
When you pick #000000 for your text color, people won't see it as pure black anyway. Imperfections in your screen's backlighting aside, your screen reflects the ambient lighting, or, if you're outdoors and pointed the wrong direction on a sunny day, your screen reflects sunlight that is orders of magnitude brighter than the screen itself (measured in cd/m^2). #000000 never shows up as actual black either.
So if you're going to put black text on white background, just use #000000 on #ffffff. Nature doesn't need any more help to make text on screens hard to read.
On a good monitor, the color contrast between #ffffff and #000000 is far beyond the contrast possible in nature. No reflective material can reach those colors or that contrast.
That color contrast is perfect for a game, a movie or an image. But you don't want the feeling of something as bright as looking into the fucking sun mixed with the darkness of the deepest starless night. That's just painful, both in light mode and dark mode.
Just calibrate your monitor correctly, increase your contrast if your monitor can't even display Rec.709 sRGB, instead of compensating for your shitty monitor by making your website painful for anyone with a good monitor.
EDIT: this comment puts it very well: https://news.ycombinator.com/item?id=26741285
That color contrast is perfect for a game, a movie or an image. But you don't want the feeling of something as bright as looking into the fucking sun mixed with the darkness of the deepest starless night. That's just painful, both in light mode and dark mode.
Just calibrate your monitor correctly, increase your contrast if your monitor can't even display Rec.709 sRGB, instead of compensating for your shitty monitor by making your website painful for anyone with a good monitor.
EDIT: this comment puts it very well: https://news.ycombinator.com/item?id=26741285
> On a good monitor, the color contrast between #ffffff and #000000 is far beyond the contrast possible in nature.
No, it is not.
> No reflective material can reach those colors or that contrast.
Even if that was true, nature includes light sources as well as reflective materials.
No, it is not.
> No reflective material can reach those colors or that contrast.
Even if that was true, nature includes light sources as well as reflective materials.
> Even if that was true, nature includes light sources as well as reflective materials.
Emissive light sources in nature (except for rare occurrences like lightning, certain jellyfish and cherenkov radiation) are all black body radiation.
That's very different from the colors and contrast ratios possible by modern OLED monitors. The best example would be the blue LEDs used in modern OLED panels, which when they were introduced had a strange unnerving blue glow because that color just doesn't exist in nature.
Additionally, the contrast ratios possible by modern OLED panels are also far beyond anything in nature, as in nature anything that is bright, be it reflective or emmissive, will as result also light up its surroundings and reduce contrast naturally.
Emissive light sources in nature (except for rare occurrences like lightning, certain jellyfish and cherenkov radiation) are all black body radiation.
That's very different from the colors and contrast ratios possible by modern OLED monitors. The best example would be the blue LEDs used in modern OLED panels, which when they were introduced had a strange unnerving blue glow because that color just doesn't exist in nature.
Additionally, the contrast ratios possible by modern OLED panels are also far beyond anything in nature, as in nature anything that is bright, be it reflective or emmissive, will as result also light up its surroundings and reduce contrast naturally.
Yeah definitely. And also be sure to switch all your keys on your keyboard to a hardwood. I prefer mahogany for its bright clicks and depth of response versus the equivalent plastic keycaps.
If you use these high contrast colors, you will break it for users on good displays. That means potential investors, people on iPhones, people on expensive samsung phones.
Those are the people you usually want as customers. And you're making your website painful for them. That's a decision you can make, but don't be surprised if you'll fail with that attitude.
Those are the people you usually want as customers. And you're making your website painful for them. That's a decision you can make, but don't be surprised if you'll fail with that attitude.
Unless I'm writing a blog or something, in which case I'm not looking for customers and I really don't care if anyone reads it or not.
Even in that case you should consider that your readers might have a diverse range of devices, and configuring a 1000:1 contrast ratio isn't exactly the greatest solution.
Keep colors and contrast restricted to the range possible by reflective materials (i.e. what can be printed on paper or ever be encountered in nature) and all the issues are immediately gone. You don't have to use grey-on-grey (which is super annoying). Just keep to the range of colors a newspaper will have, or a zebra will have.
Keep colors and contrast restricted to the range possible by reflective materials (i.e. what can be printed on paper or ever be encountered in nature) and all the issues are immediately gone. You don't have to use grey-on-grey (which is super annoying). Just keep to the range of colors a newspaper will have, or a zebra will have.
> If you use a color-calibrated
Over 99% of users don't, most phones are not high end and as such don't have such a screen.
> feeling of something as bright as looking into the fucking sun
Again, not a experience around 99% of internet users can follow, their devices don't get that bright, especially not on a per-pixel basis.
Also most people use devices in rooms with varying degrees of natural sunlight showing in.
And if whites are to bright then it's because my screen is wrongly setup for my eyes/usage. A perfect color calibrated screen is ironically often not a perfectly setup screen for normal usage.
Over 99% of users don't, most phones are not high end and as such don't have such a screen.
> feeling of something as bright as looking into the fucking sun
Again, not a experience around 99% of internet users can follow, their devices don't get that bright, especially not on a per-pixel basis.
Also most people use devices in rooms with varying degrees of natural sunlight showing in.
And if whites are to bright then it's because my screen is wrongly setup for my eyes/usage. A perfect color calibrated screen is ironically often not a perfectly setup screen for normal usage.
> And if whites are to bright then it's because my screen is wrongly setup for my eyes/usage. A perfect color calibrated screen is ironically often not a perfectly setup screen for normal usage.
There are very specific definitions for colors, and what they mean.
#000000 means 0.1 nits, #ffffff means 100 nits. That's standardized and specified.
The screen can't be wrong if it correctly matches the standard. If real-world content doesn't obey the standard, the content is wrong, not the standard.
There are very specific definitions for colors, and what they mean.
#000000 means 0.1 nits, #ffffff means 100 nits. That's standardized and specified.
The screen can't be wrong if it correctly matches the standard. If real-world content doesn't obey the standard, the content is wrong, not the standard.
> #000000 means 0.1 nits, #ffffff means 100 nits. That's standardized and specified.
Uhm, scree brightness control is a thing. Adaptive brightness is standard even on non high end phones. Same for desktops etc.
So a part of a standard which maps color to specific brightness levels is pretty much irrelevant outside of the unrealistic case of a perfect calibrated monitor in a perfect environment. Which does exist. But again is for most internet users unrealistic.
Uhm, scree brightness control is a thing. Adaptive brightness is standard even on non high end phones. Same for desktops etc.
So a part of a standard which maps color to specific brightness levels is pretty much irrelevant outside of the unrealistic case of a perfect calibrated monitor in a perfect environment. Which does exist. But again is for most internet users unrealistic.
> So a part of a standard which maps color to specific brightness levels is pretty much irrelevant outside of the unrealistic case of a perfect calibrated monitor in a perfect environment. Which does exist. But again is for most internet users unrealistic.
If you modify the brightness in software, you can also tonemap it properly and retain the contrast easily.
If you modify the brightness in software, you can also tonemap it properly and retain the contrast easily.
Making sRGB 1000 nits is extremely bad colorimetry. sRGB is supposed to go with 80 nits in its original definition, and being an order of magnitude off indicates something very wrong with your system's concept of what "standard dynamic range" entails.
My own monitor calibrates sRGB to 100 nits (thank god), but a lot of consumer displays (especially smartphones) are so badly color managed that they display sRGB at 600nits and more, with no option to properly change that.
Generally, media and text need very different contrast ratios and colorspaces, and text should never use the full contrast available.
But the big issue is that most content is using entirely unmanaged colors, not even correctly setting them to sRGB (or actually the color profile of whatever shitty 6-bit 100:1 contrast panel from 2004 they managed to find on the dump).
If that was actually used, we wouldn't have any of these issues and everything would be correctly tonemapped. But they don't, they set no profile, which in some software means "whatever the display supports" (although recently enough software enforces "probably sRGB at 1000:1 contrast 100nits max brightness" luckily).
Generally, media and text need very different contrast ratios and colorspaces, and text should never use the full contrast available.
But the big issue is that most content is using entirely unmanaged colors, not even correctly setting them to sRGB (or actually the color profile of whatever shitty 6-bit 100:1 contrast panel from 2004 they managed to find on the dump).
If that was actually used, we wouldn't have any of these issues and everything would be correctly tonemapped. But they don't, they set no profile, which in some software means "whatever the display supports" (although recently enough software enforces "probably sRGB at 1000:1 contrast 100nits max brightness" luckily).
"Just calibrate your monitor". If only making every monitor calibrate perfectly was so simple. Sometimes you don't have permission or access to even calibrate said monitor. Your talking about nits like every monitor is able to control its nits output, which is certainly not true.
Sometimes, you just have a shitty monitor. There are entire communities dedicated to calibrating monitors as I'm sure you are aware, it's time consuming and can be expensive, it's not a solution, we have manufacturer ICC profiles for a reason.
Sometimes, you just have a shitty monitor. There are entire communities dedicated to calibrating monitors as I'm sure you are aware, it's time consuming and can be expensive, it's not a solution, we have manufacturer ICC profiles for a reason.
I'm not even talking about using a spyder and calibrating it properly, even just manually changing the settings with a printed reference card can be worth a lot (or even by color matching by eye against an iPhone, as those have great default colors). Or even just manually setting the dials until it looks right.
But the reality is that I can't use some websites because they chose to make my experience worse so users with badly produced and badly designed devices have a better experience. We're yet again at a situation where obeying the standard is punished.
But the reality is that I can't use some websites because they chose to make my experience worse so users with badly produced and badly designed devices have a better experience. We're yet again at a situation where obeying the standard is punished.
Yep, http://motherfuckingwebsite.com/ gets it right: uses your preferences. Doing anything else are various forms of failure.
perfectmotherfuckingwebsite does it right: enough contrast that everyone can read it, not too much to be painful.
motherfuckingwebsite does it right, too: follow the preferences (which in my case is almost exactly the same as the perfectmotherfuckingwebsite)
The worst are websites with far too little or far too much contrast that don't even follow preferences. At work I've had to repeatedly go against designers wishes refusing to implement their design and saying: I'll implement you anything within of 4.5:1 to 10:1 contrast ratio. But I won't go below that (no, I can't make the text 10px tall in #c0c0c0 on #f0f0f0) nor above that.
motherfuckingwebsite does it right, too: follow the preferences (which in my case is almost exactly the same as the perfectmotherfuckingwebsite)
The worst are websites with far too little or far too much contrast that don't even follow preferences. At work I've had to repeatedly go against designers wishes refusing to implement their design and saying: I'll implement you anything within of 4.5:1 to 10:1 contrast ratio. But I won't go below that (no, I can't make the text 10px tall in #c0c0c0 on #f0f0f0) nor above that.
If you want to go into the "pure black" discussion, I liked that article: https://news.ycombinator.com/item?id=24303042
If you want to see natural pitch black, just go into a deep enough cave and see for yourself.
[deleted]
> WHY. WHY DO PEOPLE DO THIS
Because designers are taught that too much contrast causes eye strain. They're advised against putting pure black text on bright white backgrounds.
https://www.wired.com/2016/10/how-the-web-became-unreadable/
Because designers are taught that too much contrast causes eye strain. They're advised against putting pure black text on bright white backgrounds.
https://www.wired.com/2016/10/how-the-web-became-unreadable/
I hate Youtube on dark mode for that reason: it's white text on black background and I struggle to read comments!
They're doing you a favour.
Which leaves you seeing phantom lines when you look away from the screen.
But to little contrast causes so much more eyestrain, and can't be fixed by changing your screens brightness.
Too much contrast can't be fixed by changing your brightness either unless you like spending several hours calibrating it again after every single blogpost you read.
I have said it pretty often in this comment section, but the huge majority of internet users has no finely calibrated screens at all.
They also won't have screen where they are likely to feel anything has too much contrast.
IMHO a screen which displays a common black and white website with so much contrast that it strains the eye is a 100% failed product which completely ignores reality.
They also won't have screen where they are likely to feel anything has too much contrast.
IMHO a screen which displays a common black and white website with so much contrast that it strains the eye is a 100% failed product which completely ignores reality.
> IMHO a screen which displays a common black and white website with so much contrast that it strains the eye is a 100% failed product which completely ignores reality.
A website which has so much contrast that it strains the eye on any spec-compliant monitor or a cheap 1990s CRT is a failed product. Reducing the quality of monitors to compensate for shitty websites can't be the solution.
A website which has so much contrast that it strains the eye on any spec-compliant monitor or a cheap 1990s CRT is a failed product. Reducing the quality of monitors to compensate for shitty websites can't be the solution.
Black and white web pages had been pretty much the standard since well the invention of the internet...
Same for black and white text documents.
Or black and white shell promts.
And so on.
So it's pretty obviously for me what is detached from reality and what isn't.
EDIT: It's the color space which is broken I guess, white (on a website) should be neutral background white not eye hurting brightness and the color space should have some "whiter then (normal,neutral) white" colors. I.e. the normal white color should not have defaulted to maximal brightness.
Same for black and white text documents.
Or black and white shell promts.
And so on.
So it's pretty obviously for me what is detached from reality and what isn't.
EDIT: It's the color space which is broken I guess, white (on a website) should be neutral background white not eye hurting brightness and the color space should have some "whiter then (normal,neutral) white" colors. I.e. the normal white color should not have defaulted to maximal brightness.
> EDIT: It's the color space which is broken I guess, white (on a website) should be neutral background white not eye hurting brightness and the color space should have some "whiter then (normal,neutral) white" colors. I.e. the normal white color should not have defaulted to maximal brightness.
Sure, but that's already the standard.
The people who obsess over using #fff as default white just happen to be the ones whose monitors show #fff the way #ccc was supposed to be shown (and used to be shown, on CRTs)
Sure, but that's already the standard.
The people who obsess over using #fff as default white just happen to be the ones whose monitors show #fff the way #ccc was supposed to be shown (and used to be shown, on CRTs)
I never managed to read this article past its title. I always get distracted by the fact that, after one second, the text gets obscured behind a pop-up.
A fundamental design principle is that full black is unnatural. It's like, point three on "I don't know anything about design, give me a quick list" articles. And it's pretty true, frankly. Making text a little more navy or gray makes a big difference. Sure people have eyesight issues and not everyone has a great monitor, but most people prefer it this way.
Very true, however better has chosen #444 whereas #333 seems to work a bit more consistently.
One thing you should always consider during the requirements phase of a web application is whether your app is likely to be used projected on a conference room wall. Things like contrast and fonts make huge differences in such hostile settings, and available screen real estate is also considerably limited.
One thing you should always consider during the requirements phase of a web application is whether your app is likely to be used projected on a conference room wall. Things like contrast and fonts make huge differences in such hostile settings, and available screen real estate is also considerably limited.
Great point yeah. I also think it should be easier to tell browsers to make text high contrast, design be damned. Fundamentally it's an accessibility issue.
Last time I was in this situation, the UX expert and I had the entire dev team stand at the back of a conference room and vote on which font was most legible. All but one agreed Verdana was the easiest. Not only that, but it was still more legible than our previous font at 1pt smaller text, which meant we could get more info onto the screen. Not tons more, but we were having to truncate text in some spots, and sometimes even one or two more letters is enough for people to get the gist without having to backseat drive the presenter. It's subtle but I was beginning to recognize this as an important waste of time and energy when we were dogfooding our app.
When people are already getting short with each other before you even get to the actual reason for the meeting, you know it's going to be a long day.
But corporate wanted our fonts to match their other product. I don't know if it was my imagination or not, but it felt like that act broke a couple people on the team, myself included.
When people are already getting short with each other before you even get to the actual reason for the meeting, you know it's going to be a long day.
But corporate wanted our fonts to match their other product. I don't know if it was my imagination or not, but it felt like that act broke a couple people on the team, myself included.
Ooof that burns. Feels weird to have a UX expert but then ignore them? But of course, corporate knows best haha.
Slightly greyer is OK, but if you give up most the contrast and use a small font, a large fraction of the population will find your site hard to read. There are way too many low-contrast web sites out there.
I have sometimes used slightly grey and used "full" black for small emphasis (when the bold version available for the font in use is a just too much or you want a level in between). On pages where other colours are used for highlighting things (links, call-outs, warnings, ...) it can also help them not look a bit more subtle than you want agaist the hard black.
You have to be very careful not to rely on it though: as you mention lighting and protection conditions or just plain bad monitors can kill the more subtle difference completely. And, more importantly, those with sight deficiencies might miss it even in ideal circumstances.
You have to be very careful not to rely on it though: as you mention lighting and protection conditions or just plain bad monitors can kill the more subtle difference completely. And, more importantly, those with sight deficiencies might miss it even in ideal circumstances.
Yeah that's true. Cynically I think this problem will solve itself as millennials age.
https://contrastrebellion.com/
More high-contrast options exist then Black foreground on a White background.
I'm not disagreeing with your point, I loathe grey on grey sites. Being visually impaired nothing makes me rage-quit your site quicker if my DarkReader extension can't unfuck a site.
I'm posting https://contrastrebellion.com/ so all the replies and followup conversations can see it too.
More high-contrast options exist then Black foreground on a White background.
I'm not disagreeing with your point, I loathe grey on grey sites. Being visually impaired nothing makes me rage-quit your site quicker if my DarkReader extension can't unfuck a site.
I'm posting https://contrastrebellion.com/ so all the replies and followup conversations can see it too.
The scrolljacking on this site makes it literally unusable on my device.
That is one awful website to read on mobile safari. The scroll bar is hijacked to make the text unreadable - how ironic!?
May be some should make scrollhijackrebellion.com ;-)
Add teeny tiny text to it too. On a basic website i can at least pinch. With scroll jacking it’s all broken.
Purple on black is hardly "contrast"
https://imgur.com/Q52ZxwS.png
https://imgur.com/Q52ZxwS.png
From what I can tell, this is due to designers cargo culting low contrast UIs. Whenever I've asked designers for citations that grey-on-gray UIs are better than black/white or white/black, I haven't gotten any good responses beyond some subjective answers. It's considered "general knowledge" but I haven't found hard data supporting it.
There are good reasons to avoid bright white backgrounds in certain cases since it can be hard to read in dark environments as your eyes switch between the bright screen and dark world. But in this case, pure white on pure black is still the best option for contrast. And the correct solution is to dim the backlight of the display to reduce brightness.
There are good reasons to avoid bright white backgrounds in certain cases since it can be hard to read in dark environments as your eyes switch between the bright screen and dark world. But in this case, pure white on pure black is still the best option for contrast. And the correct solution is to dim the backlight of the display to reduce brightness.
God I hate lowered contrast on sites, especially as I'm aging. Give me the crisp edges of black and white, if I want to lower the contrast I'll turn down my brightness settings.
This is one of my biggest pet peeves of "modern" websites. I've installed github.com/Fushko/font-contrast, and I've noticed myself clicking it on more and more in recent times.
You don't need a pure white background, but for gods sake PLEASE stop making the text light grey! Having to squint to read a website is headache-inducing.
You don't need a pure white background, but for gods sake PLEASE stop making the text light grey! Having to squint to read a website is headache-inducing.
Also what's up with those side margins? A little margin is nice (HN's feel reasonable), but the margins on both PMFW and BMFW look like they follow the philosophy of maximizing scrolling and margins to cram a bunch of ads in the margins, only without the ads. One caveat might be that I'm viewing them on a desktop monitor and not on a cellphone.
(Edit: Okay, I should have read TFW. They mention the reason for the line width)
(Edit: Okay, I should have read TFW. They mention the reason for the line width)
Apparently optimal reading width is approx. 65 characters wide.
There's definitely a sweet spot; I typically have my browser windows at 2/3 width on a 2560px wide monitor. 100% width lines are a chore to read honestly, there's definitely a higher cognitive load.
There's definitely a sweet spot; I typically have my browser windows at 2/3 width on a 2560px wide monitor. 100% width lines are a chore to read honestly, there's definitely a higher cognitive load.
If everyone could agree to not use black-on-white, we could set our monitor brightness to a sane value and have enough contrast to read. In order to read black on white text, I have to turn my backlight down to like 10%, and then turn it up to about 40% to watch a movie.
More contrast isn't always better, or you would read text by printing out foil stencils and aiming them directly at the sun to read.
More contrast isn't always better, or you would read text by printing out foil stencils and aiming them directly at the sun to read.
Join the contrast rebellion and demand high-contrast text:
https://contrastrebellion.com/
OMG that website is so easy to read! It's a breath of fresh air!
What would be really cool is if web browsers offered a mode that forced a contrast minimum when viewing websites. This would benefit devs and users alike: Users would have a pushbutton way to make bad websites readable, and devs would have a push button to show what their site would look like to users who get annoyed enough to push that button.
What would be really cool is if web browsers offered a mode that forced a contrast minimum when viewing websites. This would benefit devs and users alike: Users would have a pushbutton way to make bad websites readable, and devs would have a push button to show what their site would look like to users who get annoyed enough to push that button.
Except they hijack scrolling (I think their intention is to “snap” to various sections). On my device, that puts the viewport at some point between sections, and I cannot manually scroll to correct it. So I can’t read the content either. Well done there.
I love that website. It has the perfect amount of contrast, not the harsh #000 on #fff half this comment section recommends.
https://i.k8r.eu/dw9JsA.png
https://i.k8r.eu/dw9JsA.png
> WHY. WHY DO PEOPLE DO THIS.
Do you like 400 nits of #ffffff right into your eyeballs? No? Me neither.
The alternative is absolute darkness with extremely bright text, which in turn makes it unreadable (if you have astigmatism as I do) and literally causes pain due to the high contrast.
Nothing in nature has such an extreme contrast.
The only reason anyone would ever use full contrast is if they have a shitty 6-bit monitor panel that doesn't even reach the contrast ratio of a shitty 1990's monitor. And they don't even have a proper color profile, so their computer thinks their monitor has all the contrast ratio in the world, and doesn't tonemap fuckall.
The only way to resolve this is if either everyone finally switches on a color managed workflow, or we outright ban the shitty panels where #000000 on #ffffff is necessary for readability instead of being just painful.
#ffffff is the color of looking directly into the sun and absolutely painful bright, #000000 is the color of the deepest, starless night. You need these colors for movies, for games, for images. But your text should never be the contrast between a starless night and looking directly into a star.
Increase the contrast of your monitor, calibrate your panel, but don't build a worse website to compensate for your shitty panel.
EDIT: this comment puts it very well: https://news.ycombinator.com/item?id=26741285
Do you like 400 nits of #ffffff right into your eyeballs? No? Me neither.
The alternative is absolute darkness with extremely bright text, which in turn makes it unreadable (if you have astigmatism as I do) and literally causes pain due to the high contrast.
Nothing in nature has such an extreme contrast.
The only reason anyone would ever use full contrast is if they have a shitty 6-bit monitor panel that doesn't even reach the contrast ratio of a shitty 1990's monitor. And they don't even have a proper color profile, so their computer thinks their monitor has all the contrast ratio in the world, and doesn't tonemap fuckall.
The only way to resolve this is if either everyone finally switches on a color managed workflow, or we outright ban the shitty panels where #000000 on #ffffff is necessary for readability instead of being just painful.
#ffffff is the color of looking directly into the sun and absolutely painful bright, #000000 is the color of the deepest, starless night. You need these colors for movies, for games, for images. But your text should never be the contrast between a starless night and looking directly into a star.
Increase the contrast of your monitor, calibrate your panel, but don't build a worse website to compensate for your shitty panel.
EDIT: this comment puts it very well: https://news.ycombinator.com/item?id=26741285
> Nothing in nature has such an extreme contrast.
What about black text on white pages in an actual hardback book? But since you referred to nature, what about zebras?
What about black text on white pages in an actual hardback book? But since you referred to nature, what about zebras?
https://upload.wikimedia.org/wikipedia/commons/3/37/Colorspa...
The not-triangular shape labeled "2200 matte paper" are all colors representable by reflective materials.
Colors outside of that range can only ever be produced by emissive materials, such as fire, stars, or your monitor.
All the colors your website uses should be from the range of reflective colors, as those are the ones seen in nature, and the ones your eyes are adapted to see.
The same applies also to black/white contrasts. Even vantablack next to a white sheet of paper (which would already be massively higher than any contrast in nature) still has a much lower contrast ratio than your monitor has.
The not-triangular shape labeled "2200 matte paper" are all colors representable by reflective materials.
Colors outside of that range can only ever be produced by emissive materials, such as fire, stars, or your monitor.
All the colors your website uses should be from the range of reflective colors, as those are the ones seen in nature, and the ones your eyes are adapted to see.
The same applies also to black/white contrasts. Even vantablack next to a white sheet of paper (which would already be massively higher than any contrast in nature) still has a much lower contrast ratio than your monitor has.
Neither zebras nor white pages in a hardback book emit light, they only reflect it.
What books are you reading that have pure white pages with pure black text on them? At best they are eggshell or an off-white page. Also... books are nature now?
Isn't the general theory about zebra stripes is they are designed to confuse and nauseate predators? :D (Poking fun, with love)
[deleted]
> #ffffff is the color of looking directly into the sun and absolutely painful bright, #000000 is the color of the deepest, starless night
No. There's no definition of what they map to.
That's why we need USERS to be able to scale the ranges of brightness and contrast.
My environment changes during the day. I want to be the one in control of my screen, not some random website.
No. There's no definition of what they map to.
That's why we need USERS to be able to scale the ranges of brightness and contrast.
My environment changes during the day. I want to be the one in control of my screen, not some random website.
> I want to be the one in control of my screen, not some random website.
That's not really an option, though. You'd have to separate text and media from the website, split it apart, and configure it separately, as most websites just have everything without any color management.
If these shitty websites with full contrast would at least set a colorspace for their images, so I could take the color profile of a cheap 2004 LCD as default for unmanaged media and text, I'd at least avoid the painful situation.
That's not really an option, though. You'd have to separate text and media from the website, split it apart, and configure it separately, as most websites just have everything without any color management.
If these shitty websites with full contrast would at least set a colorspace for their images, so I could take the color profile of a cheap 2004 LCD as default for unmanaged media and text, I'd at least avoid the painful situation.
This is a case study in why I override display on so many websites.
> don't build a worse website to compensate for your shitty panel
Never change.
> don't build a worse website to compensate for your shitty panel
Never change.
> Do you like 400 nits of #ffffff right into your eyeballs?
If you don't like what your display does, tweak its settings to do what you like.
If you don't like what your display does, tweak its settings to do what you like.
I like what my display does: it displays colors perfectly accurately, and I've got 3 monitors, all color profiled, and all with perfectly matching colors as result.
Colors are standardized and have a very specific meaning.
I just dislike the colors these website authors have chosen, often without knowing what they're choosing, as their monitors often distort the colors and show something wrong.
None of this can be solved until we've got widespread color managed workflows and tonemapping on the web.
Colors are standardized and have a very specific meaning.
I just dislike the colors these website authors have chosen, often without knowing what they're choosing, as their monitors often distort the colors and show something wrong.
None of this can be solved until we've got widespread color managed workflows and tonemapping on the web.
Then you like 400 nits of #ffffff right into your eyeballs?
I like the brightest parts of movies, games and images being 400 nits, yes.
And I don't like reconfiguring my display for every different kind of content.
What I don't like is websites using #ffffff
And I don't like reconfiguring my display for every different kind of content.
What I don't like is websites using #ffffff
If white on your monitor is brighter than a "bright white" sheet of paper viewed under the same lighting - or normal lighting if, for some reason, you've decided to work in the dark - you're doing it wrong.
Pure white on my monitor can't be created by CSS anyway, thank god, that'd be a full 1014 nits and actually is painful to look at.
But this is a general issue - you want to be able to represent extremely high contrast, far beyond the brightness of a sheet of paper in photos, movies, games, etc. But you want a significantly lower contrast for text. Sadly, websites mix both and offer no way to configure them separately.
But this is a general issue - you want to be able to represent extremely high contrast, far beyond the brightness of a sheet of paper in photos, movies, games, etc. But you want a significantly lower contrast for text. Sadly, websites mix both and offer no way to configure them separately.
Obviously too little contrast is bad and makes text hard to read, but it doesn't at all follow that MORE CONTRAST is always better. In fact it's pretty clear that too much contrast (which is equivalent to too much brightness, since there's a floor on how black the dark parts can get) can be a negative thing, that's why we don't all leave our displays at maximal brightness in all lighting conditions.
Another commenter mentioned that all text should just be black on white and people can dim their screens as necessary. It's somewhat a matter of personal preference, but this seems like a bad solution to me. Most people are not looking at exclusively text when browsing the web, there are lots of pictures and videos as well. Users shouldn't have to be constantly fiddling with screen brightness. In photos and videos, contrast is often used for dramatic effect, where you want some parts to get brighter than others. If the text is too high contrast so you have to dim your screen further to view it comfortably, then the photos or videos you see alongside the text won't be as impactful and enjoyable. Why should every piece of text you read be as dramatic as the most intense rays of sunlight or something in a photo or movie?
Another commenter mentioned that all text should just be black on white and people can dim their screens as necessary. It's somewhat a matter of personal preference, but this seems like a bad solution to me. Most people are not looking at exclusively text when browsing the web, there are lots of pictures and videos as well. Users shouldn't have to be constantly fiddling with screen brightness. In photos and videos, contrast is often used for dramatic effect, where you want some parts to get brighter than others. If the text is too high contrast so you have to dim your screen further to view it comfortably, then the photos or videos you see alongside the text won't be as impactful and enjoyable. Why should every piece of text you read be as dramatic as the most intense rays of sunlight or something in a photo or movie?
Completely agree, the weird dark grey text makes the whole site look foggy. It actually one off the most annoying colours I’ve seen used for text.
If you're within 10-15% or so of white or black, I am fine with the "slightly grey" look, assuming I don't have an AMOLED screen, where your dark grey is just wasting my phone battery.
I really only get annoyed with the "less contrast" meme when it's something like a Google website where the UI disappears if your monitor's contrast settings weren't tuned professionally. (I used to have to adjust my monitor settings around making the UI elements on Google+ visible.)
I really only get annoyed with the "less contrast" meme when it's something like a Google website where the UI disappears if your monitor's contrast settings weren't tuned professionally. (I used to have to adjust my monitor settings around making the UI elements on Google+ visible.)
> WHY. WHY DO PEOPLE DO THIS. To give this person credit they have at least chosen some sensible values,
Dunno what the science says, but I really hate #000 on #fff, or vice-versa.
Yes, a lot of websites now go to the opposite extreme, but the reaction should simply be: so DON'T GO TO EXTREMES! Neither too much nor too little contrast are good.
And since you've pointed out they do go for sensible values here, why the outraged all caps???
Dunno what the science says, but I really hate #000 on #fff, or vice-versa.
Yes, a lot of websites now go to the opposite extreme, but the reaction should simply be: so DON'T GO TO EXTREMES! Neither too much nor too little contrast are good.
And since you've pointed out they do go for sensible values here, why the outraged all caps???
> Contrast is good. It makes things easier to read. Why would you want less?
One sensible reason for this is that it allows using higher contrast, or different hues w/ similar contrast, as a kind of emphasis that naturally stands out from the surrounding text. Same reasons why most terminal emulators display text as light-gray-on-black, while keeping pure white as a highlight color.
One sensible reason for this is that it allows using higher contrast, or different hues w/ similar contrast, as a kind of emphasis that naturally stands out from the surrounding text. Same reasons why most terminal emulators display text as light-gray-on-black, while keeping pure white as a highlight color.
Lowering the contrast of text helps people with dyslexia (between 7.5% - 17.5% of users) to read the content more easily: https://www.w3.org/WAI/RD/2012/text-customization/r11
High contrast text can appear blurred for them while reading.
High contrast text can appear blurred for them while reading.
I personally find dark mode with too much contrast to be harder to read. I experience real discomfort otherwise, so I don't think it's as simple as "more contrast is always better".
I think it comes down to what you're used to, what your vision is like, and how sensitive your eyes are. Some prefer high contrast, some don't.
I think it comes down to what you're used to, what your vision is like, and how sensitive your eyes are. Some prefer high contrast, some don't.
I was a little confused when I clicked through, but then I remembered I installed the Firefox add-on "Font Contrast" which has absolutely vital over the past several years, with so many web site designers who think `#666666` text looks good against a `#CCCCCC` background!
High contrast is harsh on the eyes. Black on white is very tiresome for me, and can become harder to read at the end of the day. I always set the background of my text editors to dark grey.
>WHY. WHY DO PEOPLE DO THIS.
Because too much contrast on a monitor means white on black, which on average (that is, 99% of people's setups) brightness levels settings strains the eyes and people actively dislike it.
Its not some book reflecting ambient light, but a monitor with a led shining white (blue-ish) light on your eyes...
>Contrast is good.
Water is good too. Too much water though, and you die: https://en.wikipedia.org/wiki/Water_intoxication
Because too much contrast on a monitor means white on black, which on average (that is, 99% of people's setups) brightness levels settings strains the eyes and people actively dislike it.
Its not some book reflecting ambient light, but a monitor with a led shining white (blue-ish) light on your eyes...
>Contrast is good.
Water is good too. Too much water though, and you die: https://en.wikipedia.org/wiki/Water_intoxication
Maybe unexpected for you, but not everyone agrees that more contrast is always better. I specifically choose color schemes in application I use that have less contrast as that seems better for me. There is certainly a point where contrast is objectively too high, and increases in monitor contrast and the increased use of HDR monitors make this more of an issue these days.
Because they write the website on a high res Macbook and prefer their amazing artistic talents over the ability for people with cheaper computers or poorer eyesight to read their art.
> WHY. WHY DO PEOPLE DO THIS.
Because too much contrast can be jarring and distracting, making it harder to read.
These kinds of things are subjective.
Because too much contrast can be jarring and distracting, making it harder to read.
These kinds of things are subjective.
Is there any research that proves this?
My sample size of 1 is really all that's needed to answer the question of "Why do people do this?" That is assuming that I'm a person.
Put #101010 on #f0f0f0
The overly curse happy programmer speak is so very stale. I'm not offended or anything but it's just not that great. It doesn't make the content more interesting. It doesn't make the author seem any cooler. It's just meh. It reminds me of Epic Meal Time; a facade of coolness based on cursing, alcohol and over the top food.
I love that instead of this style we're getting a new generation of programmers who are genuinely nice, calm and friendly. People such as Bob Nystrom or Andreas Kling, who don't feel the need to curse every few lines.
I love that instead of this style we're getting a new generation of programmers who are genuinely nice, calm and friendly. People such as Bob Nystrom or Andreas Kling, who don't feel the need to curse every few lines.
There is always a balance with these things. I try to be careful to use profanity as a tool rather than a literary crutch.
If you only use a phrase like "fucking bullshit" once across an entire blog post or book, you will find it has far greater impact on the reader. They will think "wow out of 400 pages of polite discourse, this is the one thing the author would really like to highlight as adverse".
If you only use a phrase like "fucking bullshit" once across an entire blog post or book, you will find it has far greater impact on the reader. They will think "wow out of 400 pages of polite discourse, this is the one thing the author would really like to highlight as adverse".
Agreed, this is what I liked about the book “The Martian”. The protagonist only curses a couple times in the book and they really carry weight given the circumstances.
> The overly curse happy programmer speak is so very stale.
Today, yes, but the site isn't new either.
> It doesn't make the content more interesting. It doesn't make the author seem any cooler.
I don't think the point was either of those things. It's meant to express outrage at the overcomplication of websites with the excessive use of javascript, the needing to download megabytes of JS to render some text, etc.
Here's the context from the original:
> You think your 13 megabyte parallax-ative home page is going to get you some fucking Awwward banner you can glue to the top corner of your site. You think your 40-pound jQuery file and 83 polyfills give IE7 a boner because it finally has box-shadow.
Being outraged at the state of the web has been lessening in popularity, I think. That's possibly because CSS has improved a lot and IE is finally obsolete.
Today, yes, but the site isn't new either.
> It doesn't make the content more interesting. It doesn't make the author seem any cooler.
I don't think the point was either of those things. It's meant to express outrage at the overcomplication of websites with the excessive use of javascript, the needing to download megabytes of JS to render some text, etc.
Here's the context from the original:
> You think your 13 megabyte parallax-ative home page is going to get you some fucking Awwward banner you can glue to the top corner of your site. You think your 40-pound jQuery file and 83 polyfills give IE7 a boner because it finally has box-shadow.
Being outraged at the state of the web has been lessening in popularity, I think. That's possibly because CSS has improved a lot and IE is finally obsolete.
Glad to see others feel this way - I swear often enough myself but I find this type of writing very unattractive despite it being a joke. I had to stop reading.
I was wondering if I'm just getting old or if it's actually a bit tired. Perhaps a bit of both.
I was wondering if I'm just getting old or if it's actually a bit tired. Perhaps a bit of both.
Fuck this^, seriously though, I don't think I've worked with a lot of programmers or frontend folks that cursed regularly but instead have been nice, calm and friendly. I don't think the point here was to make it more interesting or to make the author seem cooler. This is just a continuance of an existing joke.
Totally agree. I think most people stop thinking this vulgarity for the sake of itself type of humor is funny by the time they get to high school
Agreed. It's very over the top and just feels super cheesy and 'keyboard warrior'-ish.
> The overly curse happy programmer speak is so very stale.
This one isn't so bad in context. It is several down a chain of pages responding to each other that started with a sweary one. As well as each page adding more points (or arguing agaist previously stated ones) they have added a little extra profanity too.
On its own I'd agree with you assessment, but within the pattern if you have followed the story it fits less awkwardly.
This one isn't so bad in context. It is several down a chain of pages responding to each other that started with a sweary one. As well as each page adding more points (or arguing agaist previously stated ones) they have added a little extra profanity too.
On its own I'd agree with you assessment, but within the pattern if you have followed the story it fits less awkwardly.
IMO the context makes this one worse. The first one was amusing. The second one was stale. This one is cringeworthy and played out.
Its called hyperbole. Also, this was inspired by https://motherfuckingwebsite.com/, so it make sense to follow the same format.
[deleted]
[deleted]
> And did you let the browser choose the font? Don’t make me read such text with Times New Roman.
I don't understand this attitude. If you don't like Times New Roman, why don't you change your browser's default font?
What I don't like is when websites tell my browser to use a different font or different colors than the ones I configured.
(Off-topic, but something that really annoys me is websites that make text in <textarea> very dark grey without changing the background; as I configured a black background and white text)
I don't understand this attitude. If you don't like Times New Roman, why don't you change your browser's default font?
What I don't like is when websites tell my browser to use a different font or different colors than the ones I configured.
(Off-topic, but something that really annoys me is websites that make text in <textarea> very dark grey without changing the background; as I configured a black background and white text)
> What I don't like is when websites tell my browser to use a different font or different colors than the ones I configured.
The web must be a very disappointing place for you.
The web must be a very disappointing place for you.
Why is that? Do you also find it infuriating when magazines and books don't use your preferred font? Perhaps it annoys you when web pages don't use your favourite colour for every element too.
Web pages are designed and typography is part of the design.
Web pages are designed and typography is part of the design.
I use an ebook reader and it lets me configure the font, size, spacing, and margins.
I don't mind printed books and magazines because it's a constraint of the medium; but for websites it's a missed opportunity.
I don't mind printed books and magazines because it's a constraint of the medium; but for websites it's a missed opportunity.
Books are often typeset by competent people (or at least people who are enough to have opinions on typesetting) while the web is usually the result of middle management and marketing seeing you as the dumb thing keeping some metric too low.
Magazines are their own thing although typically this does apply to the actual articles themselves; Someone who knows what they're doing lays them out.
Magazines are their own thing although typically this does apply to the actual articles themselves; Someone who knows what they're doing lays them out.
You have my full agreement. Disallowing website-chosen fonts (or enforcing minimum font size) can break some things slightly, but is worth it in my eyes. But with colors, there are way too many sites blindly assuming a black-on-white browser stylesheet not just for textarea, but for the entire website, making everything unreadable. And you can't win there: Turning of color overriding entirely makes for a calmer, more unified experience, but utterly breaks the usability of a number of interfaces (not the fault of the website).
Serifs can be a good thing for readability! I don’t know that the creator’s choice to force sans-serif was ideal here.
When I was taught design in the early oughts they said serif for print and sans for screens. I think it had to do with rendering at lower resolutions and small screen sizes.
Indeed, if you've ever had the chance to compare serifs on a 96dpi and a 170dpi monitor, or even 300dpi, it's absolutely incredible. At those resolutions serifs are absolutely awesome - but I'll never use them at lower resolutions again.
I think ideally, your browser should have a default serif, sans-serif, and monospace font, and websites should default to using it. I think there are useful cases for each style, but we really need not download seven fonts every time we load a website.
[deleted]
Sometimes it’s necessary, as the number of code points and thus scripts supported by default fonts is low.
Firefox allows you to lock fonts based on serif, sans-serif, and monospace. I have done such, along with also setting a minimum font size. And honestly the only thing it ever seems to break are those stupid icon fonts.
Most websites are not designed for you, the 0.5% of users who are running some personalized style sheet override. They’re designed for the other 99.5% of people who don’t even realize that’s possible.
It's not a stylesheet, it's good old font choice dialog.
[deleted]
No, your motherfucking website is not improved by jamming your pet design theories into it. This is why all these spinoffs are terrible, with the possible exception of https://bestmotherfucking.website/ which removed things from a different spinoff.
The low contrast meme in web design is especially harmful.
The low contrast meme in web design is especially harmful.
I'm properly on board with getting rid of light grey on white but this is a little much. I don't even have that great a monitor and this is kinda burning my eyes out.
Take the background to a #111 and the text to a #ddd and you've hit my personal perfection
Take the background to a #111 and the text to a #ddd and you've hit my personal perfection
Yep, I agree. Jamming the design theory into it is absolutely missing the point of the original.
I built an antithesis to this: https://lxe.github.io/everywebsite/
The top banner should be transparent so that the scrolled text is visible through it (cf. stackoverflow). Also needs the second top red banner begging to enable javascript. The looking glass search button should be in a sticky position in the middle of the window obscuring the text (cf. wired.com).
You missed a banner nagging me to download the mobile app, I can still see actual content on about 25% of my phone screen!
> Also you have to click "I Agree"
No thanks. My preferred method for removing cookie banners is to just delete the node from the DOM. It works 99% of the time and I don't have to agree to anything. I suspect it's only a matter of time until someone makes uBlock Origin for cookie banners instead of ads.
EDIT: Nevermind. It's already part of uBlock Origin.
No thanks. My preferred method for removing cookie banners is to just delete the node from the DOM. It works 99% of the time and I don't have to agree to anything. I suspect it's only a matter of time until someone makes uBlock Origin for cookie banners instead of ads.
EDIT: Nevermind. It's already part of uBlock Origin.
I've noticed an increasing number of sites that seem to break in weird ways, until I temporarily disable my ad blocker to agree/reject cookies, then it works again.
Frustrating really because they're supposed to be opt-in, so no response at all should == reject
Frustrating really because they're supposed to be opt-in, so no response at all should == reject
What do you do when they say that by continuing to use the website, you agree to the use of cookies?
It just needs an auto-playing video that docks itself in to the corner as you try to scroll away from it
Your site still loads fast and doesn't hog my CPU
Please add some content so that I can start scrolling through it, and halfway into the content, have most of it blocked by a new modal!
That would make too much sense. Request denied.
How much longer until we see one of these that imports 100mb of Javascript to make a responsive, reactive, server-rendered SPA. Saying things like "Just npx create-react-app fucker, it gives a better fucking user experience out of the box than your shit fucking browser does" and still claims to somehow be satire?
Alright so, I like these websites, because they are great. But a lot of people take their existence as a reason to shit on modern website development and say asinine shit like "all these websites are slow because they use react/vue/angular/whatever" so I registered modernfuckingwebsite.com to show that using modern build systems, modern tools, and all the hotness you can produce a fast, lightweight website that is just as "great" as these, completely negating their whole view of modern tools.
But I haven't had the time to put into it.
But I haven't had the time to put into it.
That sounds like it would be satire to me.
Good advice regarding `lang` and a11y aside, I think people are starting to kinda miss the point of the brutalist format. The format is meant to prioritize pragmatism and functional form instead of being statements in and of themselves (in fact it's meant to be a pushback against earlier styles that prioritized form over function). The original has a great effect because the usage of expletives gels well with the tone of its message ("wake up, you're doing it wrong!").
Here, the substance of the article is primarily about subtle incremental improvements, and it's quite clear that the expletives are being used to draw more effect to content that would be quite a bit more "boring" otherwise (though don't get me wrong, the advice is generally good)
To be fair, one could argue that appropriating a style in a way that is counter to its original intent is itself a form of art. But by the third or fourth me-too, it feels cliche and watered down to me IMHO.
Here, the substance of the article is primarily about subtle incremental improvements, and it's quite clear that the expletives are being used to draw more effect to content that would be quite a bit more "boring" otherwise (though don't get me wrong, the advice is generally good)
To be fair, one could argue that appropriating a style in a way that is counter to its original intent is itself a form of art. But by the third or fourth me-too, it feels cliche and watered down to me IMHO.
They just copied http://bettermotherfuckingwebsite.com/ and tweaked it slightly with a few opinionated changes. This is very lazy.
Not quite perfect. Page links to "Don't be dumb with typography" which talks about using smart quotes instead of dumb quotes - then in the quote block further down the page uses dumb quotes :-(
"License, motherfucker"
I know the vulgarity of the statements is tongue in cheek, but this one has been reinforced lately by the "MIME Magic" debacle[1], mama mia.
[1] https://github.com/mimemagicrb/mimemagic/issues/98
I know the vulgarity of the statements is tongue in cheek, but this one has been reinforced lately by the "MIME Magic" debacle[1], mama mia.
[1] https://github.com/mimemagicrb/mimemagic/issues/98
Related/I like this: https://jgthms.com/web-design-in-4-minutes/
(IMO someone ought to write, if one doesn't already exist, an interactive tool that suggests recommended styling for your site one by one, and you can accept or reject each of them, then save the CSS file when you're done.)
See also (it works fine in Firefox but the fonts don't seem to change in Chrome and I don't know why): https://mbarkhau.keybase.pub/readable-text/index.html
(IMO someone ought to write, if one doesn't already exist, an interactive tool that suggests recommended styling for your site one by one, and you can accept or reject each of them, then save the CSS file when you're done.)
See also (it works fine in Firefox but the fonts don't seem to change in Chrome and I don't know why): https://mbarkhau.keybase.pub/readable-text/index.html
I get the push against overly stylized, heavy library downloads, etc. However, I'm leaning towards the Perfect MoFo version versus the MoFo version. A little CSS can do wonders. There's a lot of times my browser is full screen width or some size greater than 50% of width. To read the text on the MoFo version, I need to ever so slightly turn my head from line to line. It's right up there with coming late to the movie theater to have to sit in the very first row to watch Star Wars. Reading the scrolling text is a physical excersise.
Today, a lot of (commercial) web design is done just to compensate for the lack of (quality) content. That reminds me of that story about a blogger who spends more time designing a blog than writing articles.
My advice to young web authors would be to spend more time on content than design. In the end, it doesn't really matter if you used system font (like Arial) or Google font, or if your background is #EEE or #FFF. Just don't make unaccessible sites
BTW: I am aware that average internet users don't think this way
BTW: I am aware that average internet users don't think this way
I want to hecking scream.
The point of the original website in this chain was not that you couldn't do media queries, or that all of your designs had to be unstyled. It was a gosh-darned satire that showed that even if you did literally nothing, your website would still be responsive and readable and load fast. The fact that it did nothing, that it was just a completely unstyled HTML page was the reason that the joke worked.
The point was to showcase that often when "native" web features break, those problems can be traced back to things we added to the page, things that are nice, but are not strictly required to view content online. It was not saying that we should get rid of CSS, it was saying that the web, by default, without any technical knowledge or design chops or engineering input, still works to deliver content.
So naturally, the first thing the web community does is set up a build chain, add some CSS, mess with the contrast a bit, and start some kind of childish competition about who can make the best minimalist stylesheet and get the best HTTP compression set up on whatever pointless server setup they have and to start arguing about what license they're using.
You are missing the point!
The point was never to say that you couldn't add media queries to your website. The web community looked at a brilliant satirical piece and instead of sitting down and thinking about it for even just 5 minutes they immediately proved it right by showing that there was literally no context anywhere, even in a joke page, where they wouldn't be overcome with the irresistible urge to fiddle with things.
The point of the original website in this chain was not that you couldn't do media queries, or that all of your designs had to be unstyled. It was a gosh-darned satire that showed that even if you did literally nothing, your website would still be responsive and readable and load fast. The fact that it did nothing, that it was just a completely unstyled HTML page was the reason that the joke worked.
The point was to showcase that often when "native" web features break, those problems can be traced back to things we added to the page, things that are nice, but are not strictly required to view content online. It was not saying that we should get rid of CSS, it was saying that the web, by default, without any technical knowledge or design chops or engineering input, still works to deliver content.
So naturally, the first thing the web community does is set up a build chain, add some CSS, mess with the contrast a bit, and start some kind of childish competition about who can make the best minimalist stylesheet and get the best HTTP compression set up on whatever pointless server setup they have and to start arguing about what license they're using.
You are missing the point!
The point was never to say that you couldn't add media queries to your website. The web community looked at a brilliant satirical piece and instead of sitting down and thinking about it for even just 5 minutes they immediately proved it right by showing that there was literally no context anywhere, even in a joke page, where they wouldn't be overcome with the irresistible urge to fiddle with things.
>>I want to hecking scream.
Overreacting much?
>The point of the original website in this chain was not that you couldn't do media queries, or that all of your designs had to be unstyled. It was a gosh-darned satire that showed that even if you did literally nothing, your website would still be responsive and readable and load fast. The fact that it did nothing, that it was just a completely unstyled HTML page was the reason that the joke worked.
Yeah, so? Who cares about the point of the original website? As if it was some sacred ultimate truth, that only makes sense in the exact original wording and message?
The point of THIS website is that you can improve upon the original "do nothing" website by a lot, and still do almost nothing: just add 10 tiny CSS lines.
Overreacting much?
>The point of the original website in this chain was not that you couldn't do media queries, or that all of your designs had to be unstyled. It was a gosh-darned satire that showed that even if you did literally nothing, your website would still be responsive and readable and load fast. The fact that it did nothing, that it was just a completely unstyled HTML page was the reason that the joke worked.
Yeah, so? Who cares about the point of the original website? As if it was some sacred ultimate truth, that only makes sense in the exact original wording and message?
The point of THIS website is that you can improve upon the original "do nothing" website by a lot, and still do almost nothing: just add 10 tiny CSS lines.
This meme won’t die. Heck, I'm thinking how to build the next version of this site!
'a perfecter motherfucking site' will 'improve' this site adding 10 more tiny CSS lines
'the most perfectest motherfucking site' will improve that site by adding just 6 teeny tiny more CSS lines and maybe like the most little tiny bit of javascript.
'the absolute final most perfectest motherfucking site'.. will improve THAT site, and the feature creep goes on.
they're all built off of the concept of the original, so it makes sense to 'care' about the 'point' of the original website. the only sacred ultimate truth was that nice things are possible with HTML only. i disagree that this particular website offers any improvement.
'the most perfectest motherfucking site' will improve that site by adding just 6 teeny tiny more CSS lines and maybe like the most little tiny bit of javascript.
'the absolute final most perfectest motherfucking site'.. will improve THAT site, and the feature creep goes on.
they're all built off of the concept of the original, so it makes sense to 'care' about the 'point' of the original website. the only sacred ultimate truth was that nice things are possible with HTML only. i disagree that this particular website offers any improvement.
> Overreacting much?
Matching the poster's tone.
> Yeah, so? Who cares about the point of the original website?
This website (and the rest of the extensive "betterwebsite" collection) is written as a direct response to the original website. That's why the title is what it is, that's why it talks about the original.
Death of the author is a thing, but people don't typically cite death of the author when they are directly responding to someone's point. We usually expect responses to have something to do with what they're responding to.
If the URL of this website was "howtomakeafastprettywebsite.com", we wouldn't be having this conversation right now, because "put a max-width on your columns" is not exactly a controversial or bold design statement.
Matching the poster's tone.
> Yeah, so? Who cares about the point of the original website?
This website (and the rest of the extensive "betterwebsite" collection) is written as a direct response to the original website. That's why the title is what it is, that's why it talks about the original.
Death of the author is a thing, but people don't typically cite death of the author when they are directly responding to someone's point. We usually expect responses to have something to do with what they're responding to.
If the URL of this website was "howtomakeafastprettywebsite.com", we wouldn't be having this conversation right now, because "put a max-width on your columns" is not exactly a controversial or bold design statement.
I agree that they might be missing the point, but I also feel that adding a one or two extra CSS lines is really needed to turn something that is very unpleasant to read (the biggest problem being the unlimited width) into something that is really basically perfect. Like, this one is actually pretty much perfect, while the original makes me want to manually add a max-width from the inspector.
I agree. You could pour 80% of web content into this and it would work.
This one has a dark theme though.
[deleted]
And a license.
I took booleandilemma's comment as a joke, but to the broader point, why does a joke page that's smaller than a blog post need a license?
Does it add something to the satire, or does it make it funnier? Clearly the original page's lack of a license didn't make it impossible for anyone else to iterate on it.
And again, I can't stress this enough, the point of the original page was not that every single addition you could make to a website was bad. It was not that you shouldn't have a dark mode. It used radical minimalism to show that by default websites work, even if you have no clue what you're doing.
The lack of niceties is the point. Nobody was unable to read the original page or iterate on it. Could the page have been nicer? Sure. But the point was that even if you did nothing at all, the web still worked.
Does it add something to the satire, or does it make it funnier? Clearly the original page's lack of a license didn't make it impossible for anyone else to iterate on it.
And again, I can't stress this enough, the point of the original page was not that every single addition you could make to a website was bad. It was not that you shouldn't have a dark mode. It used radical minimalism to show that by default websites work, even if you have no clue what you're doing.
The lack of niceties is the point. Nobody was unable to read the original page or iterate on it. Could the page have been nicer? Sure. But the point was that even if you did nothing at all, the web still worked.
:) The irony here being that the WTFYWPL license is generally not advised for projects that actually care about making it easy for others to use the code, it is itself a little bit of a joke license used to forcefully make the point that the author doesn't care about the copyright and is not interested in suing people or arguing about ownership.
So it's appropriate in this context, but also pretty easy to argue that 10 lines of code are not a serious copyright threat anyway, and that it's not clear what code on this page is even subject to copyright in the first place, and that the author might have gone all the way and leaned into the fact that you don't really need an entire Git repo with a license for a single HTML page.
So it's appropriate in this context, but also pretty easy to argue that 10 lines of code are not a serious copyright threat anyway, and that it's not clear what code on this page is even subject to copyright in the first place, and that the author might have gone all the way and leaned into the fact that you don't really need an entire Git repo with a license for a single HTML page.
and a lang= attribute
I have stopped waiting for website authors to figure out how to make a dark theme. I just have my user agent do it with https://darkreader.org/
Like ad blockers, sometimes you have to adjust it, but it usually Just Works. The main innovation from this is that my display has much improved contrast, because I can set the brightness for text on a black background, instead of setting the brightness for an entire screen of white. It is amazing how good a screen looks when it's not running at 1% brightness. (Just don't open a non dark mode app at night, or you won't be sleeping for a week.)
Like ad blockers, sometimes you have to adjust it, but it usually Just Works. The main innovation from this is that my display has much improved contrast, because I can set the brightness for text on a black background, instead of setting the brightness for an entire screen of white. It is amazing how good a screen looks when it's not running at 1% brightness. (Just don't open a non dark mode app at night, or you won't be sleeping for a week.)
with dark-reader you still have the problem of getting blinded at night for the first second or so until the DOM finished parsing. There were some workarounds with userChrome.css userContent.css that solved this for a while, but they broke in recent builds so I'm back to feeling like a deer staring at the headlights every time a new tab opens on a page.
I'm not 100% certain that this should be forced by the browser and IMHO it's the websites owners job to provide properly working dark theme and the UI/UE they think fits best their purpose (and not the browsers). Unless the assumption is that styling across all sites should look 100% identical which may appeal to some, though if I really want that then I can go look for content on gemini:// and no page will ever use their own styling other than what I am telling it to. Maybe it's just me but I like being dazzled and surprised with new design and style that I've not seen before.
I'm not 100% certain that this should be forced by the browser and IMHO it's the websites owners job to provide properly working dark theme and the UI/UE they think fits best their purpose (and not the browsers). Unless the assumption is that styling across all sites should look 100% identical which may appeal to some, though if I really want that then I can go look for content on gemini:// and no page will ever use their own styling other than what I am telling it to. Maybe it's just me but I like being dazzled and surprised with new design and style that I've not seen before.
If rendering was server's concern, you would be served jpegs, not html.
You're definitely right about being blinded during a startup delay. It's not every site but it does happen.
I agree that all websites should give users a dark mode. They don't, so we have to make our own.
I agree that all websites should give users a dark mode. They don't, so we have to make our own.
> I just have my user agent do it with https://darkreader.org/
And for $4.99 Safari user. 30% paid to Apple and 70% for developer to recoup their $99/year cost.
And for $4.99 Safari user. 30% paid to Apple and 70% for developer to recoup their $99/year cost.
And HTTPS so I can sleep at night knowing noone MITM'd my stupid internet content.
I beg to differ. The first website looks horrible on widescreen displays. A lot of old websites follow the style of first website and their readability could be improved 10 times by adding 10 lines of CSS.
> The first website looks horrible on widescreen displays
But you were able to read it, right? You didn't have to go find a separate computer to use to figure out what it was saying. The text didn't get cut off when you resized your browser window.
> The first website looks horrible
I mean, yes? I'm not sure what you're saying by this though. Nobody (at least nobody worth taking seriously) is telling you that you should follow the style of the first website. You should have max-widths and throw some CSS on your page. To quote the original website:
> I'm not actually saying your **** site should look like this. What I'm saying is that all the problems we have with websites are ones we create ourselves. Websites aren't broken by default, they are functional, high-performing, and accessible. You break them.
There's this argument in all of the followup websites that seems to boil down to "it's easier to make websites look better than the original." And yes? But who is arguing with you that we should deprecate CSS from the browser? Who is arguing that it's a hard task to make something that looks and reads nicer than a completely unstyled page? It's a weirdly oblivious misreading of the original joke.
But you were able to read it, right? You didn't have to go find a separate computer to use to figure out what it was saying. The text didn't get cut off when you resized your browser window.
> The first website looks horrible
I mean, yes? I'm not sure what you're saying by this though. Nobody (at least nobody worth taking seriously) is telling you that you should follow the style of the first website. You should have max-widths and throw some CSS on your page. To quote the original website:
> I'm not actually saying your **** site should look like this. What I'm saying is that all the problems we have with websites are ones we create ourselves. Websites aren't broken by default, they are functional, high-performing, and accessible. You break them.
There's this argument in all of the followup websites that seems to boil down to "it's easier to make websites look better than the original." And yes? But who is arguing with you that we should deprecate CSS from the browser? Who is arguing that it's a hard task to make something that looks and reads nicer than a completely unstyled page? It's a weirdly oblivious misreading of the original joke.
The problem is that people do build sites that look like the first website:
https://www.gnu.org/software/grub/manual/multiboot/multiboot...
https://www.gnu.org/software/grub/manual/multiboot/multiboot...
Fair, but using GNU's work as an example almost feels like cheating in a weird way ;).
GNU is not building a hard-core minimalist website, they do include CSS on their page -- in fact they include more of it than this website does. So the problem isn't that GNU is too minimal or that they've sworn off of CSS, the problem is that modern GNU increasingly doesn't seem to know how to design anything at all when it comes to UX, and that there's probably somebody somewhere on their chain of authority for this page seriously arguing that line-wrapping is bad design or some other nonsense.
But I don't know. To the extent that GNU's design aesthetics actually represent a web design trend, then I do concede that it's a bad trend, and everybody who's following it should add `body { max-width: 40em; margin: auto; }` to the top of their CSS files.
GNU is not building a hard-core minimalist website, they do include CSS on their page -- in fact they include more of it than this website does. So the problem isn't that GNU is too minimal or that they've sworn off of CSS, the problem is that modern GNU increasingly doesn't seem to know how to design anything at all when it comes to UX, and that there's probably somebody somewhere on their chain of authority for this page seriously arguing that line-wrapping is bad design or some other nonsense.
But I don't know. To the extent that GNU's design aesthetics actually represent a web design trend, then I do concede that it's a bad trend, and everybody who's following it should add `body { max-width: 40em; margin: auto; }` to the top of their CSS files.
GNU docs have good design in accordance with W3C best practices: rendering is user agent's job, and if it doesn't do the job per your preference, you change the user agent to the one that does or submit an RFE to your user agent vendor to support your preference.
> GNU docs have good design
Who's side are you on here, stop proving fctorial's point :)
> rendering is user agent's job
GNU uses more CSS than the joke website in question for an uglier result; they're putting in more effort to make something that's less readable. I don't see how anyone can call that good design. It would take literally 2 CSS declarations to improve their website's design for >90% of the people looking at their page, at no cost or inconvenience to any other user. Good user-interface design incorporates sensible defaults.
It is a very GNU-like thing to look at the current web ecosystem, notice that basically every browser acts a certain way and has a certain standard default styling for HTML, and then to still argue that it's the user's fault that their website looks the way it does.
I don't see any W3C best practices anywhere that argue column widths should be avoided, and GNU is clearly comfortable overriding default agent behavior for other parts of this page when it comes to indenting lists and styling code blocks.
Edit: actually, I stand corrected. GNU is including a bunch of styling code and then commenting it out so it doesn't work. What the heck, who is maintaining this page? Why is that stuff being shipped to the user if it's unusable? In any case, W3C best practice is very much NOT to avoid all CSS, that's a massive mischaracterization of their positions.
Who's side are you on here, stop proving fctorial's point :)
> rendering is user agent's job
GNU uses more CSS than the joke website in question for an uglier result; they're putting in more effort to make something that's less readable. I don't see how anyone can call that good design. It would take literally 2 CSS declarations to improve their website's design for >90% of the people looking at their page, at no cost or inconvenience to any other user. Good user-interface design incorporates sensible defaults.
It is a very GNU-like thing to look at the current web ecosystem, notice that basically every browser acts a certain way and has a certain standard default styling for HTML, and then to still argue that it's the user's fault that their website looks the way it does.
I don't see any W3C best practices anywhere that argue column widths should be avoided, and GNU is clearly comfortable overriding default agent behavior for other parts of this page when it comes to indenting lists and styling code blocks.
Edit: actually, I stand corrected. GNU is including a bunch of styling code and then commenting it out so it doesn't work. What the heck, who is maintaining this page? Why is that stuff being shipped to the user if it's unusable? In any case, W3C best practice is very much NOT to avoid all CSS, that's a massive mischaracterization of their positions.
>Who's side are you on here, stop proving fctorial's point :)
I'm on my side and against people who push their preferences on me.
>It would take literally 2 CSS declarations to improve their website's design for >90% of the people looking at their page, at no cost or inconvenience to any other user. Good user-interface design incorporates sensible defaults.
The sensible default is to follow user preferences. Those 90% people do it this way and GNU docs rightfully don't question it. User preferences can't be reasonably implemented on the server side, because different people have different preferences, so it's undecidable whose preferences to implement.
>I don't see any W3C best practices anywhere that argue column widths should be avoided
W3C best practice is to let user agent render text as appropriate.
http://motherfuckingwebsite.com/ touches on this too:
>You dumbass. You thought you needed media queries to be responsive, but no. Responsive means that it responds to whatever motherfucking screensize it's viewed on. This site doesn't care if you're on an iMac or a motherfucking Tamagotchi.
W3C often refers to unusual user agents to illustrate their point of client side rendering.
I'm on my side and against people who push their preferences on me.
>It would take literally 2 CSS declarations to improve their website's design for >90% of the people looking at their page, at no cost or inconvenience to any other user. Good user-interface design incorporates sensible defaults.
The sensible default is to follow user preferences. Those 90% people do it this way and GNU docs rightfully don't question it. User preferences can't be reasonably implemented on the server side, because different people have different preferences, so it's undecidable whose preferences to implement.
>I don't see any W3C best practices anywhere that argue column widths should be avoided
W3C best practice is to let user agent render text as appropriate.
http://motherfuckingwebsite.com/ touches on this too:
>You dumbass. You thought you needed media queries to be responsive, but no. Responsive means that it responds to whatever motherfucking screensize it's viewed on. This site doesn't care if you're on an iMac or a motherfucking Tamagotchi.
W3C often refers to unusual user agents to illustrate their point of client side rendering.
> and against people who push their preferences on me.
> The sensible default is to follow user preferences.
> W3C best practice is to let user agent render text as appropriate.
But nothing about including CSS goes against this. CSS is clientside rendering, it has nothing to do with forcing preferences on anyone. Your browser has the ability to override provided styles and either modify or ignore CSS. If it doesn't then I suggest, in your words, "changing the user agent to the one that does, or submiting an RFE to your user agent vendor."
This is why we use CSS. So that we can separate style from content and lay out a page with nice defaults that can still be overridden by the user.
And not only is CSS customizable and overridable, because it's completely separate from content it is also optional. Any of your users can choose not to download your CSS file and they'll get served the exact same HTML content that they're getting now. So when I say that there's no cost or inconvenience for users who don't like your styles, I literally mean that. There is no cost to them because they don't have to download the file. They can disable all 3rd-party CSS in their user agent if they don't want it, and then they don't even need to waste time making an extra network request.
Imagine taking this attitude with other applications as well. Should we be upset that Emacs ships with default keybindings? Is that as an undecidable problem? When I install a MELPA package, should I get mad that the author is pushing their default config on me? There's no downside to having optional defaults that users can partially override or fully ignore at their own convenience.
> W3C best practice is to let user agent render text as appropriate.
If this is genuinely GNU's attitude, then why does this page include style resets?
You're heavily misreading the W3C's position here. Letting the user agent render text as appropriate does not contradict providing CSS, and I've never heard of the W3C advising authors to avoid CSS.
> The sensible default is to follow user preferences.
> W3C best practice is to let user agent render text as appropriate.
But nothing about including CSS goes against this. CSS is clientside rendering, it has nothing to do with forcing preferences on anyone. Your browser has the ability to override provided styles and either modify or ignore CSS. If it doesn't then I suggest, in your words, "changing the user agent to the one that does, or submiting an RFE to your user agent vendor."
This is why we use CSS. So that we can separate style from content and lay out a page with nice defaults that can still be overridden by the user.
And not only is CSS customizable and overridable, because it's completely separate from content it is also optional. Any of your users can choose not to download your CSS file and they'll get served the exact same HTML content that they're getting now. So when I say that there's no cost or inconvenience for users who don't like your styles, I literally mean that. There is no cost to them because they don't have to download the file. They can disable all 3rd-party CSS in their user agent if they don't want it, and then they don't even need to waste time making an extra network request.
Imagine taking this attitude with other applications as well. Should we be upset that Emacs ships with default keybindings? Is that as an undecidable problem? When I install a MELPA package, should I get mad that the author is pushing their default config on me? There's no downside to having optional defaults that users can partially override or fully ignore at their own convenience.
> W3C best practice is to let user agent render text as appropriate.
If this is genuinely GNU's attitude, then why does this page include style resets?
You're heavily misreading the W3C's position here. Letting the user agent render text as appropriate does not contradict providing CSS, and I've never heard of the W3C advising authors to avoid CSS.
Maybe it's defeatable, but it's still fighting against user preferences. Not sure how you can make that sound palatable. The analogy is if the text documents dictated the editor settings, what font, size, color scheme and keybindings to use because emacs defaults are not to the document author's preferences.
>There's no downside to having optional defaults that users can partially override or fully ignore at their own convenience.
That's what GNU docs do, they use defaults: i.e. they follow user preferences.
>There's no downside to having optional defaults that users can partially override or fully ignore at their own convenience.
That's what GNU docs do, they use defaults: i.e. they follow user preferences.
> Maybe it's defeatable, but it's still fighting against user preferences.
It's not "defeatable", you're not fighting anybody. You can turn off CSS in Firefox in 2 clicks: View -> Page Style -> No Style. What's happening here is that you're being served a text document, and optionally, if you want to, you can download a separate list of styles that will make it look pretty.
This is like buying a bag of cheese at the grocery mart and getting mad that the a recipe on the side of the package is trying to force you to cook a certain way. Nobody is trying to force you to do anything, we'd just like to have the option of having sensible defaults that look nice without being forced to write custom CSS clientside for every website we visit.
And if it's really that awful of a problem for you, then file a pull request with your user agent to get rid of CSS. It's not the website's fault that your user agent is requesting random files from the Internet without your permission. It's not the server's job to tell your user agent how to display HTML and whether or not to use CSS. Your agent doesn't have to do any extra work here, it just needs to stop going out of its way to request extra files on every website it visits. How is it the server's problem if your user agent can't do that?
You're making this out like CSS has to be "circumvented" or something, but it is easier to build a user agent that ignores CSS than one that consumes it. It's less work, not more.
> The analogy is if the text documents dictated the editor settings
They basically do in Emacs: most specialized buffer-types like Magit and Org ship with their own modes that they expect you to use that have their own keybindings and settings. And Org literally does what you're describing. It allows you to override variables locally per-buffer[0]; everything from column widths to TODO colors to indentation to list styles can be specified using CSS-style declarations at the start of a file.
This is also really common in the terminal world for things like manpages; many manpages will use terminal escape codes to color/bold text, and most hard-code their own indentation using whitespace. And even in regular documents, rich text files and PDFs allow you to specify color information and fonts.
The main difference in all of these examples is that most of them are less user-controllable than CSS is. I can't override how a PDF displays; I can't easily change the indentation in a manpage. Globally disabling buffer settings in Org-mode can be problematic because styling information is mixed with functional information like archive locations. In contrast, I can easily disable and override CSS, and it won't affect the actual content of the page at all.
> That's what GNU docs do, they use defaults
No, not by your standards. The GNU docs do ship CSS. The docs ship with multiple style resets, they set the font size in code blocks, they override list styles, they set fonts as well. So GNU docs are willing to override user preferences for code blocks, just not to make the page work well on widescreen displays.
[0]: https://orgmode.org/manual/In_002dbuffer-Settings.html
It's not "defeatable", you're not fighting anybody. You can turn off CSS in Firefox in 2 clicks: View -> Page Style -> No Style. What's happening here is that you're being served a text document, and optionally, if you want to, you can download a separate list of styles that will make it look pretty.
This is like buying a bag of cheese at the grocery mart and getting mad that the a recipe on the side of the package is trying to force you to cook a certain way. Nobody is trying to force you to do anything, we'd just like to have the option of having sensible defaults that look nice without being forced to write custom CSS clientside for every website we visit.
And if it's really that awful of a problem for you, then file a pull request with your user agent to get rid of CSS. It's not the website's fault that your user agent is requesting random files from the Internet without your permission. It's not the server's job to tell your user agent how to display HTML and whether or not to use CSS. Your agent doesn't have to do any extra work here, it just needs to stop going out of its way to request extra files on every website it visits. How is it the server's problem if your user agent can't do that?
You're making this out like CSS has to be "circumvented" or something, but it is easier to build a user agent that ignores CSS than one that consumes it. It's less work, not more.
> The analogy is if the text documents dictated the editor settings
They basically do in Emacs: most specialized buffer-types like Magit and Org ship with their own modes that they expect you to use that have their own keybindings and settings. And Org literally does what you're describing. It allows you to override variables locally per-buffer[0]; everything from column widths to TODO colors to indentation to list styles can be specified using CSS-style declarations at the start of a file.
This is also really common in the terminal world for things like manpages; many manpages will use terminal escape codes to color/bold text, and most hard-code their own indentation using whitespace. And even in regular documents, rich text files and PDFs allow you to specify color information and fonts.
The main difference in all of these examples is that most of them are less user-controllable than CSS is. I can't override how a PDF displays; I can't easily change the indentation in a manpage. Globally disabling buffer settings in Org-mode can be problematic because styling information is mixed with functional information like archive locations. In contrast, I can easily disable and override CSS, and it won't affect the actual content of the page at all.
> That's what GNU docs do, they use defaults
No, not by your standards. The GNU docs do ship CSS. The docs ship with multiple style resets, they set the font size in code blocks, they override list styles, they set fonts as well. So GNU docs are willing to override user preferences for code blocks, just not to make the page work well on widescreen displays.
[0]: https://orgmode.org/manual/In_002dbuffer-Settings.html
> Edit: actually, I stand corrected. GNU is including a bunch of styling code and then commenting it out so it doesn't work.
Where do you see that? If you’re referring to the <!-- … --> in the <style>, that’s an old standard compatibility hack and doesn’t stop the styles from being applied.
Where do you see that? If you’re referring to the <!-- … --> in the <style>, that’s an old standard compatibility hack and doesn’t stop the styles from being applied.
Yep that was what I was referring too. Good to know, today I learned.
I felt like the original was definitely taking the piss from websites that were 90% static textual content, but won't even load without Javascript. The sort of sites in search of a solution to a problem that does not exist.
Same. Websites are fast, accessible, readable, and decent looking by default. We'd be better off if (like operating systems) more of the presentation preferences were left to the user. I used to use an extension for Firefox that allowed me to disable all styles for a website by hotkey. 9/10 websites were more readable after turning off all styles.
I don't agree with this conclusion. The original could have added ~7 lines of css and made it about 100x more readable, while still making the same point.
antiterra(1)
The stylesheet for this website is linked as such:
https://perfectmotherfuckingwebsite.com/fuckingstyle.css?v=0...
And is minified. So not very simple, which was the whole point of http://motherfuckingwebsite.com/
So I would say there is some room for improvement, and calling it `perfect' is premature.
https://perfectmotherfuckingwebsite.com/fuckingstyle.css?v=0...
And is minified. So not very simple, which was the whole point of http://motherfuckingwebsite.com/
So I would say there is some room for improvement, and calling it `perfect' is premature.
The delicious irony is that this adds an extra point of failure (the request to the CSS file may time out), which brings us right back to the message of the original...
All of those changes *should* be the *default*!
i.e.:
- dark mode should change default colors to white on black.
- viewport default should be "width=device-width, initial-scale=1"
- HTML's only supported charset should be UTF-8.
- Default CSS for body should be something like:
i.e.:
- dark mode should change default colors to white on black.
- viewport default should be "width=device-width, initial-scale=1"
- HTML's only supported charset should be UTF-8.
- Default CSS for body should be something like:
body{
max-width:40em;
margin:0 auto;
padding:1em;
}Re: max-width, please no. Stop making assumptions about my browser's width. If you must specify a max-width (you don't), please at least make it a percentage of the browser's width, and not a fixed pixel or em value. I'm so tired of web sites rendering as a tiny column centered on my nice 27" monitor with gobs of whitespace on either side of the vertical sliver of text.
Default dark mode swap would break _a lot_ of websites. Anything that does not do a full CSS reset including Colors basically.
Serious question:
Why doesn't the Firefox "Reader Mode" icon show up for either this or the original website?
Edit: my reason for wanting Reader Mode on the original website is because I'm reading on a bog standard desktop monitor and the long-ass lines are hard to read.
Why doesn't the Firefox "Reader Mode" icon show up for either this or the original website?
Edit: my reason for wanting Reader Mode on the original website is because I'm reading on a bog standard desktop monitor and the long-ass lines are hard to read.
"What I’m saying is that it’s so, so simple to make sites easier to read."
If it was so simple, wouldn't everyone be doing it already?
"Websites are broken by default—they are functional, high-performing, and accessible, but they’re also fucking ugly. You and all the other web designers out there need to make them not total shit."
Or we could leave them total shit, and it would probably continue to work just fine. Focus on meeting your minimum requirements first, then add improvements over time.
Yes, it should be simpler, and we should make it easier for people to make things "work right" and "not be total shit". But until then, just make a shitty webpage and get on with life.
If it was so simple, wouldn't everyone be doing it already?
"Websites are broken by default—they are functional, high-performing, and accessible, but they’re also fucking ugly. You and all the other web designers out there need to make them not total shit."
Or we could leave them total shit, and it would probably continue to work just fine. Focus on meeting your minimum requirements first, then add improvements over time.
Yes, it should be simpler, and we should make it easier for people to make things "work right" and "not be total shit". But until then, just make a shitty webpage and get on with life.
i don't understand the hassle around page width.
first: there is no such concept of "page" in HTML. a web page is a document without specified dimensions by the original design of the web, not a "page" in a sense like pages in press-related applications (pdf, word processors, A4). so if you force any width to a DOM box, it'll be either too big or too small for someone (except if you know your target audience uniformely watches fullscreen browser on a 1900×1200px display - or i don't know whatever is the most popular screen resolution nowadays), and you can not reliably force min/max width in px without knowing what are the font sizes in the box, which is often unknown because the font renderer does not disclose it to the DOM renderer, let alone to the css author: remember it must be the user's free choice to set preferred font size for paragraph/headline/emphasizes, because you neither can uniformize all display and viewport size, user's eyesight, nor is it sensible to design your site for all possible viewport when the layout can be more reliably computed by the presentation application when the user's preferences are available.
and secondly: can not users just resize the browser window to prevent long lines? it's one click-and-drag move.
my point is: content authors should only decide on semantic design, not details (not specific color or size, or texture) ; and the reader should fill the specifics and present the document to the user according to his preferences.
first: there is no such concept of "page" in HTML. a web page is a document without specified dimensions by the original design of the web, not a "page" in a sense like pages in press-related applications (pdf, word processors, A4). so if you force any width to a DOM box, it'll be either too big or too small for someone (except if you know your target audience uniformely watches fullscreen browser on a 1900×1200px display - or i don't know whatever is the most popular screen resolution nowadays), and you can not reliably force min/max width in px without knowing what are the font sizes in the box, which is often unknown because the font renderer does not disclose it to the DOM renderer, let alone to the css author: remember it must be the user's free choice to set preferred font size for paragraph/headline/emphasizes, because you neither can uniformize all display and viewport size, user's eyesight, nor is it sensible to design your site for all possible viewport when the layout can be more reliably computed by the presentation application when the user's preferences are available.
and secondly: can not users just resize the browser window to prevent long lines? it's one click-and-drag move.
my point is: content authors should only decide on semantic design, not details (not specific color or size, or texture) ; and the reader should fill the specifics and present the document to the user according to his preferences.
There's nothing perfect or even good about constraining your text to a tiny 6" wide column on my 27" monitor. Web sites, please stop this max-width madness!
<h2 id="seriously-some-minimal-fucking-things-are-needed-to-make-this-shit-perfect">Seriously, some minimal fucking things are needed to make this shit perfect.</h2>
What's with the long ID's that look auto-generated? Imagine a large site with this pattern. Does it has a purpose, or is it part of the byte-wasting satire?
Also, after developing large dynamic websites with jQuery I learned that using classes instead of ids is a better strategy.
What's with the long ID's that look auto-generated? Imagine a large site with this pattern. Does it has a purpose, or is it part of the byte-wasting satire?
Also, after developing large dynamic websites with jQuery I learned that using classes instead of ids is a better strategy.
You can (debatably should) do this, as it allows you to deep link into a document. http://example.com#elementID links to that specific item.
I see, thanks!
This reminds me of one of the early internet's most (in)famous bloggers, Maddox. It matches the tone exactly.
Maddox said some very inflammatory things, so I won't link him.
Maddox said some very inflammatory things, so I won't link him.
Maddox is now streaming on twitch as a banana so there's that too
Here is the link for people that understand satire: http://maddox.xmission.com/
Zed Shaw is better guess.
So this is basically Sakura [1] copy and pasted. I know, because it looks exactly like my website, and that's how I did it.
[1] https://oxal.org/projects/sakura/demo/
https://github.com/oxalorg/sakura
[1] https://oxal.org/projects/sakura/demo/
https://github.com/oxalorg/sakura
My preferred classless css framework is Marx. https://mblode.github.io/marx/
Why would you censor the word motherfucking?
Especially given that the shown URL isn’t.
I'm fine with the gratuitous swearing, that's part of this genre of websites. I'm fine with the design choices including a11y and dark mode.
What I'm not enthused about is the DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE. FFS, just use MIT. That's what MIT is for.
What I'm not enthused about is the DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE. FFS, just use MIT. That's what MIT is for.
This is now my favourite article. I'm glad more people are waking up to the beauty of simplicity. Too much of our society is focused on adding more and more onto complex systems, with no thought on how to maintain said systems. This is how I view politics btw...
too many of these no?
here's evenbettermotherfuckingwebsite from 10 months ago: https://news.ycombinator.com/item?id=23202336
here's evenbettermotherfuckingwebsite from 10 months ago: https://news.ycombinator.com/item?id=23202336
Best thing I’ve seen all day.
I would love to know why using "smart" quotes is inherently better than "dumb" quotes. The OP site doesn't say why. The site it linked to doesn't say why. So... why?
It's not perfect, since the scrollbar is keep while while the content has dark background...
maybe you need a <meta name="color-scheme" content="light dark" />
Sure in the real World with stakeholders and bosses good luck
Just going to leave this here https://elementcss.neocities.org/
Considerably worse than the masterful original. I guess it is satire of the earlier (and also worse) "improvements"?
I dislike websites that make all the text in a narrow column. might be perfect for some but not perfect for fuckers like me
For what it’s worth, 95 characters per line seems to be about what’s optimal for reading speed, but most people aesthetically prefer shorter lines.
http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng...
“ This study examined the effects of line length on reading performance. Reading rates were found to be fastest at 95 cpl. Readers reported either liking or disliking the extreme line lengths (35 cpl, 95 cpl). Those that liked the 35 cpl indicated that the short line length facilitated "faster" reading and was easier because it required less eye movement. Those that liked the 95 cpl stated that they liked having more information on a page at one time. Although some participants reported that they felt like they were reading faster at 35 cpl, this condition actually resulted in the slowest reading speed.”
http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng...
“ This study examined the effects of line length on reading performance. Reading rates were found to be fastest at 95 cpl. Readers reported either liking or disliking the extreme line lengths (35 cpl, 95 cpl). Those that liked the 35 cpl indicated that the short line length facilitated "faster" reading and was easier because it required less eye movement. Those that liked the 95 cpl stated that they liked having more information on a page at one time. Although some participants reported that they felt like they were reading faster at 35 cpl, this condition actually resulted in the slowest reading speed.”
Alright, now try building a business on this.
Design is cyclical, and we're already seeing more leading-edge content types pushing back to leaner design. Medium is almost an example of a business that started out like this but has since exploded into shit. I've been seeing Gemini coming up more and more as well so people are becoming aware of the issues with modern web "best-practices."
So yes, maybe it is time for somebody to build a business on this.
So yes, maybe it is time for somebody to build a business on this.
Liiiike craigslist? It'd also be perfect for a blog website. Or a news website. Or 90% of the content on the web that isn't an app.
If @itsJeffTiedrich had a website.
i feel like this is bound to eventually converge on tufte.css
https://edwardtufte.github.io/tufte-css/
https://edwardtufte.github.io/tufte-css/
View source and check :-)
<meta name="description" content=....>
Was Zed Shaw involved in this website or its predecessor?
Zed Shaw did the original, if I recall correctly.
edit: nope! @thebarrytone did the original, the curious can find the author in the source.
edit: nope! @thebarrytone did the original, the curious can find the author in the source.
More fucking websites like this motherfucker. Thanks.
I like the direction this is going.
2edgy4me
(2017) maybe?
Markdown is the way to go most of the time.
Markdown is okay for a README, but it's pretty sucky if you want to make a document easier to read. It's the .ini file of text markup.
I was thinking more of this https://vitepress.vuejs.org/
> body{max-width:650px;margin:40px auto;padding:0 10px;font:18px
Ugh, this guy shouldn't touch web design with a 10 meter pole.
Ugh, this guy shouldn't touch web design with a 10 meter pole.
Um, what's so bad about that?
Yea, seems like it would center it without much fuss. That might be a bit too big for mobile browsers, so choosing that width might be a bit of an odd choice.
Some people see `px` and assume it's physical pixels and because they know some devices have different pixel densities, they go complaining about how coding in terms of pixels instead of `em` doesn't account for density, unaware that `px` refers logical pixels[0]
[0] https://blogs.perficient.com/2014/12/24/css-pixel-ratio-or-h...
[0] https://blogs.perficient.com/2014/12/24/css-pixel-ratio-or-h...
First, that article is about smartphones. Second, even on smartphones, logical or physical, pixels are not related to text, they are related to the screen resolution.
Not sure what argument you're trying to make; can you clarify? This article is also partially about smartphones (dark mode, responsiveness, etc). Back when `em` was not a thing yet, text was measured in `px`, where 16px was considered to be the "default" size for readability purposes (and `em` sizes are a function of a base value in `px`).
Saying that pixels are unrelated to text isn't really accurate, since text obviously occupies space and pixels are a unit of space, and back in the day, expressing layout relationships in terms of pixels was fairly standard.
Saying that pixels are unrelated to text isn't really accurate, since text obviously occupies space and pixels are a unit of space, and back in the day, expressing layout relationships in terms of pixels was fairly standard.
If the font size is different, em width adapts to that, px width doesn't. Text occupies space in pixels, but not vice versa.
Yes I'm aware of that. But regardless of whether you mean this in the sense of adapting to user stylesheets or the idea that disparate elements' font sizes should relate to each other, they both strike me as maintainability trade-offs that can reasonably go either way. An elitist tone seems a bit unnecessary in that context.
The font size can change due to zoom, which is a must, because 16px is too small text and unreadable.
cmd+"+" has always worked regardless of what unit is used, though?
Elements measured in pixels (like images) don't change size when text changes size.
Max width and font size are wrong. Text isn't measured in pixels.
"Fuck" is used here almost as frequently as it is in the book, The Subtle Art of Not Giving a Fuck
I made it about two pages into that book before I stopped giving a fuck about reading it.
I made it to the first headline before I stop giving a fuck about reading this website.
If that was the goal, nailed it.
Swearing for effect can work sometimes, but YMMV. It lost me in this case.
I made it about two pages into that book before I stopped giving a fuck about reading it.
I made it to the first headline before I stop giving a fuck about reading this website.
If that was the goal, nailed it.
Swearing for effect can work sometimes, but YMMV. It lost me in this case.
> A little less contrast
WHY. WHY DO PEOPLE DO THIS. To give this person credit they have at least chosen some sensible values, rather than gone with something that was just about enough on an expensive graphic designer high-contrast monitor and then not tested it on anything else. Leaving the rest of us squinting to try and read text or manually overriding CSS.
Despite not being a complete idiot, they have still made the content harder to read. Contrast is good. It makes things easier to read. Why would you want less? Yes I know the art theory stuff about never using black because it doesn't appear naturally. You know what else doesn't appear naturally? TEXT. Black on white is a perfectly acceptable default, please don't change it for your body text without a really good reason.
(ranty style done in homage to the linked websites, but it felt good to get that out)