Tom Jeatt

The things that made me Me: Compose to a Vertical Rhythm

 Uncategorized  Comments Off on The things that made me Me: Compose to a Vertical Rhythm
Jan 122012

Earlier this week I was fortunate enough to attend an event at which Richard Rutter gave a talk about web typography. Several years ago, 2006 to be exact, Richard wrote an article for 24 ways called Compose to a Vertical Rhythm; two years after that, I discovered 24 ways and read it. Listening to him speak reminded me of the effect which reading that article had on me.

Prior to then I had been designing and building websites which, to put it kindly, aspired to mediocrity. This wasn’t through choice or laziness: I was desperate to improve, and spent more time reading than I did coding. But my reading list lacked a certain coherence. I would consume articles on HTML, CSS, PHP, and JavaScript techniques with no regard for provenance, and then try and implement them all at once, in the same project. As a consequence I was capable of displaying the server time in the browser (yay me!) and coding a working, if unattractive, JavaScript slideshow (sexy times!) but what I couldn’t do was write good mark-up or make websites which were a pleasure to use. Despite doing this ‘professionally’, in the sense that it was part of my job and I was being paid, I was the archetypal amateur.

And then I read Compose to a Vertical Rhythm. Now, I’m not going to pretend that the scales fell from my eyes, or that I emerged, blinking, into the light. What did happen, though, was that I read the article and ‘got’ it. I had always been able to tell a good website from a bad one, but because I lacked a background in design I didn’t have the vocabulary to articulate why. Looking at the before and after examples inspired in me a sense of calmness and inner peace with respect to the latter, and so I learnt to recognise one aspect of good web design. I read the article and put the ideas into practice with an understanding of what I was trying to achieve and why it was important.

I think the reason this article struck a chord with me was the way in which it was framed. I had always been an aspiring musician (I still dabble, since you ask) and I had embarked on my career as a web designer at about the same time as I had accepted that the invitation to headline Reading Festival probably wasn’t just lost in the post. I had over a decade of experience with the structure and composition of music but barely six months experience with the web. So when Richard wrote that ‘just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography’ it was the first time I was able to put web design into a context which I understood. It also didn’t hurt that he obviously had good taste in books: anybody who uses an excerpt from a Neal Stephenson novel to illustrate their ideas has got to be worth listening to.

I didn’t suddenly become a good web designer, of course, or an expert in typography. My websites were still positioned somewhere south of mediocrity, and they still had faces that only their mothers could love. But, with proper consideration given to the mechanics of reading and the foundations of typography, they started to become a little more comfortable to read, a little easier to use. More importantly this also marked the point at which I realised that I needed to learn about design as well as code, and I needed to take more care over how I chose to educate myself. I stopped reading badly written articles about unnecessary JavaScript and started reading about semantic mark-up. I came to understand the concept of separating the structural, presentational and behavioural layers of a website, and why it was important to do so. I also started reading about grids, colour theory, and information architecture, as well as a great deal more about typography.

I didn’t realise any of this at the time; it wasn’t until at least eighteen months later that I was able to pinpoint reading Richard’s article as the point at which my designs had started to become subtly better. My designs were sill ugly as hell, but at least they were readable. And from this point on I learnt to implement other people’s ideas only when they chimed with my own ‘inner designer.’ Mark Boulton’s articles about grids for example, or Erin Kissane’s book on content strategy. Reading Compose to a Vertical Rhythm had been the first time I had found a concept which ‘spoke’ to me, and so it was also the moment in which I realised that I could become a better designer by working hard, paying attention to the details, and learning from the right people. It also made me think more carefully about my strengths, and my interests. I’m better at typography than I am with, say, colour, and I get greater satisfaction from it. My websites are never going to win any beauty contests, but they will always make typographical sense.

Sometimes the important moments in our careers — or, given how much time we spend at work, our lives — only become obvious as we watch them recede in the rear-view mirror. So if by some chance you’re reading this Richard: thank you.

An extract from Cryptonomicon by Neal Stephenson

 Uncategorized  Comments Off on An extract from Cryptonomicon by Neal Stephenson
Oct 132011

When I was reading the project brief I was reminded of a passage from Neal Stephenson’s Cyptonomicon.

To Randy and the others, the business plan functions as Torah, master calendar, motivational text, philosophical treatise. It is a dynamic, living document. Its spreadsheets are palimpsests, linked to the company’s bank accounts and financial records so that they automatically adjust whenever money flows in or out. Beryl handles that stuff. Avi handles the words—the underlying, abstract plan, and the concrete details, that inform those spreadsheets—interpreting the numbers. Avi’s part of the plan mutates too, from week to week, as he gets new input from articles in the Asian Wall Street Journal, conversations with government officials in flyblown Shenzhen karaoke bars, remote-sensing data pouring in from satellites, and obscure technical journals analyzing the latest advances in optical fiber technology. Avi’s brain also digests the ideas of Randy and the other members of the group and incorporates them into the plan. Every quarter, they take a snapshot of the business plan in its current state, trowel some Maybelline onto it, and ship out new copies to investors.

Take from that what you will. Not sure I’m going to be able to stretch to satellites, but I think this is something close to the relationship I’m going to have with my thesis project over the next year.

Hopefully this is fair use and not copyright infringement. In the unlikely event that Neal Stephenson is reading this, and thinking I’m taking liberties with his text, then I’ll take it down and buy everyone a copy of the book (with the corner of page 240 turned down) because it’s really very good.


What I did with my summer

 code  Comments Off on What I did with my summer
Oct 042011

University tomorrow. Yikes. Here’s what I’ve done with my summer.

Responsive design

I’ve finally got the hang of this, and it’s completely changed the way I think about web design. It’s pretty straight forward. Start with one of the extremes. If your project’s mobile focused start with hand-held devices; if it’s desktop focused start with a standard or widescreen monitor. Build your website, and then scale it up or down as you come across your breakpoints. Add some media queries, and do it again. You might need lots of media queries, or you might only need one or two. Continue reading »

Analysing SEO

 Coursework  Comments Off on Analysing SEO
May 222011

For this (rather belated) piece of coursework we were asked to analyse three websites, identify their key phrases, their Google ranking for these phrases, their page rank and site traffic. I’ve decided to focus on car parts suppliers, because I’m building a car and I buy a lot of car parts.

Continue reading »

A Flexible Mind

 Uncategorized  Comments Off on A Flexible Mind
May 172011

One thing that’s become clear to me throughout the course of this year is that I’m stuck in my ways. After the initial sketches, all my visual designs start in the same way: a 12 column grid, 960px wide. If I’m feeling particularly daring I’ll stir things up with a 16 column layout (you devil you).

A few days ago I decided that it was time to make a change. I took the momentous decision to follow the One True Path to Wisdom (a.k.a. responsive web design). I was going to claw my way out of the stone age and into a shiny new era of iFriendly designs. I would throw off the shackles that had held me back for so long and start creating designs that flexed. Hurrah! I even started to write a blog post about it.

It was while writing that blog post, and explaining the reasoning behind my decision, that I noticed I was an idiot. What I was about to do was spend a huge amount of time and effort dragging myself out of a rut only to hop straight into the next rut along. In the process I was going to wilfully discard years of hard-won experience. It was like buying a ratchet set then getting home and throwing away all of the spanners. Continue reading »

App production and web design

 Content Management, Coursework  Comments Off on App production and web design
May 032011

This is an expanded version of a presentation that I gave in class on the 23rd of March 2011. Original presentation (pdf).

How are apps produced and how could they work as an alternative or supporting publishing format for web content creators?

What is an App?

Strictly speaking ‘app’ is just an abbreviation of the word ‘application’ and so could be applied to any piece of software. However with the rise of the smartphone, and in particular the introduction of Apple’s App Store, it has acquired a more specific meaning: a software application which runs natively on the operating system of a smartphone or tablet computer. Although the word app was at one time closely associated with Apple’s iPhone, it has now assumed a more generic meaning. Continue reading »

The trick navigation of Mark Boulton

 code, Shoulders of giants  Comments Off on The trick navigation of Mark Boulton
Apr 042011

I was reading an article on Mark Boulton’s website, the first time I’ve visited it since the redesign. The article, A Richer Canvas, was interesting but that’s not what this blog post is about.

The website is very minimal, with typography the focus. The navigation is in a sidebar on the right and just simple, grey text. Until you mouse over the sidebar. When you do, all the links turn from grey to green. It’s a really effective technique and quite eye-catching. It’s simple, but elegant, and not something I’ve seen before.

Now all I need to do is work out how he did it and then steal the idea.

*** Update ***

I gave it a go, and it’s very easy. Took me 15 minutes to find out how he did it and then code my own (very rough) example: Trick navigation example.

All you need to do is apply a hover pseudo-class to a div, and target each anchor within that div (see code in comment below). That way the anchor changes when you hover over the div, not the anchor. Use some CSS3 transitions to add a little easing and that’s it.

Ten albums to listen to when coding

 Lists, Non-cognate, Thoughts  Comments Off on Ten albums to listen to when coding
Mar 282011

I often find it difficult to get the balance right. Too song-oriented and I find myself getting distracted; too ethereal or ambient on and my mind wanders.

These albums seem to work though (all links go to Spotify):

A very short post about Apps

 Content Management, Thoughts  Comments Off on A very short post about Apps
Mar 252011

I was reading a blog post by Ethan Marcotte today and he neatly summed up one of the points I was trying to make in my (slightly rambling) presentation the other day:

“But let’s say that your project—or more specifically, your audience—is better served by a mobile-/tablet-/$DEVICE-specific experience. Heck, I’ve worked on a number of projects that benefitted from that approach: where a separate mobile site was needed, and where a responsive approach would’ve been less than ideal. That decision wasn’t driven by any “mobile vs. desktop” mindset, though: it was dictated by research, by our content strategy, and by studying the needs of that site’s particular audience.”

Apps are fine, websites are fine but context is everything and the audience is king. I’ll be writing up my presentation soon.

Why I don’t like Clients from Hell

 Non-cognate, Thoughts  Comments Off on Why I don’t like Clients from Hell
Mar 242011

I don’t know if you’re familiar with Clients from Hell. It’s a funny Tumblr log where creatives, mostly web developers and graphic designers, send in rude/stupid/funny/ridiculous/annoying things their clients have said to them or asked them to do. Most of the entries fall into one of two categories: 1) my client is an idiot and 2) my client is trying to rip me off.

On the whole the entries which fall into category two leave me marvelling at the chutzpah of some people and in those cases I offer my sympathies to the downtrodden working stiff who’s been landed with such an arsehole of a client. When reading entries which fall into category one though, I’m increasingly finding myself siding with the client. Continue reading »