My site is over 5 years old at this point, and in that time I have had several noteworthy site redesigns. In between those big remodels, I’ve also been near-constantly tweaking design elements, and tinkering with the CSS styling. Along the way, I’ve discovered certain site decor and design choices that I think are pleasing. Now I understand that beauty is in the eye of the beholder, which makes this quite subjective. I also am very aware that my site is probably riddled with CSS-related atrocities, accessibility faux pas, and other web design best-practice deviations. But, with all that said, here are some things I have done with my site up to this point that I think make it look and feel great. They are what make it enjoyable for me to just scroll around on and experience, even when I’m not looking for anything in particular. Sometimes I just browse and click about enjoying the UX I’ve put together.

I recommend other folks use these same techniques to make their site look better!

Pops of Color

Your site doesn’t need to look like all those “professional”, boring, sterile blogs out there. Add color - everywhere! Background colors, font colors, gradients, whatever. I mean you don’t want things to be garish, but you can color things up in a way that both looks great and isn’t over the top. Here’s some of my favorite examples of how I’ve injected color into elements across my site…

My home page. Notice the subtle color-mix() backgrounds for each content stream and the slightly more pronounced border line. Awesome.

Feed Streams on Home Page

The Activity feed. Remind you of any other awesome looking design?

Activity Page

The Notes feed. Dynamic background colors corresponding to different syndication sources. One of my favorite ideas I’ve had.

Notebook

The Infosec-Only content feed. Little color flourishes on the border-left lines corresponding to different content types.

Infosec Feed

Generous Margins

On a tablet or desktop browser? Check out the left and right margins! On larger (non mobile) displays, I've given page content ample margins 🤗.

For most of my pages and published content, I’ve allowed for generous margins by setting the content width to max-width: 800px. Not sure I can adequately describe why it makes my posts and content look better, but it just does. There are a few exceptions, notably my home page and the statboard which have nearly-full-width margins. For those pages, I am emphasizing information density so I need that extra horizontal space.

Custom ::Selection Highlighting

I hadn’t ever considered doing this and then I think I got the idea from Cory. Try highlighting some text on this page (this won’t work on mobile)… Kinda fun right? I don’t see a lot of sites implement this (maybe because of the accessibility pitfalls?) but I think it’s just a hella delightful touch. It’s giving very bespoke, artisinal experience. You can do something similar by setting the ::selection CSS pseudo-element.

Dark / Light Modes

Besides catering to the personal preferences of your readership (à la prefers-color-scheme), having different themes is just a fun way to experience your site in (literally) different lights from time to time. A change of scenery if you will.

Icons

Sprinkle your site with emojis and other icons. On this site, I use Phosphor. It breaks up the monotony of text, and it’s just fun.

Whimsical Touches

I’m real big on this one. The web should be fun. Life could use a bit more whimsy if you ask me. Put fun li’l easter eggs and other quirky things on your site. Surprise and delight your audience. You’re only limited here by your own creativity (and willingness to learn random HTML / JS / CSS stuff). Play with colors, hide li’l images in secret places, use animations (responsibly), do something different, be unique. My Shark Fin <hr> is one of my favorite whimsical flourishes I’ve come up with for this site thus far. There’s a lot of other things to discover here too! This very page is filled with custom whimsical touches, differentiating it from other posts on this site and beyond.

Simple, Consistent Header & Footer

This is definitely related to the next item, but I’ll speak to it individually. I’ve gone through a variety of different header and footer designs. I also see a lot of other sites headers and footers in my travels across the web. I’ve found my favorite to be those that just keep it simple, light-weight and consistent across pages of the site.

After the actual content of my posts, all I have is a <hr>, a quick post meta-data block, a link to the prev/next post(s) and my shark footer. Even with just those things I’ve considered maybe taking out the prev/next links to simplify it even further. More on keeping things simple…

KISS Your Content 😘

Keep It Simple Stupid (KISS). It applies in a lot of contexts, and definitely applies to web design - especially for “content” pages (i.e. actual blog posts). Maybe this is too-opinionated, but I really don’t like when I see a blog post, especially a short post, that is followed by a gigantic footer filled with blinky 88x31 buttons, pleas to subscribe, comments, links to other posts on the site, endless dynamically loading content, etc… There’s a place for that stuff - on their own distinct pages, or on the home page, or just some place else. I just don’t like seeing each and every page on a site filled with the same junky footer cruft. Show some love to your post’s actual content, give it a KISS! </rant>

Dates (e.g. Published: Mar 12, 2025)

For the love of god, put publish dates (and preferably also updated dates) on your posts. This isn’t really a design recommendation, but I think you could say it’s a good UX requirement. Why can so many sites not figure out how to do this?

Artwork

Make some art, put it on your site. You don’t need to go overboard, but there’s a lot of your individuality that you can express through custom artwork. It doesn’t necessarily have to be something you’ve made either, you could have it commissioned for example. I have examples of artwork made by me, friends, and by others I’ve found on the Internet. What you need to 100% avoid doing however, is using AI-generated slop art. It’s lazy, looks terrible and says something, not complimentary, about your site. A crudely drawn stick figure, or just nothing is better received than something AI generated.