//All About SEO

Recently a friend of mine was asking about SEO and I had this to say…

@mr_flibble08 @thehodge and @yoast know their SEO but it is essentially 1 part semantic code to infinity parts link-building

A short time after that Joost de Valk (@yoast) replied with this…

@sanchothefat not entirely true, the “infinity” is actually defined by the level of competition.

I can certainly see his point but it left me thinking about whether I was really exaggerating or not. The fact is regardless of your competition you can always be building links to your site by keeping on top of activities such as adding valuable content, getting retweeted, blogged about and so on. If you keep this up even when your competition eventually make every effort to beat your search engine ranking they’ll always be a step behind.

PS. If anyone reading this is looking for an SEO expert I’d be remiss not to mention Erin Ryan over at JP74. Otherwise she’d give me a sound kicking.

//Typographic Tidbit #2

One thing I never knew when I started web design was that italics were not simply a way to emphasise text. The correlation of the HTML <em> tag with the default style being italic text was a design choice made in context of the rest of the default styles. It could easily have been that normal paragraph text was italic and for emphasis it was made regular.

Continue reading…


Apologies if that annoying opera fruit’s verbal excretions from the Go Compare adverts gets stuck in your head but I was at a loss for a better name.

Fo’compare is a font comparison tool. It uses a little snippet of flash to get a list of your installed fonts allowing you to choose and view them in your browser. It can be used to help decide on font-stacks for CSS or to help the novice typographer learn all the subtle differences between the thousands of serif faces in circulation.

After playing the Font Game from I Love Typography I was determined to learn the nuances of certain typefaces and fo’compare has already taught me a lot. In particular my favourite observation is the difference between italic and regular ampersands in faces like Garamond or Caslon with its rather ornate and beautiful italic variation.

I guess the web page can be used as an alternative to having font browsing software installed on your computer – although in that regard it could do with a better way to browse your installed fonts such as tagging . Maybe in the next iteration.

Try it out: fo’compare

//The Collatz Conjecture

The Collatz Conjecture is named after Lothar Collatz and remains unsolved.

It’s very simple:

Take any natural number n. If n is even divide it by 2 (eg. n/2). If n is odd multiply it by 3 and add 1 (eg. 3n+1). Repeat.

The conjecture is that regardless of the starting number, you will always arrive at 1.

The fact that this remains unsolved is because numbers are infinite, but it’s simplicity is what makes it beautiful. I wanted to visualise the conjecture, and here is my effort…

Continue reading…

//On hiring

Some peo­ple are afraid of hir­ing bet­ter peo­ple but I’ve never been like that because actu­ally it makes me look good. So the sys­tem was always that I’d hire really, really good peo­ple and let them do their shit.?

Erik Spiekermann

//links for 2010-03-25

//links for 2010-03-19

//links for 2010-03-17


Just like cats never knew they wanted cheezburgers until the arrival of the internet here’s a bookmarklet you never knew you wanted until the arrival of now. PJSBox will run any Processing code you have selected in a lightbox. Magic!

Continue reading…

//Typographic Tidbit #1

I’m no expert – yet – but quite a lot of posts on the web about typography are related to CSS techniques and currently font-embedding. Very few tell us about the best practices for setting specific elements of the text we are working with. To paraphrase Robert Bringhurst typography should reflect the natural language as it is spoken. There are some acronyms that we pronounce as a word like Nato or laser and they should therefore be written as words. For acronyms in which we pronounce the letters such as CD or DNA they should be written as capital letters. That’s all well and good however from Erik Spiekerman‘s typographic tips over on the FontFeed blog:

NEVER use CAPITAL letters to accentuate words in running copy. They STICK OUT far too much spoiling the LOOK of the column or page. Use italics instead. If you have to set words in capitals, use proper small caps with or without initial capitals.

For acronyms where each letter is pronounced – the letters are still capitalised. As Erik states this is where small caps come into play. They allow you to have capital letters with the same x-height as your regular letter text, thus not sticking out and ruining your lovely paragraph.

This tidbit of CSS is a must in all of my style sheets from now on:

abbr { font-variant: small-caps; text-transform: lowercase; }

//Cross Browser CSS Image Replacement on Inputs

Disclaimer: I know image replacement isn’t ideal but sometimes we have to do it, plus it does offer up the opportunity for rollover effects using sprite backgrounds without javascript (at least in IE7+).

Here’s a quick solution to the problem of using regular CSS image replacement on inputs. The text-indent method fails in IE so we need a slightly different approach.

Continue reading…

//Nine Circles Numbers

During my day-to-day internet meanderings I came across the personal site of Ji Lee, pleaseenjoy.com.

One of his concepts in particular caught my eye. Nine Circles Numbers is a way of representing numbers visually using a grid of nine circles. In Ji’s words…

The Arabic numerals (1,2,3,4,5,6,7,8,9,0) are a set of abstract symbols which requires the users to memorize each shape before using them.

Nine Circles Number is new numeral system based on a simple visual logic of arithmetic progression. Instead of relying on memorizing the elements, it relies on counting the elements. Like the Arabic numerals, Nine Circles Number is based on the decimal system.

NCN was designed to see the numbers in a completely new way: as a mysterious and beautiful puzzle.

I was inspired to code it with my new found Processing abilities to make it that little bit more tangible. I emailed Ji to show him and he really liked it. He designed and then I built a google gadget and simple website. Please enjoy.

//Griffin Community Trust

The Griffin Community Trust is a charity that provides affordable accomodation for medical and dental students in the heart of London. The students in return help out and befriend the residents of Shaftsbury House Nursing Home, organising annual events like the garden party.

Their previous website was quite dated and they needed a way to update the content and add photos easily. They also needed a private section of the website where they could organise events and place information intended only for residents.

I used the Oulipo wordpress theme along with a few modifications of my own to better support image galleries and the charity’s own colour scheme. The password protection offered by wordpress meant the private section of the website was incredibly easy to add.


Chris Sutcliff is an artist and writer hailing from Burnley. He needed a website to start getting his artwork and thoughts catalogued and open to the public. I used the wordpress blogging platform and coded a custom theme for him taking influences from his favourite artists and designers – in particular David Carson. Carson is well known for eschewing the strict mathematical rules of the “International” or “Swiss” style such as grid systems and legibility and instead embraces the more evocative and subconsciously communicative grunge style.

I replicated Carson’s style in some ways with striking backgrounds, twisted typography and a disregard for a typical grid system and attempted to combine that with the psychedelic yet structured minimalism inspired by designers like Wolfgang Weingart. The latter is an element of my own tastes and influences which Chris was kind enough to allow me to express in the site design.

He blogs about his efforts to make a living from his artwork and the little things life throws at you that most of us dismiss without so much as a second thought. You’ll also find his sketches and commissioned works in the gallery. If you’re looking for an interesting someone who can write interesting copy for your website why not drop him an email.

Launch the website


Simon O’Rourke is an internationally renowned chainsaw carver having placed first in the English Open numerous times. His artworks have been sold to the likes of the Sandringham Estate aswell as to many very satisfied private buyers.

Simon provided the logo and background graphic and I designed and built the site using wordpress based on those.

If you were wondering he also happens to be one of my older brothers.


Back in March when I started playing with Processing.js I was making page after page of sketches and it quickly got tiresome. What happened next I guess you could say was “a moment of clarity” in the words of Samuel L. I knew exactly what I wanted to make and after 2 weeks of hacking in the evenings HasCanvas was born.

Continue reading…

//Scribble Thing

This is a very simplistic drawing tool I whipped together using processing.js for a bit of fun on the way to Brighton for dConstruct. If you use Firefox you can right-click on the canvas and then click Save image as to keep a copy of the nob you’re probably going to draw.

Continue reading…