If, after a week, I’m already over my latest AdamCap.com redesign, does that count as progress? (Too soon? Not soon enough?)
I’ve launched redesigns in the past (to be enumerated below), and for each I’ve been privately optimistic that the “new wheels” would spurn creativity and drive and that I’d finally start consistently blogging for once, which I never have in the past, starting then, there, on launch. …Now. Any time. Soon. —I always feel the same deep-down-I-know-it-is-hollow optimism—the progression which follows is similar to that which ensues when you splurge on a product or service, thinking it will help engrain some positive habit or end, because with X in hand or at your disposal, “What you want will be so much easier to attain,” and for exactly one week or month, you are motivated, and it is easier to get yourself doing it, whatever it is—reading, losing weight, drinking water, writing—then the shiny new toy loses novelty, you forget about it, or get busy, and all that momentum abruptly decrescendos into a junk drawer and is eventually regifted to your indifferent (but courteous) “Yeah-OK-I’ll-Take-It” sibling or mom or the trash can.
In the case of my web redesigns, what I splurge is time. I put over a month of full-time work into this recent redesign. That is about how long it takes to make a good website. I did not make money during this time (working rate: $0/hour for approx. 197.5 hours from Dec–Jan), and not making money for that long may as well count as splurging money. I justify this cost because I figure during the process I will improve at web development, kick-start a business (or some kind of financial opportunity for myself), and make the money back later. But that is no shot fish in a barrel. And the real reason I ever redesign my blog is because I think if I have it configured “right,” that I’ll start writing more.
I’ve yet to reach “right.” It doesn’t exist. Writing is the hard part of this endeavor for me. I can code and manage a web property with some celerity. But producing content has always been slow, and tweaking stylesheets doesn’t make words flow any faster or more consistently. I’ve needed to write first, design later. The logical progression would be to make do until the habit is firmly established, then clear hindrances by obtaining resources. I’m acting backwards, again, because I am stubborn, but I did plan this redesign more thoughtfully than past ones (truly! [I swear! (really!)] ) which were inspired with mostly aesthetic (and not so many practical) ends in mind.
I’m going to describe a few of the atypical design elements in play for AC2019. (Which, really, I should not need to do, if the design is actually intuitive and good, but this process will (1) help me, at least, better understand what I was going for and (2) make blatant issues blatant, allowing me to address them.)
Design Elements
Three-Column Home Header
This is a convoluted, experimental, I-won’t-blame-you-if-you-call-it-dubious approach to a header that’s turned out to be…okay? (What?) To elucidate, column by column:
- Column 1: Navigation makes residence in C1, which, really, is an impractical position for navigation, because this situates it on the left side of the viewport, which may as well be mile away from the habitual cursor turf of a right-handed user. (Meaning: It’s a hassle to drag your mouse over there and give the menu use.) But I wanted to employ the underlined ADAM CAP “logo” (I use this term loosely) in the same position throughout the redesign (this is just the home header, remember; all other pages look different), and vertical nav makes efficient use the horizontal space afforded here. I get to include my beloved pixelated A icon in C1, too.
- Column 2: I desperately want to apprise users of new content, without making them scroll far (or at all), while providing them the ability to reference past content almost as effortlessly, and this is my solution. These three widgets show at-a-glance what’s new and allow old stuff to be seen/accessed by scrolling—no clicks necessary to become informed. This is one of the less intuitive aspects of the design. It’s rare to see
overflow-y: scroll;elements (thoughoverflow-x: scroll;is becoming commonplace with mobile devices having narrow screens). Even if the average user never discovers the scrollbars, the elements still serve their most crucial purpose (“Here lies activity!”). - Column 3: I am not at the point yet where I have steady traffic, so it seems critical inform my few passersby whose lawn they’ve tromped on. My face has to be seen (blogs without a face are instantly forgettable [no sideways stares either; “Eye contact!”]) and I feel it’s wise to further cement myself with a goofy, succinct tagline. I’d prefer to include my newsletter signup than the current flat, insipid “hire me” pitch here (but I don’t have the newsletter’s raison d’être even remotely defined yet, and I do need $). This is the designated “call to action” spot, essentially. I’ll figure it out eventually.
This header functions better than anticipated, though it lacks focus. I was worried, in particular, that the C2 overflow-y elements be unusable on mobile, but they’re okay. (If something doesn’t work on mobile, then it doesn’t work at all; mobile users comprise an increasing percentage of the internet’s horde each month, and it’s imprudent not to tailor the web surfing experience to them.) Parts of the home header will inevitably be tweaked, but I’m at least not neurotically stressing out about needing to do so yet. (grits his fucking teeth)
Slanted, Canted, Offset, and Askew
This was a theme I incorporated sparingly (once) but prominently (in the header) in my last iteration of AdamCap.com. I brought transform: rotate(); over to SixPrizes for its 2017 redesign, and rotation pervades even more now. I considered myself brilliant and archetypal for incorporating canted elements then, but this appears to be a common design trend in 2019. I keep seeing it everywhere. Maybe it’s always been a trend and I’m just now realizing it. Regardless: Everyone else who’s canting their divs: Please stop. Give me this one opportunity to stick out and appear different and innovative for once. I mean it. (Thanks!)
I’ve not offset the positions of elements much in the past, but I made a deliberate effort to do so this time around. This technique helps add contrast, which makes individual elements more distinguishable and thus the site more navigable.
Anchors, Matey
I struggle with the decision to show (A) excerpts or (B) full content on archive pages. I prefer—usually—to see a full post if I hit the home page of a blog so that I don’t have to click (and then wait, again, for a page to load) to continue reading. Clicking is a decision, and work, and I don’t want to make decisions or do work. Please, take the wheel. Write well, and draw me in. Decide my fate for me. The less it takes to immerse a reader, the better.
However, when dealing with long-form content, which is what I tend to write, it’s a problem if the user encounters a topic they have zero interest in, and the entry is longer than a single viewport height. Scrolling past can feel like being stuck on a cyber treadmill, and the user will jump ship (leave my site) if they become overly disoriented or entangled. (Mayday! Mayday! Man overboard!) I lose my compass scrolling through the new AdamCap.com home page at times, and I am the sole author here. If anyone should be able to keep their bearings, it’s me. (An inauspicious sign this is, surely.)
My solution to this predicament was to add anchor links (these: ⇠ / ⇢) below post titles so that it’s possible to skip around, post by post, with infinitely higher velocity and precision. This is another unintuitive feature (even more so than the occult overflow-y above; I don’t know how anyone’s going to discover it), but the concept intrigues me and perhaps I’ll come up with a more effective implementation of it later.
Anchor links mesh cooly with my new M.O. because they (anchor links) provide instantaneous feedback. They’re fast. I really like the idea of loading a bunch of content (with a single page load) and letting a user zip through it all, in a deliberate way, and anchor links make that kind of interaction possible.
Sidebar Favs
What I am going for in the sidebar (to the right of posts) is to randomly display items from a curated list of my favorite things (you can buy on Amazon [to support me with scant affiliate commissions…]). What I’ve realized while typing this is that this idea (“favs!”) is boneheaded and unquestionably dubious because, even if I do see success with Amazon’s affiliate program, it places me at the mercy of Amazon. The big AZ. And that relationship has gone sour before. Amazon lowered their payout rates two years ago (in Mar 2017; my earnings dropped by over half the following month), and my Associates account was almost auto-terminated from the program the following year, out of the blue, erroneously. (Customer service resolved the glitch, but the incident certainly perturbed me.) It’s delusional to think I could come anywhere close to earning a stable, living income this way, and that has been my pie-in-the-sky hope here.
Instead, I should be promoting myself. I’m the commodity. And, from looking through past iterations of this website, it seems I’ve gotten away from doing that.
Past Designs
Nov ’09–Jan ’11
AdamCapriola.com (source)
This is the earliest capture of any of my web entities from the Wayback Machine. AdamCapriola.com served to share me (my personality and personal interests), essentially. I had started SixPrizes.com a few months earlier and thought it was important to have an outlet (to come across as a relatable, real person) if I was to make it online. The images are broken, but I was evidently into relaying what I was wearing each day. I evidently had a “Fan Page” as well. Who knew.
There’s not much to say about the design. I used a theme called Atahualpa because it was easy to customize, and I read somewhere that red is attention grabbing, so I made the titles red.
AdamCap.com (source)
AdamCap.com existed alongside AdamCapriola.com and contained content more rhetorical in nature. I think. (I am writing this ten years removed from the endeavor, and almost the entirety of it evades my memory.) The tagline reads “Thoughts on life, success, and human nature.” (Turns pale. [Dies.]) (Please ask Siri to dial 911 or shout for help if your eyes also roll clear into the back of your head and remain lodged there for 10+ seconds.)
Notably, I had a newsletter (no recall of what I spouted about—those archives were lost, tragically) and active comments sections, so I did some things right. But I should emphasize: the internet was different back then; this was a time of possibility for the little guy. The web had not become so big and centralized (and wearied and jaded) yet, and a small website like mine, with almost no substance but gumption, could attract a responsive audience.
Re: the design: The capture’s stylesheet is broken, but AdamCap.com was likely identical to AdamCapriola.com.
Jan ’11–Aug ’11
AdamCapriola.com (source)
I added a third column and switched to excerpts. This looks okay to me; the design is clean, if nothing else. Logo font: Helsinki.
Aug ’11–May ’13
AdamCap.com (AdamCapriola.com Absorbed) (source)
Above is what I have screen-captured in My Documents. Which looks great! It’s distinctive, at least, and exudes character. Opaque box-shadows still see use every now and then, most typically in retro-style designs. The red-bordered post titles are emphatic and I think serve well to draw the eye where it should be.
However, seen here is only a partial header. With the complete header, this design doesn’t look so hot:
The red–white–teal color scheme is a shade away from matching Aquafresh. That’s all I can think of when I look at this. ProTip: Toothpaste should not be evoked through web design. I was going for color contrast, but just no.
I could have done without the first row of the header; my name (Adam Capriola) was already above the fold (in the sidebar), and the recent tweet display (“GETTING GNAR OFF OVERLY-RIPE BANANAS #WASTEDDDDDDDDDDD – 3 DAYS AGO”), which feigned liveliness, was a cop-out for going long stretches without posting new content. (I should have been writing stuff for the blog instead of wasting breath [and brain cells] on social media.)
May ’13–Dec ’13
AdamCap.com (source)
This was a short-lived design that I never completed for unremembered reasons. I launched it half-finished and it stayed that way. (Meow.)
Dec ’13–Feb ’16
AdamCap.com (source)
I’m aghast that I let this design persist so long. It’s minimal to fault. It evinces none of my personality and is completely forgettable. Perhaps it speaks of my mental state through these years. The big feature here was the ability to sort by popular posts, which I doubt anyone did, except for me now and then to tug my own willy about how many views those popular posts had. Moving on…
Feb ’16–Jan ’19
AdamCap.com (source)
AC2016 was designed for 1024px-wide viewports and none others. This screenshots shows the design at native size. With a viewport any wider or narrower, you’d have to zoom to read properly, so most initial impressions of my site were probably poor. It was a total mistake to not address this. (By 2016, even I, the wannabe Luddite who held onto his flip phone forever, owned a mobile device and could appreciate mobile-friendly design.) What happened is that I put 100% of my focus into the desktop design and I was too drained by the end of this process to even take a crack at mobile, so I put it off. And I never got to it. (Truth be told, I was lazy and addicted to video games at the time. Call me feeble.)
However, the combination of Abril Display (for H1), Freight Sans Pro (for H2–H6), and Freight Text Pro (for body) does look sharp. My face and name are unavoidable. And a handful of visitors were so captivated to email me. So there were elements that fell into place effectively.
2019–?
AdamCap.com
I’ve delved into the unique aspects of this design already, but one more thought: Perhaps the biggest fault with the current design is the lack of “me” above the fold on mobile and outside the home page—my physiognomy should pervade. (Remember me!) I’ve tried to remedy this by inserting my headshot into the header, but including it anywhere up there throws balance off. (I’m fixed on maintaining the conspicuity of the ADAM CAP logo / post title area which leads downward into the content.) So I’m leaving my mug out until better inspiration strikes. Otherwise, the 2019 design is responsive and generally more engaging than previous iterations.
Takeaways / Future Plans
Publishing (for me) and reading (for you) have to be easy. That’s the overarching impetus behind AC2019. I’m attempting to construct a platform that tips me over and has me spilling my brains out into shark-infested waters.
However, I am a slow writer. It feels like I’m rollerblading up a steep hill naked every time I try to share anything on here. The sun is in my eyes, and people are watching. It is difficult for me to spill. Which means: The platform I step onto doesn’t matter at this point. Any of the above designs would suffice now. I need to write—wherever, however, to whomever, in whatever. It’s consistency that needs to be built up. I’m hoping that with repetition the writing process will become easier.
I’d envisioned having delineated sections within this redesign for specific content types, some of whose content I’d enter database-style, with optional commentary (i.e., writing), so that it would be simple for me to keep the site active. Fill in a few fields, and bango: new post! Ta-da! Read all about it! In practice, it’s too much, in the obverse sense of my publishing woes. I’ve coded cruft. I generate noise. The result is mechanical and flat. “Cut the chaff,” as my grandmother Myrtle used to say while indexing a Newport. All anyone is trying to do is communicate, and this is a conversation.
