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.

The new version (4.5) of elliotjaystocks.com

Posted on 15 September 2007 29 comments

Article illustration for The new version (4.5) of elliotjaystocks.com

I launched version 4 of this site back in April, and although I’ve performed various bits of ‘housekeeping’ in the months between then and now, I felt it was time for a more formal revision. So here we are with version 4.5 and I’d love to hear your feedback!

As you can see, this was very much a realign than a redesign; I’m developing ideas for a full ‘version 5’ relaunch, but that’s not going to happen until next year and I needed something to bridge the gap. In particular there were problems with the site that I’ve been meaning to address for a long time: namely, the legibility of the text against the (old) background image and the need to realign my about page to more accurately reflect what I do these days.

So, if you’re still interested and would like a run-down of exactly what has changed, here you go…

In general

The most obvious visual change is the new background image, which not only acts as a nice obvious clue to the fact that the site has been ‘upgraded’ but successfully solves the aforementioned legibility problem. Not only that, but the old background image has been stolen and reused so many times that the original didn’t seem as unique. It was time for a change.

I made a very subtle update to the semi-transparent PNG that appears when block-level links (like in the ‘recent posts’ list) are hovered over: it’s now green. In the original version I wanted to avoid using blocks of colour like that, but the emerald hue works so well over the new background image, and it serves as a hyperlink identifier now that the regular (black) semi-transparent PNG is being used elsewhere on the site (more on that in a minute).

Blog

Now that I’m an absolute Twitter junkie, it made sense to display my Twitter feed on the site. I love the fact that it keeps the site fresh, but I do apologise for the slow loading of the data. Twitter’s fault; not mine.

I don’t know if any of you noticed, but my Flickr feed hasn’t been working for quite some time, so I’ve ditched the flickrRSS plugin for Wordpress and gone for the standard Javascript-powered Flickr badge. Anyone know how to get more than 10 photos displaying? Altering the ‘count’ in the URL string doesn’t seem to make any difference above 10.

As well as the very subtle restyling of the ‘featured’ column, there’s a small addition in the form of the ‘speaking engagements’ section, which has become necessary as of late. This can only be a good thing! :)

I think one of my favourite features of version 4.5 is the new look comments. Ok, they’re not really a feature, but I think the design (a fairly drastic departure from the previous incarnation) makes the comments section so much more interesting to look at, and the alternating row backgrounds (now using the black semi-transparent PNG) have been a long time coming. What do you think? You might notice I’ve also added in a permalink for each comment, which you might find handy if you want to reference something that someone else has said.

About

The about page needed some serious rethinking to give the content a bit more breathing space and draw attention to the new features. The result is the crossbar that spans the full width of the page. With its own internal, equal-width columns, it also breaks up the page’s grid a bit more, allowing for easier reading.

Using Wordpress’ ‘page’ feature, I’ve added two of them: FAQs and copyright. These will grow over time, but I felt that they were necessary additions in order to a) save myself time writing e-mails (FAQs) and b) make it clear that the site’s imagery is not up for grabs (copyright). They’re linked to from the top crossbar, which also has press-related downloads such as biographies and photos.

Portfolio

The portfolio page hasn’t really changed at all, except that I’ve added some of my most recent projects. When I give the site a full redesign for version 5, I think I’ll probably ditch the one-page portfolio format and opt for division by category or date. What do you think? I’m open to suggestions!

Further thoughts

Ultimately, version 4.5 is intended to be more fun for you to use. Prior to the site’s launch in April and its subsequent success, I’d never been in a position before where I’d had to cater for readers other than myself and a handful (literally) of other visitors. So the improved user experience in this version is kind of a thank you from me to you lot.

The experience of making these updates has also solidified the need for a complete redesign in a few months’ time. There are some things (like the portfolio page) that can only be improved upon with a drastic change to the site’s underlying structure, and with those in mind, I’m planning version 5 right now. I think the biggest decision will be whether to move from Wordpress or not. It’s great for powering the blog, but other pages (such as a decent templating system for the portfolio) might benefit from the power of a whole-site CMS such as Expression Engine. Hmmm…

Just so you know, some of the outstanding issues I’d like to tackle in version 5 include making the article illustrations links to the full posts, adding some sexiness to the comment form, and finally launching The Vault.

Again, I’d love to hear your feedback on any of the above!

29 comments

  1. Kyle Meyer

    Kyle Meyer

    16 September 2007 @ 12:05AM #

    Awesome job Elliot. I was curious what you would do exactly and everything seems very much inline as they should be.

    The new background image really helps with the legibility problems.

    Great job. :)

  2. Mitch

    Mitch

    16 September 2007 @ 12:41AM #

    It looks really great – especially the about page. I love how it’s broken up so it doesn’t look like 3 continuous columns.

    Just a quick question – Did the Vault get any attention in the realign?

    I know there are quite a few people waiting for something to happen in that area. No pressure or anything (=

    And I’m not sure I like the whole live comment preview. It keeps giving me header-like text whenever I skip 2 lines. Weird.

  3. Michael Montgomery

    Michael Montgomery

    16 September 2007 @ 01:06AM #

    Realign 4.5 looks great. Effective & subtle.

    Love the tone and detail of the About page.

    And the favicon. Love that, too. Think I have something for favicons.

  4. Elliot Jay Stocks

    Elliot Jay Stocks

    16 September 2007 @ 02:44AM #

    Thanks guys! I really appreciate it!

    @ Mitch: Well done for spotting that. The problem seemed to be that if you only hit return once (i.e: inserting a line break rather than a new paragraph), the plugin wouldn’t detect it being a paragraph (understandably) and thus wouldn’t assign paragraph styles to it. Anyway, this has now been fixed (just by tweaking the CSS, luckily). Thanks again!

  5. Malarkey

    Malarkey

    16 September 2007 @ 02:51AM #

    You’ve done a fantastic job mate. (Oh, and yes, Expression Engine, oh yes.)

  6. Elliot Jay Stocks

    Elliot Jay Stocks

    16 September 2007 @ 02:58AM #

    Andy! A pleasure to have you on here, sir! And thank you very much indeed. I might have to pick your brains about EE at some point. :)

  7. Sam Rayner

    Sam Rayner

    16 September 2007 @ 02:05PM #

    Looking really nice Elliot, good job :)

    I small bug: hovering over one of the thumbnails in your Flickr feed sometimes causes the others to shift a little. Probably just a margin or padding issue.

    And to quote Andy:

    Expression Engine, oh yes.
  8. Mitch

    Mitch

    16 September 2007 @ 09:20PM #

    Ahh, one more thing. I love the theme and all, and the comments look a little better, but I liked the official comments.
    That way it’s easier to follow when you’re responding to someone.

    And about Expression Engine: I’d love to try that as well, but I’m afraid it’s a bit much for me. But good luck getting it all moved over from Wordpress!

    @Sam: I don’t see any shifting in the Flickr feed… maybe it’s the browser? I’m using Safari on Mac OSX.

  9. Elliot Jay Stocks

    Elliot Jay Stocks

    16 September 2007 @ 09:40PM #

    @ Sam: Thanks for spotting this. Michael pointed it out as well via Twitter, so thank you both of you! This is now fixed (for some reason Safari didn’t have a problem with it, which is why some people didn’t see it).

    @ Mitch: By “official comments”, do you mean the comments made by me? If so I personally prefer the new ones: you’ll see that my comments feature a large heading, dropped text, and a smaller left margin. It’s probably not been as obvious on this post so far because my comments have ended up ‘alternating’ with other people’s, but you should be able to see it now. :)

    @ Everyone: I noticed another Firefox discrepancy, this time with the green semi-transparent PNG. Because Firefox handles PNG gamma differently to other browsers and renders them slightly lighter (very weird, I know), I’ve had to darken it a little. The downside is that I think the green is a little too dark on my favourite browser (Safari), but as most of my you are Firefox-ers, it seemed only fair to give you the nicest green. Don’t get me started on gamma.

  10. Mitch

    Mitch

    16 September 2007 @ 10:07PM #

    Thanks for pointing that out, I didn’t even notice it before.
    But now I see the larger header, and all that. It makes it easier to see when YOU are commenting.

  11. Matt Munsey

    Matt Munsey

    17 September 2007 @ 03:18AM #

    I really like the realign approach to things. I like the new comments design a lot. If you do end up going with EE, do write a post about it. I am very interested in that CMS. There are some really great sights out there that are powered by it.

  12. John Arnor

    John Arnor

    17 September 2007 @ 04:10AM #

    Looking awesome! I didn’t even think it could get any better..!

  13. Steve Killen

    Steve Killen

    17 September 2007 @ 03:17PM #

    Great job on the redesign, much prefer the improved legibility of the site, great job on the background image, always a difficult thing to get right.

    One (very subtle) problem I have noticed in Firefox is that the logo is a couple of pixels too low and breaks the bottom edge of the header .

  14. Elliot Jay Stocks

    Elliot Jay Stocks

    17 September 2007 @ 03:59PM #

    @ Steve: Thanks for the kind words. Could you try refreshing the page, please? Because I actually replaced the logo image with a transparent version a couple of days ago to solve that problem and I’m wondering if you’re viewing a cached version.

    Please go here first so that your browser sees the newest version of the logo, and then try going back to the site and refreshing. If you’re still seeing it after that, please could you e-mail me a screengrab? Cheers.

  15. Paul Noddings

    Paul Noddings

    17 September 2007 @ 06:57PM #

    Hey Elliot,

    Fantastic work on the new site. It is looking really cool! Well done!

    Paul

  16. Steve Killen

    Steve Killen

    17 September 2007 @ 09:06PM #

    Thanks Elliot, did a ctrl + f5 refresh, that did that trick. Firefox does love its cache! I should have tried that before posting really – silly me.

  17. Chris

    Chris

    19 September 2007 @ 04:51AM #

    Hi Elliot,

    The new subdued background is great—it definitely solves your legibility issue that you spoke of. As for your old image being ripped off, you know you’re good when people steal your work.

    Anyhow, the website’s looking good, looking forward to its continued evolution.

    Chris

  18. Elliot Jay Stocks

    Elliot Jay Stocks

    20 September 2007 @ 02:37AM #

    Thanks ever so much, guys! I honestly really appreciate the kind words. :)

  19. Josephgene

    Josephgene

    22 September 2007 @ 01:02AM #

    Question – Are you willing to put this theme up for use of the public?

  20. Zinni

    Zinni

    22 September 2007 @ 09:44PM #

    I love the comments change, this is really interesting and makes a huge difference in between posts. Any designer should love the intelligent use of negative space ;)

    I know that this was only a minor portion of the article, however I am going to have to request a write up on the move from wordpress to Expression Engine. I have been trying to decide which one would be an appropriate choice for my personal portfolio site (long outdated and completely not valid xHTML) I think this article could really help other designers like me that don’t understand all the details of the process.

    As of right now I need to figure out which one is worth the investment of time to start learning…

    Once again, great job and thanks in advance.

  21. Elliot Jay Stocks

    Elliot Jay Stocks

    23 September 2007 @ 03:39PM #

    @ Zinni: Thanks for the kind words. I’m glad you see the new comments design as an improvement! Um… I haven’t moved from Wordpress to Expression Engine, though; it’s something I’m thinking about doing. What I actually said was:

    “[…] I’m planning version 5 right now. I think the biggest decision will be whether to move from Wordpress or not. It’s great for powering the blog, but other pages (such as a decent templating system for the portfolio) might benefit from the power of a whole-site CMS such as Expression Engine.”

    But, if I do make the move, I promise I’ll write it up! :)

  22. Mike Guenther

    Mike Guenther

    11 October 2007 @ 11:14PM #

    Hello Elliot,

    I stumbeled across your site the other day and just wanted to say great job!

    You are a very talented designer!

  23. Elliot Jay Stocks

    Elliot Jay Stocks

    12 October 2007 @ 04:15PM #

    @ Mike: Thanks very much! Good to have you here! :)

  24. modifoo

    modifoo

    26 November 2007 @ 06:57AM #

    Phantastic Design. And unlike so many of those downloadable WordPress themes, this is totally thought through.

    Just wanted to bow my head. You have talent and ability.

    So many fine touches. Like the translucent green on the comments, or red, yet unintrusive, markers on links. Wow.

    Even preview when typing comments.

    And Thank You.

    Very inspiring.

    (And if you ever change your mind about making your theme available to the public… I for one would very much not mind. Would also be great as a learning example.)

  25. modifoo

    modifoo

    26 November 2007 @ 06:59AM #

    (scary, my previous comment got labeled 666…)

  26. Dodik

    Dodik

    18 December 2007 @ 09:22AM #

    It’s great job, Eliiot. I like this design

  27. chris

    chris

    30 December 2007 @ 09:39PM #

    i think the new design is cool but:
    - you need to change the background image or the text color.
    - i think i will vote for sorting the portfolio by categories instead of dates.
    - the comments section is fine.
    - what makes expressionengine better than wordpress? i hope you will write a blog entry soon about that expressing your thoughts and the reasons why you think in moving to expressionengine.

  28. LeanneC.E.

    LeanneC.E.

    31 December 2007 @ 12:50AM #

    It looks great! I love the mixture of stockphoto and vector at the top. Great work!

© 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.