Welcome to this very basic example of a web page. It has exactly one goal: to make text-only HTML pages look good with the bare minimum of CSS.
I call it "half naked" because it strips almost everything away from the bare HTML skeleton (images, javascript, external stylesheets, fonts, etc.) but leaves just enough styling to make the page readable.
The reason to use only a dash of CSS is because it's a constraint that creates two wonderful by-products:
The beauty of text-only pages are that they load fast. And I mean fast. They're such absolute screamers that Pagespeed should put little flame icons around the 100 when you hit a perfect score in their performance section.
And if you do it to the extreme - minimize the levels and layers of complexity in the HTML, apply just a handful of inline CSS that avoid making an external request, etc, I mean really go down that rabbit hole - then now you've got a solid skeleton in place that can handle bringing back a sprinkling of images and embeds.
That's because with this approach, the snappy performance doesn't go away when you then introduce images or embeds, the text and design pop into place immediately while the heavier items take their own sweet time. You can read the surrounding writing and get the context.
The point is to make a page that's readable on any device, at any time of day. It's a way to strip away the distractions and focus on the content.
It's a way to make a page that's fast and lightweight, and easy to read.
I'm addicted to speed. Focusing on the simplicity of the underyling markup has a satisfying side effect of making the page download like a screamer. The faster the page loads, the more I want to read it. And this one gets a perfect 100 on all 4 Pagespeed scores, even on the free tier of hosting at Netlify.
Why not just use the HTML itself? Why use any styles at all?
Line length on desktop/laptops/tablets/anything other than phones. Light mode is a pain in the ass to read at night.
The good news is that you don't actually need a lot of CSS to fix this! With just a few lines, you can make an immense improvement in legibility and drag the page into the modern era. Minimal effort, maximum benefit.
Enough rambling. If just looking at this page hasn't convinced you yet, let's unpack the details of the formatting tweaks.
There's only so long a line of text can be before it becomes difficult to read. The ideal length is between 45 to 75 characters wide, with 66 the ideal. It's set to 55 here because that resulted in 66 characters wide with typical writing (i.e. not a repeating sequence of zeroes)
The best thing the iPhone ever did was to kill the trend of sidebars and annoying distractions that dominated the web in the early 2000s. Out went old timey newspaper-style layouts and in came a focused experience around a single column of text. Give your words room to breathe.
Font size, font family, and line height. The basic currency of not just readability but also the personality behind the words. I.e. design.
Why make your text look like it was pooped out by a machine? You're human, we're all different, pick what works for you.
Yes, contrast as in the difference between light and dark colors, and also contrast in a more subtle and writerly sense: breaking up a column of text with the occasional blockquote, image, or other visual element.
“It’s the contrast of light and dark that each give the other one meaning.”
— Bob Ross
Even on a page where the text is the main course, it's good to mix things up a bit and change the rhythm. Otherwise it just becomes a never-ending stream of text with no visual breaks.
I love dark mode. I love it the way Jerry Seineld loves cereal: I can enjoy it 24/7, no matter the social conventions.
You don't need to have complicated media queries or create a javascript toggle to make it work. For a simple enough page like this one, you can just set it to dark mode by default. Boom, done. No more unexpected flashlight in the face like you're being interrogated by cops.
And just to ram the point home: pure white designs look semi-broken from a first impression standpoint, like I said earlier, whereas dark colors fill up a space with a subtle sense of intentionality. White can look super clean and intentional if done well, but it raises the bar for good design because it's so empty-looking. I should unpack that in a blog post someday, or you can join me on one of the weekly Homebrew Club Zooms if you want more color commentary (accidental pun 🤦🏻)
This page exists as a small demonstration of why I've always hesitated to participate in CSS Naked Day, a fun annual event where people strip away the CSS from their websites for a day to celebrate the beauty of plain text and unstyled HTML.
It sounds great in theory and it's always interesting to see what familiar sites look like without their usual designs. Also it's super punk rock to strip things back down to the core.
However, as much as I appreciate the ideals behind going "naked" once a year, there's one big massive catch for me: plain text and unstyled HTML is almost unreadable on desktop, and ugly on any kind of device at night.
On a laptop or desktop computer, you'll find that font sizes, line lengths, and spacing all default to settings that haven't worked since the pre-tables era of the early web. it looks like an accidental kind of broken, rather than something that's clearly intentionally simple.
I get that so many of us are on phones these days and plain HTML actually looks pretty good on mobile during the day. But nighttime is a different story. I hate that feeling of accidentally starching my eyeballs from an unexpected blast of white light. It's so uncomfortable that I feel like I'm being interrogated by cops for a crime I didn't commit.
Also, just to go into snobby designer mode for a second: most white pages in general look undesigned and broken. Why strip away the style if that's the result?
I mean come on, demonize javascript all you want, and maybe even images too while you're at it. But CSS? Stylesheets are the shit. They load super fast compared to images and are super performant compared to javascript because CSS is hardware-accelerated. Seriously, CSS is awesome.
So, those were my main goals for this page: make it load fast without images or javascript, look good with a readable narrow column on desktop, and don't annoy people with white backgrounds at night.
I hope you feel the same about HTML and CSS as I do, little bits of everyday magic made possible by nothing more than plain text. This polemic was just as much for me as anyone else, a reminder to step back and appreciate the building blocks of the web that we sometimes take for granted.
And if you made it this far and actually read everything, then wow. You're exactly my kind of good egg and I hope you enjoyed this little thought experiment.
Thank you for reading,
Al Abut