Hermit Spirit blog conversion: interim report

Things are going well with the website conversion, all things considered, with about five weeks of spare time now into it. I really enjoy the process of envisioning a new direction for any endeavor, whether something ongoing or a fresh start, especially the brainstorming side of things.

It’s a fragile endeavor, though, the ideas coming and going swiftly: for visuals, headlines, layouts. One must be on continual standby to note things down immediately, lest they disappear as evanescently as they flicker before the mind’s eye, trying to catch the proverbial lightning in a bottle. With pen and paper or a computing device at the ready, for a time prisoner of the muse or mistress. Pledged to do her bidding so as not to be cast out before you have obtained both satisfaction and release from your desire.

For me this stage tends to go by relatively quickly. Ideas typically come in a multitude of rapid staccato bursts — an experience of one “high” after another. While there can also be some cognitive dissonance as sometimes-contradictory ideas spew out like fireworks, it’s all part of the process.

As someone who enjoys learning new things and having my head turned upside down occasionally while simmering and percolating through to a new view, cognitive dissonance is to be welcomed because it means things are in flux. And flux, a boiling over of ideas, often chaotic, is a key aspect of the creative process. Eventually, as things evolve, the contradictions resolve themselves, and any ill-fitting pieces puzzled over begin falling into place. A direction progressively becomes clear, but as it does comes the challenge, the hard part: all the detail work required to implement the vision.

Which is what I’m in the middle of at the moment. Only this time, a lot of the details also involve creative effort, not just scutwork: in this case, graphic design. Having started out as a typesetter many years ago, with no formal training in graphics, my forte within the field of design is typography and, to a secondary degree, layout. What is hard for me, though, is working with images and graphics themselves.

When most people think of a graphic designer, they probably imagine someone who designs logos or creates illustrations or other graphics from scratch. But that’s not what I do, nor my calling, so to speak. My strong suit in working with graphics is not creating them (I’m not an illustrator or photographer) but in what you do with them afterward, when combining images with typography to lay out pages.

The WordPress web design swamp

With the previous iteration of the blog, the Think Outside the Box incarnation (actually still the current one, though not for long), the largest amount of time when first creating the site went into conceiving and implementing a look for what in the design world is called the “body copy,” along with the headlines and subheads. In WordPress or web page layout, these comprise “the main content area,” as it’s termed — the body text of a post or page, including the post or page title above, and the comments section below. Also, the sidebar area and footer fall under the same general area in terms of design work, to my mind.

Not only do I love reading well-composed typography, at least if the writing itself is worthwhile, I love crafting it as well. But it took so much time on the first go-round getting that finished for Think Outside the Box (late in 2015) that I didn’t have the time, energy, or willingness to address much in the way of graphics and images for the site. Primarily this meant focusing the time I did put into that on just the main site header for the blog, a.k.a. masthead, at the time. (The culprit causing all the delays in this case was the under-the-hood travails dealing with the previous WordPress theme’s exasperating rat’s nest of built-in CSS to untangle.)

For a graphic designer accustomed to the relative ease of designing with Illustrator, Photoshop, or InDesign, WordPress has been, until very recently, just a dreadful thing to have to fight with when it comes to designing a website. Like a never-ending boxing match, or game of whack-a-mole, or constantly struggling to extricate yourself from quicksand that engulfs you at any slight misstep.

I was happy, more or less, with the header design I came up with for the blog. But it wasn’t long before I realized there was a serious issue with it: It worked well only on computers and tablets, but not phone displays where it lost most of its impact due to the huge size reduction. The problem being that about half of users these days use phones as their primary web browsing device. Eventually, the masthead design would need to be simplified to just a few elements to retain a strong focal point even at a small size.

At the time, I decided to leave undone all the different headers for the non-blog sections of the site. The majority of these sections fall under the “Work” item on the site’s main menu bar, but there are also the Contact page, the 404 Not Found page (if one wants to go to that length), etc.

True, I did design a secondary, knockoff version of the main blog masthead, substituting a “word cloud” composed of the titles of each of the Work sections of the site in place of the “Think Outside the Box” heading and cardboard box graphic. But the knockoff version was really just an interim solution, and in terms of its design, something I disliked more and more as time passed. (No dominant focal point — a no-no in good graphic design — thus scattering attention and undermining impact.)

The need for separate mastheads for different sections of the website

The challenge with all this is that my site is different than most personal sites. A single header for all pages and posts like most bloggers are happy with doesn’t work well here due to the range of different “Work” sections on the site.

If you ignore their work lives, most people’s life pursuits are probably centered around one or two primary things. Perhaps even zero if they hate their jobs and all they do is watch television after arriving back home, or if they stay glued to their phones 24/7 like so many American do. (Sorry, couldn’t resist a little sarcasm about the sorry state of the vast wasteland of work and other activity across the fruited plain out there. ) Even if you include their work lives, the majority of people tend to have a career that revolves around one basic interest, even if they are a serial job-hopper.

But I have perhaps six or seven other interests I’m enthused about: three or four in my personal life, and another three or four in my work life. When you are self-employed, or mostly so, as I am — and not in a traditionally defined occupation for the self-employed like plumber, electrician, accountant, doctor, dentist, etc. — sometimes you end up as a jack of all trades in a given field. That’s what has happened to me, and it’s reflected in the various selections under “Work” on the main menu bar here on the site.

Any masthead you like — as long as it’s the same one everywhere

Ideally, then, what makes the most sense for the website here is for each different section of it to display a unique header or masthead. And it’s a real issue beyond the varied interests I have. Just as importantly, for a person landing on a business page, an unrelated header at the top of it for the blog will be an unwanted distraction at best, and a downright annoyance at worst. You don’t want to annoy or offend someone you hope to possibly get work from.

So, this time around with the site and blog design, after having imported and converted the previously created typographic styling from 2015 for the body copy, and designing a new masthead for the newly retitled Hermit Spirit blog, I decided to tackle this much larger task. And make no mistake, it’s a lot of design work. Or at least it is for me.

The initial hurdle prior to this, though, was figuring out just how you twist a WordPress blog theme’s arm to get it to display a different header on different pages of a site in the first place. That’s because most WordPress themes seem to expect your masthead will be consistent across all pages of the site, and they make no provision for multiple mastheads whatsoever. Or, even if they do include functions that can or could be used for inserting different headers on different pages, that particular “use case” is rarely an explicit feature of the theme. You have to go rooting around for yourself to find whatever the relevant function within the theme might be that can be utilized, repurposed, or hijacked to get the result you want.

In my case, based on the reputation of the WordPress theme I had cast my lot with for Hermit Spirit (GeneratePress), I knew it was flexible and powerful enough to do this, but heck if I could figure out how. So I began digging into the theme’s community support forum pages to find answers. Surely — hopefully, anyway — someone else must have had the same or similar issue I was facing, right? And as it turned out, sure enough, a few had. Or at least there were some who needed to accomplish the same thing who had taken the time to ask about it.

GeneratePress is really more like a customizable “theme framework” than a theme, slanted toward bona fide website developers — often those who want to speed production without nearly so much coding as usually required — but also graphic designers to an extent. So it’s about as easy as it probably gets with something like this, but you do still have to work at things depending on the situation. And thankfully, Tom Usborne, owner and lead developer, along with Leo, at GeneratePress — are very patient and extremely helpful in pointing users to the most elegant solutions possible when you need to go beyond what can be found in the top-level WordPress controls they provide to customize and style the theme.

Twelve mastheads to rule them all

Having solved the conundrum of how to implement multiple section headers, the task then before me was to sit down and actually design all those headers for each separate section of the site. There are 12 of them, at current count, and here’s the list. Except for the first one and the last two, the rest are for submenu items under “Work” on the main menu bar.

• Hermit Spirit Blog (applies for Archives and About, as well)
• Work Overview
• LeewardPro Custom Car Tags
• Proofreading
• Hangman/Picture-Hanger Guy
• Writing
• Graphic Design
• Font Production
• FontCompass: Find the Right Font
• Reverie Massage Music Playlists
• Contact/Hire: Normally you wouldn’t need a separate masthead for this and could reuse the main blog masthead. However, as noted previously, many if not most people coming to the site for business purposes who land on one of the Work sections of the site will have no interest in the blog — so best to stick to business here.
• 404 Not Found

After first designing the Hermit Spirit masthead, and then spending perhaps 10 days to two weeks porting over and integrating into GeneratePress the CSS that controls the typography for the main content area, comments, sidebar, and footer, I got to work designing the remaining masthead pages listed above.

Although it has been very hard work, it’s also been a lot of fun, and I’ve learned a few things in the process. Currently I’ve plowed through and completed nine of the new site section headers (subject to some additional tweaks), with just three left: Graphic Design, Font Production, and 404 Not Found. The vision for the new site is playing out in reality with the design of the new section mastheads about as well as I could have hoped, which I’m excited about: It’s “stretched” me as a designer, always a welcome event, though a bit unanticipated too, thus doubly rewarding this time around.

And with that, I’ll bring this post to a close as a way of beginning to implement another goal for the upcoming new site: to keep my posts shorter and more digestible than before.

More to come about the new site, either as launch nears or once things actually go live.