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".
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.
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.
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.
But the key, underlying point to ALL this stuff is that you do NOT NEED TO WORRY ABOUT PRESENTATION until you have the CONTENT.
A huge temptation is to spend hours and hours tweaking the presentation as a way of avoiding actually creating the content; this is the real danger.
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.
It's definitely not, there is something else doing that to you. But it's not this website.
The balance between design & function can be at odds when the mission of the page is not clear.
For consumption, these are awesome, your brain almost relaxes as it's easier than the usual onslaught.
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).
The text was readable as designed on a white-background. CSS that considers accessibility or print friendly is always good to add.
Javascript test?
If it was a javascript that checked for the elements you want to ensure is there that would be neat too, I just wouldn't want it to be just me :)
I can't speak for other frameworks but tailwind only compiles the classes you actually use at build.
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.
Client side GA????
same went for emacs I stopped using themes
Mailing lists are still good for that I guess.
Bold statement. Those look mostly terrible to me.
Such drastic difference with basic adjustments, damn
I flipped over into reader mode and it's much improved, solely because of line length and dark mode.
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. Only it doesn't.
End of rant. Sheesh.
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.
Of all of them, I think the one you linked is probably the best. It is still interesting to watch the progression.
An UI made of disintegrated, inconsistent and half-assed tries at writing CSS/JS. Not a rare problem in my experience.
Also happens to me when trying to write a "tiny web app for fun" where the CONTENT is interactive and created by myself.
[0] example post from my blog https://mvexel.prose.sh/20230227-keeping-osm-database-uptoda...
<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.Everybody finds their writing juices differently. Push where it means you'll write more.
Javascript transitions/animations, on the other hand... yeah. I won't got there.
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.
And as mentioned, I achieve it myself with a style extension.
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.
Isn't that what HTML gives us?
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.
All the HTML5 input types are also an example of semantics impriving. It could be way better, but it's not a total stalemate
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.
> 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.
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).
I've been writing web code since 1995ish, so...
> 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 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.
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.
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).
No, I think most website devs left to their devices optimize for least effort to create and maintain.
...which is definitely not tables. Flexbox is much easier.
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 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.
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.
Message / medium have always mixed together.
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.
> scroll the mousewheel: giant footer section slides up taking half the viewport
> move the mouse cursor up: giant ass header slide out 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.
---
and f*k you to whoever thought having on hover popup autoplay boxes on youtube was a good idea.
I don’t personally feel nearly as strongly about the subject, but I wholeheartedly agree with this.
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.
Books are designed, too.
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.
Yet the market for text only novels is staggering.
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.
Feel free to find a site better than http://motherfuckingwebsite.com/
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
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.
That's not what I think the www is for, but not everyone agrees with me.
Then it shouldn't exist from the start.
> 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.