Back in the old days of the web, before Geocities HTML kitsch, (how disgusting) there was the simple design of the academic web. The era where you defined a stylesheet in the browser (pre-CSS, so just simple stuff like colours and fonts) and all pages respected it. Content was semantic and well defined, for programs like screen readers or such to make navigation and metadata easy.
Maybe there can be a comeback of just the content and semantics, and let the user decide how it looks. (Reader mode in browsers is a form of this.)
Never. If I have a company and my website is the first thing people see, you’re telling me that I should have zero control over the aesthetics and leave it up to WebWizard284’s 1337 plugin style to do the job for me? Do you recommend we go back to radio dramas, too?
It’s basically the opposing ideologies of the web as a rich document platform (it used to be) over the web as an application platform (it is now) - the application platform extending to not just web apps but your company’s promotional site, more than a document, but a thing with its own design.
A weird bit is that a huge portion of tech websites that pull in a lot of JS/CSS actually do have more of a rich-document model. They aren’t doing anything fancy or dynamic, just writing basic HTML and letting someone else handle the style/layout. The problem is that they don’t like the specific default styles that browsers currently ship. So instead, someone built a new set of default styling/layout primitives, called Bootstrap, and websites just use that. The average website’s use of Bootstrap is not doing anything beyond basic document markup that offloads the presentation to the defaults, which is why they all look and feel the same, from ibm.com to digitalocean.com.
The main weirdness here is that the style/layout engine is implemented inside the other layout engine using JS/CSS, instead of by the outermost layout engine, the browser.
I actually prefer radio dramas to a lot of television, so yes!
My web browser does not owe you a living. I use the web to share information and to get information from other people who are sharing it. You want to make a piece of art and share it on the web, that’s fine. Even if it’s shitty soulless commercial art that’s just trying to talk people into spending money they don’t have on shit they don’t need. But you have zero grounds to complain if I decide to configure my browser to filter out your worthless glitz.
Nice project! Already looks much better than the defaults. :-D
I do think the typographic scale could be improved a bit, though. The difference between body text, h5, and h6 is hard to distinguish. Perhaps a minor third scale?
Thanks for the tip! I honestly didn’t put enough thought into the heading sizes, just made them get bigger.
Nice! I liked it so much I updated my blog to use it, with some slight modifications and additions.
I also was astonished to learn that you don’t need to put your content in html & body tags to validate HTML. Was it always thus? Or is this new in HTML5?
The only required element in HTML 5 is a <title>.
That is positively horrific.
And the !doctype declaration ;) (in some quite particular cases, even title could be omitted)
That’s really nice! It loads pretty much instantaneously, too.
Thanks! I removed normalize.css, skeleton.css and it seemed to speed up loading by a fair bit. Perhaps because they were served from the same host and I was nailed by the paralell request limit? (I have no idea what this is for modern browsers.)
Was there a point to the Markdown callout here? I don’t really see any connection.
It was simply part of my motivation in creating the stylesheet, since generating bare HTML from a Markdown file tends to look terrible.
Hi, could you add more fall-back fonts before Courier New, Courier, monospace;? This might sound silly, but courier is absolute crap to read imho.
Courier New, Courier, monospace;
I completely agree, but I was trying to find fonts that were widely installed, and from what I saw, Courier New is basically the only ubiquitous monospace font. If you have suggestions for other common monospace fonts across platforms that would be great.
Edit: perhaps it would just be better to only use monospace to always get the system monospace font.
Consolas is generally available on Windows and looks quite nice on that OS. GitHub apparently uses this font stack: Consolas, "Liberation Mono", Menlo, Courier, monospace, which I find pretty readable across OSes.
Consolas, "Liberation Mono", Menlo, Courier, monospace
That’s a good font stack, but I usually put “Ubuntu Mono” before “Liberation Mono” because I find I like it better. Personal preference.
Going to fix the font stack for my site because of this thread, thanks everyone :)
Looks like a good stack, thanks! (Why didn’t I think of that)
Why not just use monospace? That way if the user cares, they can set it to what they want, and if they don’t, they’ll get a reasonable default.
I’m not sure you can, in Safari. Here’s its Advanced preferences tab.
I think it looks terribly ugly, such as those big list elements.
Now, superloopy’s site doesn’t look as bad.
Are you attempting to make a common style for certain kind of pages?
such as those big list elements
I took the liberty of making a screenshot.
It is under goals (twice?) that I observe big list elements.
The second is a screenshot of the first, taken on a Retina display…
It appears I was expecting this to be a representation of how it would actually look rather than such magnified screenshots. Is there a page that shows how this is meant to look in a real use?
The page itself is styled with Writ, naturally, along with the “Reference Page” in the nav.
It might be worth specifying the width and height of the images as 50% of the actual pixel height and width so that it appears reasonable on non-retina displays.