Elliot Jay Stocks

ElliotJayStocks.com version 4

Written at 4pm on 19.04.07
Filed under Web Design / This Site / That Internet Thing / ALL CATEGORIES / Wordpress
36 comments

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!

36 comments

Comments RSS | Jump to the comment form

• John Arnor G. Lom

  16.04.07

  

  #

  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.

• Elliot Jay Stocks

  16.04.07

  

  #

  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…

• Marc George

  19.04.07

  

  #

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

• Francis Booth

  19.04.07

  

  #

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

• Elliot Jay Stocks

  19.04.07

  

  #

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

• Rob Jones

  20.04.07

  

  #

  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.

• Boz

  20.04.07

  

  #

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

• Paul

  20.04.07

  

  #

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

• Elliot Jay Stocks

  20.04.07

  

  #

  @ Rob,
  @ Boz,
  @ Paul:

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

• ikram_zidane

  20.04.07

  

  #

  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

• Nick Cliffe

  20.04.07

  

  #

  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…

• TextureKing

  20.04.07

  

  #

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

  Well done!

• Rod

  20.04.07

  

  #

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

• Bubs

  21.04.07

  

  #

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

• Chucks

  21.04.07

  

  #

  Very inspirational design, thanks for sharing with the world

• daveMoore

  22.04.07

  

  #

  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

• rhys

  22.04.07

  

  #

  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!

• nghia

  22.04.07

  

  #

  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

• Andy Beeching

  22.04.07

  

  #

  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!

• Elliot Jay Stocks

  23.04.07

  

  #

  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.

• Ryan Shelton

  23.04.07

  

  #

  Beautiful looking site and great work in your portfolio Elliot!

• Erika

  23.04.07

  

  #

  Hey, great site! Amazing design. Congrats!

• Joseph

  25.04.07

  

  #

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

• Elliot Jay Stocks

  25.04.07

  

  #

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

• Sherwin Techico

  29.04.07

  

  #

  via CSSBeauty:

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

• Patrick Mullin

  09.05.07

  

  #

  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!

• Elliot Jay Stocks » Transcending CSS by Andy Clarke

  10.05.07

  

  #

  […] 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 […]

• Dominik Lenk

  10.05.07

  

  #

  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…

• Elliot Jay Stocks

  11.05.07

  

  #

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

• Tarandon

  07.06.07

  

  #

  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

• cpbocjqnoq

  18.06.07

  

  #

  Hello! Good Site! Thank you!

• Elliot Jay Stocks

  19.06.07

  

  #

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

• Robert Rodrigues

  18.07.07

  

  #

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

• adelle

  21.07.07

  

  #

  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

• adelle

  22.07.07

  

  #

  i love the background textures as well.

• Jesse Vlasveld

  26.02.08

  

  #

  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!