It's a new year and so why not take the opportunity to revisit my site and make a few improvements? I've had a few people mention in the past that they've had some readability issues with some of the design choices (particularly on Linux). And as I've added more content I've found a few little layout quirks that I'm not 100% happy with. Let's dive right in.
The major design criteria are:
Partially inspired by Maciej Cegowski's The Website Obesity Crisis, I first decided to look into reducing page weight. Fortunately the original design was pretty good in this respect. The home page weighed in at 101KB, most of which were the Google web fonts. My Analytics on the Cheap was 184KB, most of the extra load coming from loading the Twitter div. An image-heavy post like Falling In and Out of Love With DynamoDB, Part II was still only 315KB. So there is some room for improvement here but not a lot.
I took a pass with Google developer tool's Audit feature and it noted that because I was on an HTTP/1.1 connection that I might want to combine the multiple CSS files. This is optimized for free on HTTP2, but because I'm hosting the blog on Github pages I don't have control over the server. I also noted that
pygments.css is being loaded even on pages where I'm never going to have code snippets. There are an awful lot of unused CSS rules on the page too, so we can trim some garbage there. The tool also mentioned that there are no far-future cache headers applied to the assets, but again that's going to be a function of hosting on Github pages (and/or their Fastly CDN configuration). Anything we can do here is going to be a micro-optimization, but what the hell let's do it anyways.
The font weights around the menu needed some work, as did the typography on the community page.
Although I'm a big fan of Skeleton it's way more than I actually need for this project. There are no forms, buttons, heroes, complex grids, etc. So instead I'm keeping the same basic CSS that I had but just tweaking it to remove cruft.
I've moved the
mobile.css into the
base.css and used a media query. I originally thought that
link media="only screen and (max-device-width: 480px)" prevented the element from loading, but that turns out not to be true for what should have been obvious reasons -- if we had a
max-width criteria it would force downloading new CSS if someone resized their browser! I checked the page on my older Android tablet and realized that I want to expand the media query to cover smaller tablets as well, so I've bumped that up to
I previously failed to notice that the CSS I stole from I-don't-remember-where caused the menu headers ("posts", "projects", "community", etc.) to be hidden on mobile, so that's a quick fix. I also noticed that it did that wretched thing where it intentionally broke zooming. Sorry, fixed now!
The biggest change stylistically was removing the Lato web font that I was loading from Google. Getting rid of that dropped most of the extraneous page weight. I'm not a professional designer and that's not the focus of the blog, so I don't really care that much about "pixel perfect" design. Rather the messing around trying to find the perfect font and doubling the size of the page, I'm just going to leave it up to the reader's machine and browser and use their system fonts. The results look good on the five different devices I was able to check. They're all a bit different of course, but better designers than me picked out those fonts on those platforms so let's trust them.
I'm pretty happy with the results of just a couple hours of work. There is only one third-party request left on the site (the Twitter bug), and the page is a quarter the size. More importantly, it's more legible on a wider range of devices.