My Web Design Philosophy

Why does my site look like this?

Content first

This blog is primarily a platform for me to voice my opinions in a durable, shareable way. It is not intended to show off my design skills. I could make it fancy, with scroll effects and hover animations and hero images. I could make it a Single Page App, with dynamic content and spinners and gadgets. But the medium is the message, and I want my messages to be plain and clear.

Performance

This website probably loaded for you in less than a second. There was no initial blank body, no pre-load skeletons, no pop-ins or banners. That's how I want it to stay.

Pedagogy

There was a time when you could learn how to build a website by viewing the source of any page. Try viewing the source of a popular website today, and you'll be lost in the div soup. It doesn't have to be this way! An aspiring or newbie software developer should be able to look at my code, and learn how to make their own version of it. That's important to me for this site's code, and for all code I write. Maybe no one ever will, but the artifacts of my work should welcome them if they ever do.

Details

If you were just here for the "why", that's all I can give you. If you are an aspiring or newbie software developer, welcome! Let me walk you through some of the choices I made in my stylesheet. Open it up and follow along!

• The root element (html) has a font-family, listing a bunch of serif fonts. These are fonts that are likely to be present on a user's machine, so that text on this website can look at nice as possible without requiring the user to download anything. The fonts are listed in priority order: if the first isn't available, the second is used instead. I chose serif fonts because I find them easier to read than sans-serif, especially on text-heavy websites like this one. I also specify a monospaced font-family for preformatted blocks and code samples.
• The body is styled with max-width: 40em. That means it will refuse to grow any larger than forty times the length of an em dash, even if your screen is much bigger. That works out to about 15 words per line, which I think is about ideal for readability. However, since this is only the max width, the text can wrap as much as necessary to fit on a smaller screen. I chose em as my unit of measurement instead of pixels, because screen resolutions vary so widely these days that the word "pixel" has lost almost all its meaning.
• The other body styles are margin: auto, which centers the content horizontally; padding: 0.5em, which keeps the text from butting up against the edge of smaller screens; and tab-size: 4, which keeps indentation inside of code blocks reasonable (the default is eight!)
• Paragraphs, unordered lists, preformatted blocks, and ordered lists are all styled with margin-left: 2em. This sets them a bit left from the edge of the body, so that it's much easier to scroll or scan between headers. That's pretty easy anyway since headers are so big and bold, so this is purely a matter of taste.
• Those same elements (except pre) also have line-height: 1.5. This gives them a little more room to breathe vertically.
• Preformatted blocks have a little extra formatting. I use them to hold code snippets, which this blog has a lot of, so I want them to stand out a bit. I gave them a thin border with rounded corners, a bit of horizontal padding to ensure the code doesn't butt right up against the edge of the box, and a special width to ensure long lines of code don't run off the right edge of the box.
• Some of my code snippets have specific lines I want to call attention to. If I think the code is bad or should be removed, it gets a pink background. If I think it is good or important, it gets a light grey background. Either way, it gets bolded.
• Some of my pages (for example: my take on DTOs) have expandible / collapsible sections with two-part headers: a title and a rating. It took a little massaging to make those look the way I wanted. The rating is inside the header, but floats to the right. It can't float too far, so those headers have a tighter min width. They also have a bit of padding/margin/border tweaking, so that the hover effect looks right.
• The hover effect is twofold. If the header is wired up to control the expanding / collapsing of a section (and it might not be! If JS is disabled or fails to run, then I can't support that behavior), then mousing over the header causes a gray background to appear, and causes the mouse to turn into a pointing finger. Essentially, I'm trying to tell the user, "Hey! You can click this!"
• Any <strong> text is also underlined. This also applies to any text I'm specifically calling out as my <span class="opinion">opinion</span>.
• The last block of CSS in this file is targeted with a @media query. These styles only apply if the user has enabled Dark Mode on their device. If so, this block applies a bunch of alternative colors that will hopefully be easier on the eyes at night. I didn't pull these colors out of my head; I'm using the open-source Dracula theme.