A Waste of Space
It’s been popular for a while to restrict a website’s width to a fraction of the available display width on desktops, especially as displays with wide aspect ratios have become ubiquitous. Back in the day, people would fit their websites within a width of 960px. I think the current trend is for even narrower widths. For example, better motherfucking website has a max width of 450px. best motherfucking website dispenses with pixel widths and has a max width of 40em. What do you get with these max widths and automatic horizontal margins?
I think you get a lot of wasted space: a narrow column of text surrounded by vast expanses of whitespace to the left and right. I think that’s a waste of screen space. I think it limits what you can do with your website. I want to take better advantage of desktop displays while still being readable on smartphones and tablets. It can’t be that hard, can it?
I had already tried emulating the original motherfucking website and dispensed with maximum widths, though I still used margins to add a little negative space. I wasn’t satisfied with this, however, because I still had one narrow column of text. That meant that if I wanted a menu on every page, it would have to be horizontal and stretch between the page’s header and its contents. If I wanted to include site info or author info, I had to put it between the page’s contents and the footer. I was basically giving desktop users the same experience they’d get on a smartphone.
A Last Crusade, A Final Outrage
Back in the day, a three column layout with narrow sidebars flanking the main part of the website between a full-width header and footer was the “holy grail” of web design. It allowed you to provide navigation on the left, beneath the header, and additional information on the right. Or, you could fill both sidebars with ads. Many sites did. It seems almost quaint compared with how obnoxious site monetization efforts have become nowadays.
However, there was a reason this layout was called the “holy grail”. It used to be painful to implement. You could do it with HTML tables, but you weren’t supposed to use table markup for layout. Expecially if you’re also using tables to display data. Not unless you wanted your future self to wonder what you had been smoking.
The proper way to do it was with CSS, but until Flexbox became part of the standard and widely implemented in all major browsers, implementing this layout with CSS was a horror show, especially if you had to support multiple browsers. This was the dark time when most people used Internet Explorer 6, which ran roughshod over standards. In fairness, Netscape played fast and loose with standards, too, and often in ways that were incompatible with IE6. The rise of Firefox, Chrome, and Safari ended that first dark age, however. For the most part, if you stick to commonly implemented standards and check Can I Use to see if a particular feature is widely supported, it’s much easier to write good CSS.
Apparently CSS Grid is even better for layout than Flexbox, but in this implementation of the Holy Grail layout I’m sticking with Flexbox — mainly because I saw it implemented on Solved By Flexbox. Implementing it took about ten hours of work; I did it over a weekend in fits and starts. However, I might try Matthew James Taylor’s CSS grid implementation later on.
Sidebars Galore
One thing about this layout is that it now reminds me of a lot of old WordPress themes that also offered sidebars to put various boxes, like an “about” blurb, menus, RSS feed links, etc.
I’ve replicated that to some extent.
The left-hand bar contains a lot of navigation links: site navigation, breadcrumbs, and page navigation if the page has at least one <h2> element in its main text.
The right-hand bar contains a blurb about this site with a quick disclaimer, contact info, and subscription/sharing links.
This will come in handy for serializing fiction as well; I can create a template for a particular project that contains a sidebar listing installments for that particular story. It might come in handy if I do a series of blog posts on a particular subject and remember to tie them together.
Throwing IndieWeb a Bone
You’ve seen this in the sidebar on other parts of my website. It’s a substitute for a social media profile, and need not be this detailed.
IndieWeb h-card
As you might have guessed, this is an implementation of an IndieWeb h-card.
While I don’t have a lot of interest in implementing everything that’s come out of IndieWeb because most of it seems to require building my own CMS or using one that provides plugins for IndieWeb functionality, h-card is strictly HTML, though its properties can be styled with CSS.
This means that implementing h-card isn’t particularly onerous.
I don’t know if providing this information will do me much good, but more on that in a bit.
This Might Just Work Out
I’ve been testing this locally since I started working on it, and I think it’s pretty solid. While I’m still thinking of having another go at this layout using CSS grid instead of flexbox, I don’t think it’s a high priority. Flexbox seems to be good enough for now. This is my idea of progressive enhancement. If you’re on a desktop or laptop using a browser that supports Flexbox (and most seem to nowadays) you’ll get a layout that takes full advantage of your widescreen display. You just might have to zoom in or adjust your font scaling if you’ve got a 2560p, 4K, or — lucky you! — an 8K display. If you’re on a smartphone or tablet, everything still goes in one column. In either case, your browser’s reader mode should still work, too. But if you do run into a problem, by all means please let me know.
Update for 2024-06-14: Guestbooks
Oh, I forgot to mention it earlier, but starbreaker.org has a guestbook now.
It’s kind of silly, and mainly for nostalgia’s sake, but if you aren’t comfortable reaching out to me by email you can use this instead.