Elliot Jay Stocks

The new version (4.5) of elliotjaystocks.com

Written at 6pm on 15.09.07
Filed under Web Design / This Site / ALL CATEGORIES
29 comments

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

Comments RSS | Jump to the comment form

• Kyle Meyer

  15.09.07

  

  #

  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. :)

• Mitch

  15.09.07

  

  #

  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.

• Michael Montgomery

  15.09.07

  

  #

  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.

• Elliot Jay Stocks

  15.09.07

  

  #

  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!

• Malarkey

  15.09.07

  

  #

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

• Elliot Jay Stocks

  15.09.07

  

  #

  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. :)

• Sam Rayner

  16.09.07

  

  #

  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.

• Mitch

  16.09.07

  

  #

  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.

• Elliot Jay Stocks

  16.09.07

  

  #

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

• Mitch

  16.09.07

  

  #

  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.

• Matt Munsey

  16.09.07

  

  #

  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.

• John Arnor

  16.09.07

  

  #

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

• Steve Killen

  17.09.07

  

  #

  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 .

• Elliot Jay Stocks

  17.09.07

  

  #

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

• Paul Noddings

  17.09.07

  

  #

  Hey Elliot,

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

  Paul

• Steve Killen

  17.09.07

  

  #

  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.

• Chris

  18.09.07

  

  #

  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

• Elliot Jay Stocks

  19.09.07

  

  #

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

• Josephgene

  21.09.07

  

  #

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

• Elliot Jay Stocks

  21.09.07

  

  #

  @ Josephgene: Please see the FAQs.

• Zinni

  22.09.07

  

  #

  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.

• Elliot Jay Stocks

  23.09.07

  

  #

  @ 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! :)

• Mike Guenther

  11.10.07

  

  #

  Hello Elliot,

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

  You are a very talented designer!

• Elliot Jay Stocks

  12.10.07

  

  #

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

• modifoo

  26.11.07

  

  #

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

• modifoo

  26.11.07

  

  #

  (scary, my previous comment got labeled 666…)

• Dodik

  18.12.07

  

  #

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

• chris

  30.12.07

  

  #

  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.

• LeanneC.E.

  30.12.07

  

  #

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