I sympathise with the main thrust of the post but, to nitpick, this is just plain wrong:
> But mostly css appeals to our vanity and ego.
Design isn't just about aesthetics. Good information design, clear visual hierarchy, accessibility, etc. all help with communication. The author's effective use of spacing, bold, and code tags show us that they know this intuitively, despite what they write.
I was happy to see someone finally referred to the motherfucking websites.
On the other hand, I was disappointed to see the unique one of those I think it is worth to follow the advice [1] was not cited.
For curiosity reasons, I found out about [1] on a well-known website [2] that definitely puts content in front of presentation, even though I like their website's design.
The source is on GitHub, you're basically looking at "machine code" for the browser. But if you want to verify it's the same code, it isn't obfuscated, so just run a beautifier over it and compare. Best of both worlds.
In my mind "raw browser" look corresponds with "almost insane details coming" as the only sites still using that are often run by people who are WAY more concerned with the content they want to talk about than with the presentation.
Um, shouldn't all people be WAY more concerned with the content than the presentation? I don't want to read stream of consciousness with occasional lack of spaces and random case, but I'd really prefer to only read websites by people who give zero effs to presentation, and I had prior to this moment assumed everyone agreed, but that it was fun to do presentation, so people did. There are people who care about the presentation of what they are reading on even close to the same level of the content itself?!
Totally agree. For me, the original is far easier to read than the "better" or "best" versions.
Initiate rant mode:
- The gray on gray is like a joke, except it's not. I get the theory and alleged benefits. I get that some do prefer it, especially for IDEs. I get that some are happy to see (or at least apply) it all over the web. It just does not seem to apply here. Man alive. Literally making it harder to differentiate the text.
- I don't mind adjusting the browser width to get the lines exactly the right length for my screen and reading preference. Actually, I far prefer it over all the other options. This is like a tragedy-of-the-commons or lowest-common-denominator or dumbing-down-on-the-false-premise-of-being-smart issue. Instead of utilizing what we have, and encouraging people to learn and become capable with the simple and flexible tools, it's one size fits all (or, you pick the size you think I want). Only it's not.
LaTeX predates HTML by a decade and supports pictures, charts, quotes and far more, and doesn't force me as an author to make finicky decisions about presentation. I just write the content, and then set the document class to whatever the publisher wants.
It's also a great example of how even such a little can go wrong.
The CSS of the second website is wrong, as it uses 'color' without setting 'background-color'. Assuming anything about the default background color is not possible because it is user-configurable in most browsers.
At least http://motherfuckingwebsite.com remains readable when you change your color settings (the second one is completely unreadable on my browser).
<style type="text/css"> ? what are we dinosaurs? You might as well leave out the closing <p> tags if you are going to be like that.
If the whole point of your website is to brag about code to accomplish reasonable formatting.... can we at least have code formatting? I think I have enough bandwidth to afford some line breaks.
Clicking on the first website, I can't even view it because it's asking
for captcha.
So, to extend your comment: you do not need to worry about content if your
website isn't even reachable. A GET request should never result in the client
being bombarded with captchas. Unless you have a sure fire way to determine
if said client is a human or an evil AI taking over the world (nobody does),
just serve the damn page.
I’d never seen thebestmotherfucking.website! I appreciate the nuance it adds. I don’t have any nuance of my own to add right now but I do have to share my amusement at the empty list item under contributors. I figured there would be something in the source referencing someone (similar to how some folks on Twitter make special acknowledgments for people not on Twitter), but if this was that it’s a very Inside Baseball reference:
<li><a href=""></a>
</li>
Or it could be a joke about copypasta in hand-authored HTML. Or just actual copypasta. Who knows! But I enjoyed it.
prose.sh hits a sweet spot for me. Not just in the minimal-but-rich-enough presentation of blog posts[0], but also (off-topic for this thread I guess) the simple interface: just scp your markdown to prose.sh.
You make it sound like an unequivocal truth; it isn't really so. I launched my own hobby website/blog only after I designed my content presentation. It helped me understand what I was writing. Of course I had the underlying drive to write something already, and was not coding up some CSS without a vision.
Everybody finds their writing juices differently. Push where it means you'll write more.
Could you elaborate? The first one is uncomfortable to me if you have a large browser window, because the lines of text are so long and it’s hard to follow. The second one at least fixes that problem.
The default Emacs theme is not great, but the current best practice is to stop messing with themes and just use modus (vivendi or operandi depending on your light/dark preference), especially since they are now included as part of Emacs.
Yeah, I actually like the oldest of the three best. The one with 7 css declarations was annoying to me somehow and the third option was garbage. I miss websites that were about conveying information.
I've been arguing that HTML would've been a much better information-carrier if "basic browser styling" did this. I'm quite certain that a large part of the web would need no CSS or just a few lines of it, if the basic (browser applied styles) were good. As in: designed by (information) designers. They could even differ per browser, as long as all of them were good (or really good).
But alas, base styles are a mess (yet still there!). They do have some hierarchy but accessibility and readability are bad. That's aside from aesthetics: just stuff like alignment, spacing, fonts, flow: very poor.
I am aware that more base styles would make that cursed "reset.css" even larger, but I guess if a large part wouldn't even need that, it would be fine. It would be a situation where everyone can choose "good styles" or "spend lots of effort to get even better, custom, styling", rather than everyone "spend lots of effort to get an even decent styling".
Honestly - it'd be pretty nice to be able to opt-in/out of the default user agent styles applied by browsers. If we really want to preserve compatibility - opt-in to a version.
Keep it all the same as current if there's no tag on the page, but if you add something like <meta uastyles="1.0.0"> or something, apply an improved set of default styles.
Get rid of the need for resets with <meta uastyles="none">
Basically - I'd love a way to allow browser vendors to dramatically improve the defaults without breaking everything, and also giving frameworks an easy opt out.
I agree that defaults are not perfect, but I'd like to add that the initial idea was that they are, well, defaults, and you -- as a user -- are supposed to adjust them to what you prefer. In some dashboard usually called "preferences" or "settings". And fact is that you still can: you can tell your browser "for this script, for serif, use this font family, for sans use that one" etc etc. You can set you preferred text colours. You can even write your own style that will sit between user agent styles (those "ugly defaults") and author styles (those forcing weird stuff). Initial idea was that our browsers will be truly individual tools and one of their main task will be consolidating those preferences from various sources. That's the "cascade" in the CSS.
Yes, I know. Back in the fun days when a browser was supposed to be my "user" agent. Before they became the mini-os they are today.
There's nothing here that would stop you from still doing that.
But if we're talking about practicality... I think far more people would get a benefit from improved defaults (as long as they're not breaking existing sites).
While I've modified the user styles for my chrome profile as a part of being a web developer, I'm not aware of a single non-developer acquaintance who has (literally - none). Honestly, not even many of the devs I've worked with have done it.
It's just not all that relevant when the defaults are so bad that all the sites are overriding them anyways. Makes it very hard to apply a set of user styles that's sane, so no one does.
Make the defaults better, and maybe you can end up back there.
I want to hug this whole thread. Yes, 1. browsers should improve their defaults. 2. web sites should respect user preferences over their own style, if the preferences are set. 3. browsers should make user preferences more prominent and provide an easier way to override web sites that refuse to honor them.
My browsing experience should not be determined by an artist or product designer 1000 miles away from me in an office somewhere.
My language skills and time pressure fails me here, just wanted to express general "thanks folks" for your reactions as well. Seeing that someone shares similar point of view on this topic made me surprisingly very happy, so thank you again.
I think the main point is that, balance is also a very important design decision. A bit of CSS can go a long way; a lot of CSS can become a nuisance. There is definitely some 80/20 sweet spot where you get most of the design you need from a little CSS; finding that sweet spot is the challenge.
Javascript transitions/animations, on the other hand... yeah. I won't got there.
I agree, I get the idea that a blog doesn't have to be fancy, but a simple css theme with nice spacing and good font size goes a long way. The examples they show makes me click away instantly, because it is so damn hard to read.
Also possible the typeface is compatible with the readers and the content they regularly consume.
Hell, that typeface is something anyone is subjected too if you do anything long enough.
The experience of getting to imagine how much thought goes into laying out text on a typewriter is something I think should be for everyone to try at least a few times.
In my personal, obviously anecdotal, experience it's always the "technical" guys who think things like this. This is why we have UI/UX teams and we don't let programmers create visual interfaces.
If your idea of a good site is a 3MB monster full of useless whitespace, hero images, carousels, hamburger menus and other modern design trends, maybe that's a sign we shouldn't let designers create visual interfaces.
I really dodged a bullet there huh? Since that isn't my idea of a "good" site necessarily. But if your idea of a "good" site is all function and no form, then maybe stick to designing abstract interfaces and not things actual people have to see.
Why are you even browsing websites that have any design then? Why are you even browsing in anything other than lynx? Please spare me seeing that ideologically boring site again
Like I can barely imagine what your house might look like. Just like a purely functional weathered hovel with the absolutely barest essentials. A perfect prison cell
Because reading words requires substantial styling enhancements over what the browser is already capable of? Has anyone picked up a book lately?
You need a UI team to create a page of readable text? That sounds like an expensive waste.
But it sounds like those 'UI' people think they know better and don't need suggestions from programmers about reading words, even though its what they do all day.
It's very funny that you seem to think reading code and reading a website are the exact same type of activities, and the same type of reading. They are not.
And I don't know where you've been for the last 30 some years, but the web is not a text only format, and the reason HTML was invented was specifically to be able to create a designed space where text can actually make sense and is not a gigantic wall of impossibly small black on white text.
Sounds like you ought to be doing the Richard Stallman approach to reading webpages and not commenting on whether or not CSS and design is needed. Back to the terminal with ye
Sounds like you should do less stereotyping of roles. You’re assumption that programmers don’t understand UI and need to stay away is exactly what the blog refers to when talking about ego. You think programmers output all their work in a terminal?
I understand this and that's all well and good. Many (but not enough) offer "print" versions of pages, which could and should be translated to "text only" versions of pages. This isn't my issue. My issue is these <redacted> imagining that the web outright doesn't need design at all and that CSS is a terrible waste. And to me this is just about the most dull opinion on the subject that I can think of.
> My issue is these <redacted> imagining that the web outright doesn't need design at all and that CSS is a terrible waste.
While you do have some going to that extreme, I think it's mostly pushback against the insane amount of bloat and overbusy design out there. Some CSS can be useful, to improve readability and offer a little visual appeal. But I think maybe you missed my point.
Traditional books are typeset the way they are for a reason. No or minimal pictures. Block after block of text, broken up and spaced for readability, comprehensibility, and flow. Different types of books are laid out differently, but they mostly follow this theme. It's highly effective.
You kind of broadly have 3* categories of web pages on the web, as relates back to print:
* Book-types (mostly text in nature)
* Magazine-types (more about graphic design, with content mixed in)
* Advertisement flyer-types (sales pitches, mostly about design)
These are going to have different design requirements. There's plenty to write on the subject of design for these categories, but in the interest of getting to the point: there's an awful lot of the first category on the internet, and it really requires very little in the way of CSS. It certainly doesn't require hero images and 10MB of javascript. Blogs should read like newspaper articles, technical content should be typeset with similar minimalism to technical papers or books.
* There's a fourth category: webapps. My personal stance is that these don't belong on the web at all, but given that they're going to be, they obviously have far different design requirements, and are quite outside the scope of this discussion.
I like it because it means they will never be my competition for anything but incredibly niche/domain-specific boomer software people have no choice but to begrudgingly use.
> scroll the mousewheel: giant footer section slides up taking half the viewport
> move the mouse cursor up: giant ass header slide menu drops down covering half the viewport
should be absolutely no motion on a page unless i specifically click on something, like play button or slide out button. and that includes parallax bullshit.
prefers-reduced-motion should be the DEFAULT not an override. ffs haven't we learnt anything in the last 20 years of web dev - you cant rely on web monkeys to build things right (\s).
---
and f*k you to whoever thought having mouse hover popup autoplay boxes on youtube was a good idea.
A lot of these things were handled by one typeface on a typewriter so the premise isn't entirely unfounded.
Visual communication and design predates CSS. Information architecture, design, guiding the user through the message is definitely a skill.
CSS can do as much distraction as it can enhancement. It's one appeal of Tailwind, it's more than serviceable while learning about the design, hierarchy, and flow.
100%, and calling aesthetics an appeal to vanity and ego is a reductive take. I love that individual’s websites have different styles which reflect either them personally or their brand.
That can mean going all out in design, or having an HTML-only page like nothing. Both have value in their own way, and should reflect the creator to some extent.
But, you can get all of these things from HTML. Especially visual hierarchy and accessibility. The cornerstone of accessibility on the web is: does it display legibly and is it navigable without any CSS? CSS is eye candy. It's aesthetics. Those are not without value, but the value is not in the things you list.
Well, that was what HTML was on track to give us. But once JS and CSS were introduced, semantic HTML that was actually semantic stopped developing, under the assumption that if someone needed, for example, a tab area or slide show, they could develop those themselves with CSS/JS. What we've gotten instead is extremely vague elements like "section" that don't communicate what the elements are.
If HTML were truly semantic, browsers could implement accessibility features around it, but because they're so vague, there's no real way for browsers to do that, which offloads the responsibility onto web developers, who in most cases aren't granted budget to do it. There are a handful of features such as alt properties, but these are pretty limited.
So yeah, HTML should give us that, but that's part of what users gave up when we decided it was acceptable to allow random websites to run code on our machines and tell us how our content should be displayed.
There was never a golden era like you describe (it was a time of conflicting philosophies, people saying "eh, let's add this, that would be sweet", and browser vendors competing to add as much as possible to out "innovate" each other and the limited specs), semantic HTML helps in some cases but is never going to give you automatic accessibility, and a one size fits all browser style is still not going to give you what you need even as you add increasingly unsemantic tags to try to improve it (which is exactly what was happening pre-CSS).
> There was never a golden era like you describe (it was a time of conflicting philosophies, people saying "eh, let's add this, that would be sweet", and browser vendors competing to add as much as possible to out "innovate" each other and the limited specs)
I did not describe a golden era of HTML, because a golden era of HTML never happened. Instead, it was precluded by the introduction of JS/CSS. Had JS and CSS never been invented, we might have achieved a golden era of HTML, but we would have needed web standards to mature before that could happen. What happened was, web standards did mature, but they matured to serve websites rather than users. As a result, mature web standards center around JS and CSS, leaving HTML anemic and weak.
What we have now is a time of conflicting philosophies, with websites competing to add as much as possible to out "innovate" each other. Users still suffer the same inconsistent interfaces they did in 1997, it's just that instead of browsers being inconsistent, it's websites that are inconsistent.
Well, there was a previous garbage area, when HTML was, rather than being semantic, laid out using tables and \<color\> and \<font\>. I remember telling people to not do that, especially when the first version of CSS came out, and you could make websites look nice with semantic HTML that also worked in Lynx.
Table layouts are still superior to CSS in that they achieve the Holy Grail layout. As far as I'm aware, CSS still fails to achieve the Holy Grail within any reasonable realm of effort.
Hell, the entire reason the internet moved from Holy Grail layouts to singular sidebar and vertically integrated layouts was because CSS can't into Holy Grail.
With how wide most users' monitors are ever since 16:9 became commonplace, Holy Grail should be the ideal content presentation layout because it uses all that free space on the sides for non-content (eg: navigation) so precious vertical real estate can be dedicated to content.
This doesn't add up. CSS grid, flex box, etc all do the "holy grail" layout with a couple lines. The tables mess that was early www was and remains an absolute mess of markdown to maintain for layout. Semantics and accessibility are practically out the window with table.
HCI dictates how humans use interfaces and with that comes many defacto reasons why a plain text page does not solve the problems users want to solve. Do you not think websites test into the optimal performing layouts and content distribution? If it worked better, we'd all be using it (it doesn't).
I agree with you, but also I think the section tag is one of the biggest leaps forward we've had. Putting an id on a whole section instead of a name= crap for references, and actually using nesting for hierarchy.
All the HTML5 input types are also an example of semantics impriving. It could be way better, but it's not a total stalemate
> I agree with you, but also I think the section tag is one of the biggest leaps forward we've had. Putting an id on a whole section instead of a name= crap for references, and actually using nesting for hierarchy.
How does this differ from how <div> was being used before?
I've switched to using <section> simply because it's a better name, but I'm not sure it's made any meaningful difference in my code.
Another example of the pointlessness of this issue is <em> and <strong>. I've rarely seen code where these weren't used exactly the same as <i> and <b> were before. In rare cases, I've seen someone do something like make <em> a different color rather than italic, and that's almost always been a bad idea, because when HTML authors use <em> they almost always intend for it to be italic. In fact, I'd say we should just continue using <i> and <b> because those communicate intent better, but at this point I've worked in too many codebases that decided that <i> could be hacked to mean "icon" (i.e. using FontAwesome) which is a horrible, awful, no-good, bad, hack.
> All the HTML5 input types are also an example of semantics impriving. It could be way better, but it's not a total stalemate
That's true, but I think we'd be moving forward a lot more quickly if we weren't devoting most of standards development resources toward giving companies more fine-grained control of our browsers through CSS/JS.
My e-book reader shows <em> text with teal color and I like it, it's better visible than italic and the font remains upright and readable, I doubt it will be comfortable to read lots of text in italic. I didn't notice any discrepancy with <i>. But for some reason <strong> doesn't override <em> and they multiply, though I saw it used once when an exclamation was repeated several times with increasing emphasis for extra dramatism.
It would be so great if there were more built-in interactive elements like tabs, modals, and tooltips. How many times have these incredibly basic things been re-created?
Yeah, all this time browser vendors should have been taking a "pave the cowpaths" approach to natively implementing stuff that everyone ends up reimplementing in CSS and JS. And HTML5 did a little of this, with e.g. date and color input fields. But they could have gone farther.
To disagree with my own point a bit, it’s unfortunate that the controls HTML5 added look different in every browser, and can’t be styled with CSS at all.
I'd say HTML for itself just gives us a way to give meaning or imply how something should be styled "headline of first order". In the end it's a markup language, not some magic styling tool.
How it is actually styled (in absence of CSS) is in the hands of the default rendering of your browser. That might very well be a very bad rendering, due to lack of knowledge/time/engagement of the people building/maintaining that renderer.
Also those renderes might come from a time and system where technical limitations where different, markup was different, lots of things were very different.
So I don't think we should expect HTML alone to "look nice" or work well in regards of readability.
> I'm quite certain that a large part of the web would need no CSS or just a few lines of it, if the basic (browser applied styles) were good. As in: designed
I think we would win a lot if browsers default styles were beautiful (as in: really good, not merely fancy) designed. Many websites then would need just a few lines to set some colors, style that weird-custom thing they do or make it feel just a bit more personal.
I think the bigger thing would be to have more semantic HTML. <dropdown>, <tab-area><tab>Content</tab></tab-area>, <carousel><slide>Content</slide></carousel>, <rich-text-editor>, etc. Instead we've got a million immature implementations of these that are slower because they are written in JS instead of native code, slowly break over time as they aren't maintained, and typically have terrible accessibility.
Yes. HTML gives the structure and hierarchy (if done properly) which is also what then gives the accessibility. CSS can do lovely things that will help a blind user with a screenreader not one bit unless you're kludging in "hacks" to give them extra hints for specialized use.
As a good example, his site is very readable (because of the limited width of lines), and the sites he linked to that were largely unstyled were very useful, but not very readable. It would be worth it to me, as a user, to use a browser plugin to add a few lines of CSS to those sites before I dove in.
Even folks who say content needs to be figured out before presentation... it's not so cut and dry. Your medium shapes your message - they are not mutually exclusive and for the receiver of the message, the medium matters for their reception of the message.
I understand the sentiment that TONS of CSS is probably a bad use of time. But trying to demonize or otherwise attach aesthetics the label of "meaningless" is, in my opinion, just as much egocentric as they claim CSS to be.
It's also the case that the default stylesheets for the web are terrible, for historical reasons. If the default stylesheets were reasonable, then at least 80% of the time you could just use semantic HTML5 and be sure that your presentation was at least OK in terms of visual hierarchy, accessibility, etc. As things actually stand, you need at minimum "100 bytes of CSS to Look Great Everywhere", and if that doesn't meet your needs, a classless stylesheet.
Why dismiss aesthetics out of hand like this, equating it with vanity and ego? Aesthetics are very important to people, possibly even more so than the information on the page.
FWIW, I agree with you (and I don't see where I dismissed it), but the point is that even a certain type of utilitarian-inclined programmer is wrong on their own terms.
Obviously, that depends on the purpose of the page/site. If the page is a brochure or advertisement, content is almost irrelevant; you could link to it, for buyers that wanted content. Brochures and ads are about feelings, and aesthetics are about feelings.
That's not what I think the www is for, but not everyone agrees with me.
> But mostly css appeals to our vanity and ego.
Design isn't just about aesthetics. Good information design, clear visual hierarchy, accessibility, etc. all help with communication. The author's effective use of spacing, bold, and code tags show us that they know this intuitively, despite what they write.