Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, co-founder of lifestyle magazine Lagom, founder of typography magazine 8 Faces, and an electronic musician.

ElliotJayStocks.com version 4

Posted on 19 April 2007 Comments

Article illustration

Welcome – at last – to the latest version of the site. It’s been a while in the making, but only because I’ve been trying to make it as future-proof as possible… unlike previous incarnations, this version should be around for a while!

Version 4 of elliotjaystocks.com is the site I’ve been wanting to make for a long time, and I hope you’ll agree that it’s a significant improvement upon the ones that have come before. It’s split into three core sections: the blog, powered by a heavily-customised Wordpress installation; the portfolio, more extensive than ever before; and the about section, which provides heaps of information and a massive dose of linkage. The Vault, the soon-to-be fourth core section, is still being built but will act as a storage area for anything sitting outside the initial three.

Most importantly, this version is the most Standards-centric build so far: I’ve pushed anal retentiveness to new levels with the markup and CSS. More on this in a second. :-)

If I’m about to lose you, then let me just say thank you for visiting and please leave a comment below before you leave. If, however, you’re still with me and up for some über geekiness, then please read on…

What I tried to achieve with this version



- As few classes and IDs as possible. They’re not quite as sparse as I’d like, but I’ve tried to limit their usage and therefore de-clutter my markup, opting instead for the heavy use of descendant seclectors in the stylesheet. This also has the effect of commanding a greater ‘power’ over the declarations, because of the specificity.
- Taking a cue from one of the key lessons in Andy Clarke‘s book ’ Transcending CSS’, I’ve tried to push things forward and not focus on catering for IE. That’s not to say I’ve neglected to make this site work in IE, but I’ve used more modern CSS tecnhiques that are lost on that browser. The result is that the site degrades (relatively) gracefully in IE; most of the time it simply means that it lacks some of the ‘coolness’ you’ll see in standards-supporting browsers. One example is the favicons displayed next to the link names in the Blogroll: IE won’t see these because their display is dependent on the browser supporting attribute selectors. Similarly, IE will still display the red bottom border on the portfolio images’ hover state because I removed it for other browsers using adjacent sibling selectors. These techniques played a huge part in saving me from using unnecessary classes and IDs (to reiterate the first point).
- Markup and CSS aside, I tried not to make this version look too ‘designed’. Ok, that’s ridiculous – of course it’s designed – but the site’s relatively simple grid-based layout (and emphasis on textures rather than imagery) hopefully allow the content to ‘breathe’; something I felt was particularly important when it came to the portfolio. People had always commented on how they liked the sparseness of previous versions, so it made sense to pay attention to that.

However, as with almost every project, the closer I got to releasing the site, the more I realised it could be improved upon. Because nothing is ever perfect, I’m setting myself some goals for improvement. And you can help by giving constructive criticism in the comments!

Goals for the next version



- Use Wordpress (or possibly another CMS) to power the whole site; not just the blog.
- Style the text using em instead of px . I’ve always found the em font measurement to be rather chaos-inducing, but it’s an important part of site accessibility and usability, so I need to convert.
- While we’re on the subject of fonts, it would’ve been nice to use sIFR.
- The site’s background-image – and perhaps the image content in general – is a little weighty when it comes to file size. I really could do with decreasing page load times.
- I was a little lazy when it came to styling the form elements. Some more TLC and a little Javascript for sexiness could go a long way.

Wordpress customisation

In order to integrate the Wordpress-powered blog into the rest of the site, I pretty much destroyed the usual theme structure, as nearly all of the includes sit outside of the theme directory. As I mentioned on the about page, I used Kyle Neath’s Hemingway theme for the foundations of my own, although this was mainly for the functions – our themes couldn’t look more different.

I started this project with only the most basic understandings of Wordpress customisation. In the process, I’ve learned a hell of a lot, but I’m still an amateur and I’m itching to get my feet wet with another Wordpress-powered site.

For you WP geeks out there, here’s a list of the Wordpress plugins I’m using:


- FlickrRSS, by Dave Kellam
- Widon’t, by Shaun Inman
- Subscribe To Comments, by Mary Jaquith
- Get Recent Comments, by Krischan Jodies
- Gravatar, by Tom Werner
- SRG Clean Archives, by Shawn Grimes
- Askimet (obviously), by Matt Mullenweg
- WP Tiger Admin, by Steve Smith

Phew. I think that’s it. Before we go, I should just mention that the RSS feed URL has changed from version 3, so if you were subscribed before, please update it to http://feeds.feedburner.com/elliotjaystocks

Well, enjoy your visit here and thanks for reading. Again, it’d be great to hear your thoughts on the new site – please leave a comment below!

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Siteleaf and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.