My #newwwyear

Jen Simmons had a brilliant idea:

Every Xmas break, I plan to overhaul my personal website and start with New Year with something I can be proud of. I’d like to actually do it this year. Anyone else want to join in? Maybe we can start a group to cheer each other on. We have two-ish weeks. Personal websites FTW!

Shortly after that, there was a hashtag, #newwwyear, to help the conversation. Eric Meyer put an (amazingly built) Under Construction sign on meyerweb.com and started livestreaming his development sessions.

I'd had the same thought for too many years running. My personal site was approaching the end of its second decade looking much like it had when I first set it up. I had shifted from frames to a single page, and put a Planet installation in to update it with content from my many blogs. It looked horrible, but the updates and central home were nice, and I kept it as the home page on my browser as a reminder it was there. Of course, the updates broke in 2015, as did the engine driving most of my blogs, and it just sat... until I saw Jen's call to action.

I wasn't eager to build a whole new website infrastructure. While I didn't like the look of 1998, I did like the minimal HTML+CSS approach to building a lightweight personal directory. Static HTML and CSS files are as lightweight as it gets on the contemporary web, and left bandwidth for (small) images. I decided that this would be a JavaScript-free zone, since nothing the page does needs script. I have lots of other plans for JavaScript projects, just not here.

I jumped at the opportunity to return to the ancient liquid design approaches of early HTML, this time happily without the problem of excessively wide lines of text. I could focus on The Dao of Web Design. Responsive design and typography had already taught me a few things, and I knew it was time to add CSS Grid. (Conveniently, I'd watched Morten Rand-Hendriksen's Advanced Layout with CSS Grid course a couple of months ago.)

I still value the "chronological order, newest first" approach of blogs, and the original news that used to be most of the front page looked like that. The projects I take on are a weird mix of media and topics, and creating lists of books, blogs, and other stuff seemed boring. I set the foundations of the new page up with header, main, and footer elements, and dumped in lots of links from the old page, plus a few things I'd forgotten to include over the years.

I knew I'd seen examples of catalog-like approaches in talks by Rachel Andrew and Jen Simmons. I found a base in Jen's Layout Lab. Her layout J of the 12 Variations of Card Layouts gave me an easy place to start, though in the end I added one line to shift to the denser layout K. To make my catalog easier to build, I put all my links in article elements. (Update: I've switched to a nav element containing a list.) Instantly, I had a page that worked on my phone, in various browsers with different size windows. The only significant change I made was to move the logic for picking items that get larger boxes from the style sheet to the HTML markup, adding a "hero" class.

I already had a few other pieces I'd worked with earlier. For an online book in (slow) progress, I'd adapted Mike Riethmuller's Responsive And Fluid Typography With vh And vw Units. For a project on 17th- and 18th-century japanning (shellac) finishes, I'd been using the IM Fell typeface, which I was happy to find supported in Google Fonts. I stole the background and font styling from the japanning page, and used it on this.

Again, it just worked. I had wondered if the font-resizing and the grid would overwhelm browsers or create weird effects, but the calculations seem to work well together. One of the larger challenges of this project was keeping myself from wasting time doing the classic responsive changing the width of the browser - but it was fun, and every time I opened the site on a different device, window size, and browser it looked fine. Browsers that don't support grid will get a long line of images and links, and that's fine. I also tried it in the venerable Lynx browser to make sure the version of it showing alt text and no grid was navigable. It was.

I decided to abandon my usual text-heavy ways and stick to the picture plus headline approach of Jen's original example. I liked the look with more horizontal photos, so rather than just grabbing book cover images I took new photos on the floor of my office. (Two of them are missing - somehow I lost my original copies over time, and ordered new used ones.) I scrounged images from projects, and wrote a former employer to find out if they had better suggestions for how to link to them. Then, of course I tweaked text and styles, using a bit of CSS Flexbox for the header and centering for the footer.

I also added some metadata, thanks largely to an excellent What's in the head? article. Finally, Facebook, Twitter, and LinkedIn seem to have some idea of how to present links to my site. (I also got plenty of inspiration and details from the Mozilla Developer Network along the way. Adding "MDN" to my searches got me better information faster.)

Even including photography, scrounging, and testing on what browsers I could find around easily, this was a five-hour project. This article adds about another hour to that. Adding extra items takes about a minute, unless images are complicated.

I could have done much more. I could have added animations, but don't yet see a need here. I could have added HTTPS, to catch up on security and make Google like my site more. Someday, maybe. I could have built a Progressive Web Application, but there's really nothing here that benefits from local storage, and no significant audience that wants to install me as an app. Sometimes less really is more.

The new page is a huge change from what felt like a very forward-looking approach in 1998. The change in fonts - shifting from generic contemporary serif to 17th-century IM Fell - reflects a substantial change in my priorities. The grid layout, while feeling very Pinterest, also feels very modern. In some ways the tension between them emerged from the components I threw together in building the site - but it also means that my personal site displays the tensions that drive me.