Elliot Jay Stocks — designer & musician

A redesign at last

Article illustration for A redesign at last

Hello and welcome to the new elliotjaystocks.com — which is not just a redesign, but also a full rebuild. In fact, it’s the most substantial re-think of my personal site in about a decade, and the first time the site has had a portfolio section in a good 15 years or so. My plan is to delve into some of the site’s details in further blog posts, but today I’ll attempt a loose-ish overview. Humour an old man, won’t you?

First: type! Obviously. Breaking with my long-standing use of serifs and in particular David Březina’s Skolar, the new site’s text is set in the rather handsome and hot-off-the-press sans-serif Degular, designed by James Edmonson (along with a smattering of his Vulf Mono, too). Making extensive use of the family’s optical styles, small text on the site is set in Degular Text and large text is set in Degular Display — and when I say ‘small’ and ‘large’, it all very much depends on the size of your device’s viewport. Squash and squeeze your browser window to see what I mean. Some of you might wonder why I haven’t (yet) opted for the Variable version of Degular — more on that in a future post.

Typeface choices aside, the new site has been designed and built with a very strong focus on measure (line length). Ever since responsive web design became a thing, my approach has been to use a simple combination of factors to achieve a comfortable and readable measure: as the viewport grows or contracts, I either change the font-size, or change the width of the text’s containing element, or change both. With a generous helping of media queries to account for these, an occasional adjustment to leading (line-height) for some viewports, and the switching in-and-out of Degular’s aforementioned optical sizes, I hope this new site offers you a pleasurable reading experience. (If you spot any issues, please let me know.) The phrase I’ve had in my head while implementing these treatments is ‘typographic permanence’, and it’s definitely something I’ll be writing — and teaching — more on very soon.

(Quick aside: please consider signing up to hear more about my new, Zoom-based typography workshop). Cheers!)

The Work page

As I mentioned, the inclusion of a portfolio is something this site hasn’t had for a very long time, and it’s been challenging, mainly because — unlike the last time I made one — I can no longer simply collect together some things that I’ve ‘designed’: each Creative Director role I’ve taken over the last few years has gradually removed me further from the coalface of design, and although I’ve certainly got my hands dirty with projects such as Lagom or Colonna, a lot of my recent work has been around design leadership — like my most recent role at Maido — or design consultancy — like my time working with ClearScore on their DSType-designed bespoke typeface. And then there’s all those non-design-y things I’ve been doing in recent years, like editing magazines and taking photos and making music. I hope that the way my portfolio has been presented on the Work page speaks to some of these challenges, but I see it more as a ‘start’, and I have no doubt that this’ll be the page that changes the most in the coming months and years.

Looking back through old work has been somewhat therapeutic. Looking back through old blog posts has been… embarrassing? Well, some articles certainly show the naïvety of youth — let’s put it that way. And so, for the first time ever, I’ve decided to ‘de-list’ several posts I now consider to be outdated / irrelevant / embarrassing. They’re actually still here on the site (and Google might be able to help you find them if you insist), but I’ve removed them from the blog archive listings. Doing this has been pretty cathartic, I have to say, like cleaning out an old cupboard. You can expect to see a fair few more blog posts deprecated in the coming weeks, but I’ve paused the cleaning for now just I can get this bloody thing live.

So that’s the design side of things and the content side of things; now, let’s dive into the actual build — because it’s important to state that this is an entire rebuild rather than a re-skin.

Writing this post in IA Writer

I’ve been through my fair share of CMSs over the years, but my interest in Bastian Allgeier’s Kirby was piqued some years ago due to it being a file-based CMS. There’s something so beautifully simple about editing .txt files to update your website; something very Web1.0 — and I mean that very much in a good way. Of course, Kirby fans will be keen to point out Kirby’s content-editing interface, Panel — and Bastian has done wonders on catering the Panel UI to this site’s structure — but my personal preference is to edit the .txt files directly for the most part, especially with my default .txt editor being the awesome IA Writer. I know static websites are all the rage these days and folks are keen to bemoan PHP, but any doubts I had were soon cast aside once soon as I saw how blazingly fast the site runs on Kirby. And hopefully you’ve already experienced it, because elliotjaystocks.com has actually been running on Kirby for over a year now: I asked Bastian to port over the old site in early 2019 so that I could use that as a way of familiarising myself with the system. That said, in the end, almost everything Kirby- or PHP-related here has actually been handled by Bastian, who’s been on-call throughout the build process. Huge thanks to him for being the real brains behind this website.

Apart from the heavier PHP, I built the site myself — and it’s been a long time since I’ve done any front-end dev! But while feeling a little rusty to begin with, it’s afforded me the opportunity to dip my toe into the water of CSS Grid and I’ve even finally jumped on the SASS train — although the other day I read a post by Jeremy about how it’s not really needed anymore. Oh well. That’s where 10 years of procrastination will get me. But hey, nested media queries! Life-changer. Anyway, writing code again has been a surprisingly pleasant experience. There’s something quite zen-like about code either working or not working, and barely being open to interpretation.

From design, content, front-end, and back-end perspectives, there’s still a lot left on my to-do list for this site, but I feel like this setup is well placed for me to make ongoing, semi-regular updates, and it’s at a launch-able point now, I hope. Huge thanks to Bastian for all of the support during the build process, thanks to GURU for the super-reliable hosting, and thanks to Tim, Yaili, Kyle, and Paulo for the beta(ish)-testing. I hope you enjoy the new site. Please feel free to let me know if you encounter any issues.