Errol, me, and the new Stuff & Nonsense

OK, let’s get a couple of important “thank-you”s out the way first, because I wouldn’t be writing on a new website full of new illustrations and in a new CMS were it not for Vic Bell and Steven Grant. Vic brought my ideas for Errol the gorilla to life and Steven—my go-to guy for anything technical—integrated my code into Statamic. More on both of them in just a minute.

What problem is this redesign aiming to solve?

Looking back, I’ve redesigned this website roughly every three years. In hindsight some designs looked terrible, but performed—from a business point of view anyway—brilliantly. I preferred the look of other designs, but—as was the case with the last design—they sometimes performed abysmally. I learned a lot from these successes and failures.

This site badly needed work and the most important reasons were changes in the nature of the work I’ve done most recently, what I want to do more of, and changes in my personal circumstances.

Over the past few years, my business shifted away from project-based websites for clients, towards creative direction, design systems and style guides. I enjoy coaching and teaching people too, and I’d like to do more of that. The biggest change was my moving to Sydney to help Ansarada as their Head of Design. I’ve been with them for ten months and in many ways, it’s a dream come true. I wanted my website to reflect these things.

My name’s Andy Clarke

I know plenty of self-employed people who struggle on deciding whether to refer to themselves as “I” or “us,” “me” or “we.” Does being “we” make someone more credible, more attractive to potential clients as opposed to being ‘just’ “me?” I suppose that’s why so many refer to ‘themselves’ in the third-person.

With this redesign I wanted to re-frame Stuff & Nonsense as the portfolio of design work that I’ve created or directed, plus my coaching, mentoring, speaking, and teaching interests.

My wife keeps our business going and I’m not going to pretend that Stuff & Nonsense is any bigger than it is. That’s why the navigation now reads, “Andy blogs, coaches, designs, speaks.”

How did I go about this redesign?

I have to be honest, there have been a few people who have been an enormous influence on how I wanted to present this ‘new me’ online. Paul Boag, Brad Frost, and Harry Roberts to name a few.

I looked at how they presented themselves as professional individuals and followed their lead. I wrote copy about myself, the work I’ve done, and how it benefited the people who chose me. Then I rewrote that copy again and again over the course of several weeks. With every rewrite I got a little closer to the spirit of what I’m about.

When my writing—and the implicit structure of the website—was far enough along, I sketched layouts on paper and then in Sketch keeping some principles in mind. I wanted:

• An ‘editorial’ feel to the design
• Illustrations that show I don’t take ‘myself’ too seriously
• Design that doesn’t compete with work in my portfolio
• One typeface that expresses my personal brand

I experimented before finally settling on a fairly unusual 4/6 compound grid, then designed four ‘desktop’ layouts containing some of the content I now knew would go into the website.

From that point, I designed entirely in a browser using black and grey and placeholder illustrations that I, cough, appropriated from Vic Bell’s Dribbble portfolio.

Introducing Vic Bell

Honestly, there was no one else I wanted to illustrate this new website than Vic Bell. I could tell you how brilliant her work is, but you only need look for yourself. I wrote to her out of the blue:

Hey Vic. I’m planning on redesigning the Stuff & Nonsense website, turning it back into my personal portfolio. I’d love you to draw some things for the new site. I’d like the new image(s) to include gorillas (obviously) doing something fun and I love your style. Will you do this for me? Please say “yes.”

Working with someone new is always a little risky, but I knew Vic could bring my gorilla ideas to life. After several weeks of her trying to unravel my thoughts on gorilla personality, boy, did, she, do, just that. As time and budget allows, I’ll ask Vic to develop Errol further.

Why Errol?

I honestly cannot tell you why my gorilla is called Errol. It’s not because of Errol Flynn, nor Hot Chocolate’s Errol Brown. I’ve never read a Harry Potter book and while I love Snatch (“I like that one Errol. I’ll have to remember that one next time I’m climbing off yer mum.”) my gorilla isn’t named after a Guy Ritchie gangster either. All I can say is that Errol is the perfect name. I love it, and him.

I coded the website myself

You can say that I need to get out more if you like, but I really enjoy writing HTML and using CSS to turn markup into designs. I haven’t done that much recently and was worried I’d be rusty. I was also concerned that writing front-end code has become overly technical and tool heavy lately, so my old-fashioned ideas about what makes good, semantic markup and clean CSS might be, well, out-of-date. Of course I considered using a pre-or-post-processor, and a build tool too, but then I remembered something important.

What we need to make websites today is truly no different to when I made my first one in 1996.

Of course my code today is totally different to what emerged from Microsoft FrontPage 1.1, but what I found by concentrating on fundamentals is that I’ve lost none of my joy at seeing code come to life in a browser.

It was an opportunity to try new things

“Learn fundamentals before frameworks” should be on every young designer or developer’s desktop wallpaper, followed closely by “Make time to try new things.” Developing this website was a long overdue opportunity for me to work with technologies I hadn’t tried before.

Custom Properties, CSS Shapes, CSS Grid, Flexbox, <picture>. No fallbacks. I am going “balls out’ on this new personal website.

Perhaps what I should’ve said was “gentleman’s tackle,” but nevertheless, the new website includes:

• @supports
• CSS Calc
• CSS columns
• CSS Custom Properties
• CSS Grid
• CSS Shapes
• Flexbox
• <picture>
• SVG
• text-align-last
• vh and vw units
• [role] attribute selectors
• not() selectors
• pseudo-class selectors

Plus selector combinations that make my 1996 heart skip a beat:

[role="navigation"] li:not(:last-child) a {
margin-right : calc(var(--grid-gap)/2); }

Choosing a new CMS, or not

With a set of static HTML templates under my belt, I turned to my old friend and trusted developer partner Steven Grant for advice on how to back-end engineer the website.

I’d used ExpressionEngine far longer than was fashionable and Steven recommended that—because most of my content is mainly static—a database-driven CMS would be unnecessary. My criteria was a static site generator that didn’t involve using the command line, so I followed Steven’s recommendation and Stuff & Nonsense is now running Statamic. All I can say is, “so far so good.”

What next?

Look, I know that having a website that you cannot bear to look at is a pathetic excuse for not writing, but there you go. Guilty as charged. I’ve got no excuse now, so expect more writing from me on design and the business of design while I attempt to make blogging the habit it was for me a decade or so ago.

And that’s that. Errol, me, and the new Stuff & Nonsense.