Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

ElliotJayStocks.com version 4

Posted on 19 April 2007 36 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:

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!

36 comments

  1. John Arnor G. Lom

    John Arnor G. Lom

    16 April 2007 @ 06:51PM #

    Welcome back from the dark land of the linkless splash-screen!

    Absolutely love it! Functional, different, minimalistic and grudgey at the same time…! (And someone using minty green without it being a ripoff of Shaun Inman?!)

    Fully agree with your (borrowed) point of not letting progress stop to wait for Microsoft to catch up.

  2. Elliot Jay Stocks

    Elliot Jay Stocks

    16 April 2007 @ 07:05PM #

    Thanks ever so much, John. I’m really glad you like it! Hope you’ve seen your link in the Blogroll, as well… :-)

    I’m relieved to hear the minty green doesn’t look like a S.I. rip-off; it was worrying me! Viewed without the background-image, this site’s background-color (#191919) does make it look a little Mint-esque…

  3. Marc George

    Marc George

    20 April 2007 @ 01:38AM #

    Good job Elliot. Love the look of the new site – kinda urban-romantic. Well done on getting it finished!

  4. Francis Booth

    Francis Booth

    20 April 2007 @ 02:34AM #

    Wow – a truly fantastic personal site, the weeks of betaing (?!) have really paid off.

    The extensive use of transparency is a particular favourite of mine, but the overall feel is a great example of your skill at juxtaposing clean form against “the mess”.

    I thought that your portfolio was fantastic before the redesign, but it has duly stepped up another three rungs. Can’t wait to see what you’ve got in-store for the vault section.

    Hmmm… I do feel my own site could perhaps do with a fresh lick of paint now. Watch this space! :)

  5. Elliot Jay Stocks

    Elliot Jay Stocks

    20 April 2007 @ 04:18AM #

    Marc & Francis – thanks so much for the kind words. But thanks even more for helping beta-test this beast! I really appreciate your help.

  6. Rob Jones

    Rob Jones

    20 April 2007 @ 05:02AM #

    I’ll tell you what… that’s a great site. Really pleased for you Elliot. The fixed background works really well with the image and amount of content makes me feel like I’m reading while walking on a pavement – surreal but great! What I am especially impressed with is the visibility of text and clarity of layout something that’s not easy to do with white text without hurting the eyes but again you’ve pulled that off. Oh and I love the little details like the blogroll favicons. I’m sure I’ll find more while I browse the site a while longer. Congratulations.. Love it.

  7. Boz

    Boz

    20 April 2007 @ 01:15PM #

    This has been time well spent. Excellent design and textures. Just a great looking site!

  8. Paul

    Paul

    20 April 2007 @ 03:09PM #

    Very well done. Everything just looks right. Consider yourself linked.

  9. Elliot Jay Stocks

    Elliot Jay Stocks

    20 April 2007 @ 04:07PM #

    @ Rob,
    @ Boz,
    @ Paul:

    Thanks so much, guys. I really appreciate the comments!

  10. ikram_zidane

    ikram_zidane

    20 April 2007 @ 06:09PM #

    nice redesign..

    for the em sizes, just set the body’s css rule for font size as 62.5% and then
    1em = 1px
    3em = 3px

  11. Nick Cliffe

    Nick Cliffe

    20 April 2007 @ 09:53PM #

    Elliot, it’s such a wonderful site that I immediately posted it up to StumbleUpon.com so if you get inundated and your bandwidth charge goes up you know who to blame :o)

    Do I get a prize for spotting the deliberate mistake??? You have given buyers of Second Leaf the choice of buying within the UK, or alternatively of buying within the UK!

    I’m going to pour someting long and coool now and dream of Bonnie being at my feet again…

  12. TextureKing

    TextureKing

    20 April 2007 @ 11:06PM #

    Elliot, the site looks great. It’s always great to see textures used with such effectiveness and really compliment a design.

    Well done!

  13. Rod

    Rod

    21 April 2007 @ 04:11AM #

    This theme is amazing, and would be better for usability if the content of the post had a transparent bg, like your admin comments :)

  14. Bubs

    Bubs

    21 April 2007 @ 06:30PM #

    No problem for the post on my site :) I love your design!

    I’ve always used ‘pt’ font sizes because I think they look nicer… but maybe I should read up on Accessibility related to fonts :)

  15. Chucks

    Chucks

    21 April 2007 @ 11:58PM #

    Very inspirational design, thanks for sharing with the world

  16. daveMoore

    daveMoore

    22 April 2007 @ 02:37PM #

    blimey. it’s geekzone but i love it :) your freedom of communication shines through yet again, mr stocks.
    gorjus, gorjus, gorjus. i’m going to have to rethink all my ideas (so thanks for that!)
    your passion is evident – kudos to you mate.
    (and nice to see photos of our lovely hood – i’ll be checking into these when i pine….)
    all best mate – d

  17. rhys

    rhys

    22 April 2007 @ 05:45PM #

    from a completely non-technical perspective, the site looks great and there’s no need for an instruction manual to get to around it. it also has probably the best portfolio i’ve seen. you’re hired!

    good job, old bean!

  18. nghia

    nghia

    22 April 2007 @ 08:55PM #

    hi
    i really like your site’s theme… can i download it and use for my WP blog?

    if its not free, can i buy it from you?
    thanks

  19. Andy Beeching

    Andy Beeching

    22 April 2007 @ 11:47PM #

    Sterling stuff Elliot, this is a fantastic personal site. With the amount of work going in London atm I’m positive you’ll be inundated! I agree that Transcending CSS has some great content in it (not too mention it looks quite nice), and it’s nice to see it in practice here. Big fan of all the geeky details as well so keep it coming!

  20. Elliot Jay Stocks

    Elliot Jay Stocks

    23 April 2007 @ 03:49PM #

    Thank you so much for all of your comments, everyone! I really really appreciate all this feedback.

    @ Nghia & everyone who’s asked this via e-mail: No, I’m afraid the site’s Wordpress theme will not be made publically available.

  21. Ryan Shelton

    Ryan Shelton

    23 April 2007 @ 04:17PM #

    Beautiful looking site and great work in your portfolio Elliot!

  22. Erika

    Erika

    23 April 2007 @ 08:24PM #

    Hey, great site! Amazing design. Congrats!

  23. Joseph

    Joseph

    25 April 2007 @ 11:45AM #

    Really nice site you’ve got going here. I’ve been reading Andy’s book as well. Very nice work.

  24. Elliot Jay Stocks

    Elliot Jay Stocks

    25 April 2007 @ 09:58PM #

    @ Ryan, Erika, and Joseph: thank you!!!

    The support for the new site has been extremely humbling and I appreciate all of the comments and e-mails people have left me.

    Thank you to everyone who’s posted the site on CSS or web design galleries, their own sites, blogs, digg pages, del.icio.us pages, ma.gnolia pages… it’s been utterly overwhelming. Also thank you to those of you who spotted typos!

  25. Sherwin Techico

    Sherwin Techico

    29 April 2007 @ 02:05PM #

    via CSSBeauty:

    GJ Elliot! Couldn’t wait till May 1st eh?! =)

  26. Patrick Mullin

    Patrick Mullin

    10 May 2007 @ 01:36AM #

    This is a great site. My favorite part was opening IE , plopping this URL in, and seeing that beautiful banner in the top right corner. I feel like you should make that into a wordpress plugin. I’d use it for sure.

    Good Stuff!

  27. Elliot Jay Stocks » Transcending CSS by Andy Clarke

    Elliot Jay Stocks » Transcending CSS by Andy Clarke

    10 May 2007 @ 04:45PM #

    […] use of these techniques (and general ‘ethos’), and you can read more about it in this blog article (although I must admit I’ve yet to use anything from the CSS3 specification – I […]

  28. Dominik Lenk

    Dominik Lenk

    10 May 2007 @ 05:44PM #

    This is an awesome site… I only just discovered it and I must say that I was blown away by the ‘dark, moody’ feeling. Nice.
    I read through your requirements for this site, and was surprised that quite a few are similar to the ones I had for mine. In fact we came up with a similar grid system… Nice to see that my first attempt at my own site is not completely a shot into the blue.

    Oh and even if the background is weighty, keeeeeep it…

  29. Elliot Jay Stocks

    Elliot Jay Stocks

    11 May 2007 @ 07:02PM #

    @ Sherwin: It was tempting to wait until the Reboot, but the site was burning a hole in my pocket… Plus it was not just a CSS ‘reboot’ per se; it was a complete from-the-ground-up build.

    @ Patrick: Thanks! I don’t think I’ll be making this into a Wordpress plugin, but I do plan on writing a tutorial on it soon… Do you get Computer Arts magazine in Chicago?

    @ Dominik: Thanks for the kind words, and for putting the link(s) on your own site!

  30. Tarandon

    Tarandon

    08 June 2007 @ 01:50AM #

    Okay, I’m going to complain about something here, and it’s probably only because I stare at a computer screen for 12 hours a day.
    I have a hard time picking out the text from the grey textures of the background image. Except of course on your comments, because the contrast is increased by the semitransparent background on the div.

    Overall the site looks great, but I’m just having a hard time reading some of the articles. I can plod through it by my eyes get strained in the end.

    And no, I don’t need glasses if that’s what you’re thinking.

    Great work, on the site. I intend to visit again in the future. Ctrl+B

  31. cpbocjqnoq

    cpbocjqnoq

    18 June 2007 @ 02:16PM #

    Hello! Good Site! Thank you!

  32. Elliot Jay Stocks

    Elliot Jay Stocks

    19 June 2007 @ 11:16AM #

    @ Tarandon: Thanks for the constructive criticism. My personal opinion is that although there’s an inescapable trade-off between textured backgrounds and legible text, the balance here is fairly even. However, I admit that there is room for improvement on the legibility, and this’ll be something I address with the next version.

  33. Robert Rodrigues

    Robert Rodrigues

    18 July 2007 @ 10:38PM #

    WoW, your site is awesome man…., all of great info… and also convince me to use wordpress…

  34. adelle

    adelle

    21 July 2007 @ 08:08AM #

    I think your website is designed very eloquintly. I admire how your always trying to up the site before your even completed with the first version! Im trying to learn css…but im a print/designer/art director at heart. Is there some tutorial or something I could read on how to impliment a wordpress blog in my own site just like you did here?

    Anyways..Ive got you book marked! Keep up the amazing design / web work.

    A

  35. adelle

    adelle

    22 July 2007 @ 08:05AM #

    i love the background textures as well.

  36. Jesse Vlasveld

    Jesse Vlasveld

    26 February 2008 @ 05:52PM #

    My compliments on the design Elliot, it’s brilliant.
    I’ve been reading trough you’re articles a bit, and found some interesting reads (liking the starker’s theme as wordpress foundation).
    I’m going to try out the Tiger Admin you recommended right away!

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