Wandering Autumn

Exploring change and the life that comes with it

Theming

September 7, 2015 

In the past, I never gave too much thought to what my personal blog looked like. Or, more precisely, even though I did think about it, I never put in very much work towards it. I generally just grabbed a theme someone else had done and stuck with that, even though it meant my blog ended up looking just like lots of other blogs out there. And on many platforms, it’s too much hassle to change the theme in any meaningful way.

I know a lot more about design, now. I won’t claim to be an expert, but I have a better eye for it than I did years ago. And while I haven’t kept up with the latest and greatest changes in HTML and CSS, I still know a thing or two, and can fake the rest. This time around, I decided to actually build the theme I wanted, not just what I could find in a gallery somewhere that only goes halfway to what I want.

Before actually building out the theme, though, I needed to decide what my guiding principles should be. What was I really going for? The answer is easy: I want something fairly minimal while still being stylish and unique that looks good in mobile browsers and on the desktop. I also want load times to be small, which means having as little javascript as possible along with few other asset files.

The first step was font selection. I’ve always been more particular about font choices than most people, and that has only been sharpened the past few years, though I’ve rarely spent much time finding anything custom. These days, finding good fonts is easy, as is actually using them on a website.1 And I’d rather that than try to find a decent system font that exists on all platforms.

Actually finding the fonts was the hard part. I knew I wanted my body text to be a serif font2 and that meant most of my headings should probably be a sans-serif font, which meant trying to find two that work well together. Oh, and I may or may not actually include code samples, which meant also finding a fixed-width font that works with them.

I know and like Adobe’s Source Pro series, which fits these criteria, but I already over-use those,3 and would like to find something new. After a great amount of consternation, I eventually settled on Vollkorn for the body text. It’s perhaps a little thicker than I would otherwise like, and doesn’t quite have the ligature support I prefer, but I’m also not willing to pay a lot of money for better fonts.4 Once I had a serif font, it just meant finding a sans-serif font that looked good with it; I eventually stumbled on Lato, and started using it for a while, but after really working with the colors, I decided to jettison it and stick with a serif font throughout. Finally, for a little bit of flourish, I also got LobsterTwo for the blog title and subtitle, though I may also change my mind on that.

The last trick was a monospaced font. In some ways, I find monospaced font choice to be more particular than any other style, especially because as a developer I spend a lot of time looking at one. There are also fewer choices out there, and not too many designed to “work” with other fonts. After a little bit of looking around, I thought about it, and realized that Menlo was the best choice. It’s the font I use in Xcode, TextMate, and Atom.5 And, since the majority of the code I post should be targeted for Apple developers, I anticipate that most people who care about those posts will similarly be used to Menlo.6

Once the fonts were chosen and uploaded, the next step was to construct the DOM and layouts. I gave some thought here over whether or not to have a sidebar, and ultimately decided that I think blogs without them look a lot cleaner. This ultimately made my job a lot easier: the default layouts I started with didn’t have a sidebar.

Constructing the layouts was a fair amount of work. Because I primarily anticipate posting links to things, I had to update the layouts to handle those situations. I also had some refactoring to do, in an attempt to unify how every page looks. Notably, for simplicity of style, I wanted everything to end up looking essentially the same, especially in the DOM.

Finally, the theming. That meant picking colors and making everything look a lot nicer in the CSS. I ended up using the W3Schools Color Picker and eventually settled on #CC5500 for my main accent color; the rest came out of the shades provided by the picker.7 It’s not quite the color I use on the base Remember Autumn webpage8, but I think the set of shades it provides looks rather nice.

In reality, the re-constructing layouts and theming ended up being done mostly in parallel. To a certain extent, deciding how I wanted to structure the document ended up depending on how I wanted to make the colors show up—and without colors there, it was hard to judge that for myself.

There were a few other miscellaneous things thrown into the mix as I went along. I included a few Javascript libraries: MathJax, because I might want to post equations at some point; and BigFoot, because I like footnotes.9 I had to learn SASS, and there are still some things in my SASS code that could be much better. I got code highlighting working. Things like that.

I still have a few more tweaks to do, especially around mobile support.10 Pagination and archives are hard to really do without a sufficient backlog to make them interesting. My RSS feed hopefully works. Overall, though, I’m pretty happy with it. It’s possible11 that a designer would disagree. But for now, it’s good enough.

  1. Despite the Flash of Invisible Text and variations thereupon. 

  2. Because I’m oldschool like that. 

  3. And Source Serif Pro currently doesn’t yet have an italic style at this time, which I find utterly absurd. 

  4. At least, not until I’m sure I have something good going. 

  5. I still use Monaco in Terminal. 

  6. And, most likely, be on either OS X or iOS, both of which have Menlo installed by default. 

  7. Except for the code background; that was playing with Paletton to get a blue, then going back to the W3C picker to get a light shade of it. 

  8. Which is currently #BB1200

  9. And, unfortunately, brought along JQuery. Sorry. 

  10. Which makes me remember one of the things I hate most about web development: multi-browser support. 

  11. Even likely. 

❦     ❦     ❦