I wrote fairly extensively regarding the 2019 AC.com redesign when it launched, and I knew then, as I took a loupe to my work, that the design had issues. Collating that assessment was constructive because it forced me to acknowledge shortcomings that I may otherwise have turned a blind eye. I kept ideas for improvements in the back of my mind, to work themselves out (stew, as I like to put it), while I submersed myself in other matters.
Yesterday ended up being a “I have nothing planned / oh god / I’m feeling existential uselessness slash woe” kind of day1, so in an attempt to make something of quiescence, I opened my laptop and forged ahead with an assortment of creative adjustments.
Tweaks
Goodbye, Home Header
I called this element “experimental” initially, and upon reevaluation, it was overly ambitious; it had too much going on. Presented was a fat stack of links, boxes, and doodads for the end-user to manage—too much for a single pair of eyes to concisely assess. Though it lacked focus, it did contain redeeming elements. I still think overflow: scroll will be relevant as long as viewports are limited. The property allows you to include more (whatever) in less space. That’s useful! I moved the posts lists (titled “Blog,” “Dingus,” and “Reading”) to widgets, located the right or end of posts (depending on your viewport)—and swapped the latter two posts lists for more blog posts, which is the trademark content on here I’d be wise to promote.
With those elements salvaged, I retired the home header. It created inconsistency between the home page and every other page on the site. That’s an indication of poor planning; I should want the elements—especially the header, which is perpetually visible—to be coherent throughout. Users shouldn’t have to rack their brains to figure out what the design is going for.
Byline, Revised
The words “published” and “updated” have been replaced with “↘︎” and “↗︎” (respectively) (see this code snippet for more), and the “read in” phrase has been eliminated entirely. These omissions improve the legibility of the date and read time (since there’s less redundancy in the way) and the arrows help draw the eye toward the start of each post, to begin reading.
The shortened byline also now fits flush—on a single line!—on my ant-sized iPhone SE screen, which is joy.
I’m tickled about this update. The diagonal arrows are intuitive, I think, yet I can’t recall encountering quite this same application of arrows in bylines before.2 (Maybe there’s a reason for that. Reversion incoming…) If I’m scrupulous, I’ll end up replacing the HTML arrows with SVG ones (possibly these) so that the symbols will be consistent across browsers and operating systems. (Right now, they’re not. Alas.)
Photos of Moi
In the sidebar, instead of Shrek! and wooden spatulas (among other various read items and dinguses), there are now random photos of me. Your boi. I mentioned that my face has to be seen, and though previously it was unavoidable on the home page, it was absent all elsewhere.
Well, I’m back. Pervading your space. Eyes on ya. HEY. (Granted, on mobile, my physiognomy still can’t be seen without scrolling a mile, so there’s still a puzzle unsolved.)
Related: I will plunge into this later, in another post, about what I was going for with the books and dinguses that resided in that sidebar spot previously, but, for now, a teaser: Affiliate programs are for the lazy and suckers.
Join My Newsletter…
I’ve placed newsletter signup forms at the bottom of every post. Oh, look, here’s one now:
If I want to accelerate whatever I’m doing with this blog (or my life…), I need to be able to apprise those who may be interested in what I’m doing that “hey, I am up to something!” I’m all-out on social media, which means that email is essentially my only way to shout from a digital mountain. (And this’s not to discredit email—I think email is far more stable and a safer investment of time/energy/money than social media, but most people are blasé about it; email’s old technology. We are in the midst of a revival in newsletters, but that interest will intensify and reverse course again soon, and the internet will again be sick of them; think of a ship undulating.)
BTW, web dev nitpickers: I am aware that the Buttondown iframe is an external resource and slow to load and I should be hosting my own form and probably a pop-up too. I’m not getting lost down that rabbit hole of optimization yet. The iframe functions well (I prefer how it handles the signup process to the vanilla HTML form provided by Buttondown) and, importantly, it’s enough. Visitors can join easily—if they want to—now.
Nav Nudges
The next–previous posts navigation, floated to the right of the byline, is newly pronounced. I added the word “skip” to the right arrow (“⇢”), and the separator is now an erect pipe (“|”) instead of a limp forward slash (“/”). I knew this element needed a lift after I hadn’t looked at the site in a while and, upon return, immediately thought it finicky, vague, and inchoate.
Tag Spacing
Post tags have been spaced out, so maybe you and I will actually notice and point a cursor at them. Not that I’ve done a superlative job at tagging content over the years, in a way that would foster meaningful connections between content, facilitate discovery, and warrant the tags’ perusal, but…(trails off)…(inarticulate)…(choking sounds)…click them anyway!
Wish List
There are two features I have in mind to improve functionality:
- Autoload more posts in widgets when the termini of the posts lists are reached (i.e., incorporate infinite scrolling)
- Enable keyboard navigation to move between posts (on single post pages and archives) (using left and right arrows, or J and K)
Both features will require custom JavaScript, which is my weakest language (of the ones I at least feign to understand). (HELP.) Call me sold on the overflow: scroll posts widgets (“Overflow, 2020.”), so I consider it worth the time to figure that out. Keyboard nav is something I’ve done on PkmnCards, so I don’t think it’ll be too difficult to swing, but I’m already envisioning issues that beget complicated solutions and JS still viscerally perplexes me.
1 Am I the only one who experiences this? It’s an anxious feeling of pending self-nihilism. If I’m not moving, or nothing around me is moving, I’m on edge.
2 Smashing Magazine uses a loopy arrow (“↬”) in their article summary sections, which is where I got the idea from. I want to differentiate when a post has been published versus updated though, so the distinct downward (to signify “published,” in the sense that the content has landed) and upward (to signify “updated;” self-explanatory) arrows make contextual sense.
