New Site, Same Old Priorities

A new site! The last version was getting a little bit dated, both in terms of design but also in terms of focus. I decided it was time to take a step back, simplify and reprioritise.

  • Last updated: 30 Nov 2013
  • Est. Read Time: 5 mins
  • Tagged: #site, #byebyecolumns

Idiot

I don’t mind being called an idiot. Heck, on a daily basis one or more of my colleagues will troll me in such terms (I’m looking at you, Kinlan and Gaunt). But there’s something oddly stark about seeing it in a tweet from someone you don’t know:

I confess, the three column design on the old site wasn’t great. Well, it was fine when I started and I didn’t have lots of content. But as I get older I seem to be getting more verbose, and the old site didn’t scale well for that. Then there was the fact that the text size was too small. Sure enough it became something of a readability nightmare.

The old site in all its triple-column glory

So actually, calling me an idiot is pretty much fine. The key to success is not avoiding failure, though. It’s about learning from it and adapting.

The key to success is not avoiding failure, though. It’s about learning from it and adapting.

New site

After a lot of trial and error I finally arrived at this design. What I’d like to tell you is that there’s some deep motif embedded in the very fabric and feel of the site. To be honest, having shoveled crap for agencies for nearly a decade I reckon I could do a pretty good stab at post-rationalizing it. Shall I try? Yes.

“When I set out on the journey to design this site, I wanted to reach back to something basic, primitive, strong. Triangles are a core part of graphics, and they are the strongest naturally occurring geometric shape. I wanted to bring these two things together in a synergy of synthetic and natural; the triangle representing the conjoining of these two disparate worlds.”

Waaaaowwww… how’d you like that?! Utter tosh. The honest truth is I liked the shapes and so I noodled around from there until I arrived at something that didn’t look too terrible.

Hopefully I’ve nailed the readability on all devices since the type is now much larger and in, ahem, one column.

I also made heavy use of SVG, which has been interesting in and of itself. All the vector shapes around the site are SVG, and that was for two reasons:

  1. I wanted to prove to myself that SVG doesn’t have to be butt ugly or revolve around that ruddy tiger.
  2. It saves me having to create Hi-DPI images for retina etc. There’s now some Sony handset that has a devicePixelRatio of 3, so we’re screwed whichever way you look at it for raster imagery. I’m rocking the vector wherever I can.

Same Old Priorities

One of the main reasons I wanted to redo the site was to deemphasize some of the stuff that was on the site before. The content is still around (unless I nuked it by accident) but my emphasis has shifted away from creative coding, and more towards writing for the blog or giving talks on rendering performance and tooling.

It’s not that I don’t want to do creative coding, I still love it, but my main priority in the past 18 months has been to help developers with front-end performance. So that’s the emphasis I wanted to bring.

Practical notes

Present me would like to remind future me, and by extension present you, that media queries based on devices is a terrible idea.

  • Present me would like to remind future me, and by extension present you, that media queries based on devices is a terrible idea. Not a bad one, a terrible one. For this site I thankfully chose to start mobile first and break whenever the content started to look very wrong. At which point I fixed it and then moved on. This way no matter which device views the site, now or in the future, things should look reasonable.
  • JavaScript is all but gone from the site, Google Analytics notwithstanding. Turns out I don’t need any for a static content site. Shocking, I know. No templating (outside of Jekyll, which is generating this thing.) or showbiz coding… You know what, some of the showbiz is likely to come back as soon as I have time. Time! Haha! What a lark he’s having.
  • There is a neat Python script called html2text, which I used to grab my old site content and convert it over to markdown. Even so, converting and tidying took a decent amount of time, and I don’t exactly have a wealth of content on here.
  • The shapes on the blog are generated through a little experiment I made.

So there you go. I hope you like the new look. If you don’t, feel free to call me an idiot on Twitter.

<3