Some of you who regular here will already know I've been planning to redesign this site again. Well after many late nights of heavy caffeine consumption and one lost 4-day Easter weekend, here it is - stevetucker.co.uk version 12.
So what's changed? Well, everything really. I felt for some time that an entirely fresh start was well overdue. The dusty old engine used by versions 2 through 11 was never intended for any serious blogging. In fact I only built it originally for a lark about because frankly I wanted something to do in my free time. Ironic really, considering I now have none :P
The Visual Design
The most obvious difference with this new site over the old one is the new design, which I'd be grateful for your feedback on. I was recently inspired by the work of Garrett Dimon, after reviewing his website on Stylegala, and very much liked the idea of the content being the design. I'm seeing an increasing move toward this style and I do like it a lot (very minimalist). So I've tried my hand at the 'content is the design' style with my own spin on things here 'n there.
More notable design decisions were the use of lightboxes for images (I used the excellent open source Litebox script), an interactive logo at the top left of the screen that returns the user to the homepage, footer-based navigation system (which I'm usually against, but it seemed to work nicely this time), simple colour scheme, and full page 1000px width layout.
Design of the Comments
Comments are deeply integrated within the content
[click to enlarge]
I felt that one thing I wanted to achieve with this new design was to bring you, the readers, into the discussion and really make the comments a part of the article's fabric. I've achieved this through their new-found positioning, inset into the right hand side of article content. They fluctuate in their vertical position on the page depending on several factors, including:
- The size of the article
- The number/size of comments made
- The number of paragraphs within the article
I don't yet know whether this deeply integrated commenting style will work. I've never seen it done before in this way, so I guess we'll see ;)
I've also put Gravatars back into the comments using the Gravatar PS software I released a week ago.
Underlying System
The main advancement of this new system over the old one is it's now much cleaner and more efficient under the bonnet. I've treated myself to a shiny new administration console, which is already a refreshing improvement over my, urm, last system *cough*phpmyadmin*cough*. I've also finally got around to implementing article tags, which is again a long overdue staple of modern blogging.
The system also performs quite a number of repetitive and mundane tasks, such as the resizing of images and rewriting of image tags into lightbox-friendly markup, which means I can spend more time writing and less time arsing about with code.
The Bits That Didn't Make The Cut
My initial design for the axed JavaScript menu
[click to enlarge]
There are several bits from my original concept drawings that never made the final design. For example I initially envisaged a menu system appearing with JavaScript, much like you'd find with a lightbox image. However, the more I worked on the design before I'd written the JavaScript layer the more I realised that this sort of menu would only serve to hinder the user experience and take away from the site's natural simplicity. My curiosity's still nagging at me however, so I may one day give it a try ;)
Secondly I planned to make heavy use of JavaScript page transitioning effects. I wrote the software and got a working model, but felt it again was disrupting the user experience for the sake of adding a non-important visual effect. In the end I did not entirely remove this element - you can still see it as you leave pages on the site.
And that's it
I've written quite an amount of server-side software for this project, much of it which I plan to release open source in the non-too-distant future when I've got time to document it all. But in the meantime I hope you like the new version - I'm certainly pleased with it, though a lot of work is still yet to be done to tighten the design screws here and there. However as always feedback's more than welcome. Cheers :)
Dated: 15/04/2007. Filed under: stevetucker.co.uk.
Like this page? Click to bookmark it with Del.icio.us, Technorati, or Digg!
Comments
- On 16th April 2007 Andrew said:
Permalink -
That's a pretty significant change from your previous site designs.
I definitely like what you have done with the comments, putting them centre stage is a good idea. - On 16th April 2007 Lorissa said:
Permalink -
Really beautifully done Steve. I'm loving the integrated comments - it'll be interesting to see how that plays out. I really like the subtle page load as well.
Sounds like you've got a nice little system behind it all as well. - On 16th April 2007 Steve Tucker said:
Permalink -
Thanks guys :)
- On 16th April 2007 J Phill said:
Permalink -
Good stuff Steve. I definitely like the comments. It's something I've never seen before.
- On 16th April 2007 kitsimons said:
Permalink -
Nice job Steve. I particularly like the slidy-outy graphic in the top left.
I like the offset article sub-titles and pull-quote style images as well. Personally I wouldn't underline the titles (too close to links for my liking), but that's just me being very (very) picky ;-)
Keep up the good stuff. - On 16th April 2007 Richard Kimber said:
Permalink -
Looks great Steve.
- On 17th April 2007 Steve Tucker said:
Permalink -
Thanks again guys :)
@Kit: I originally wanted to underline the subtitles with a subtle light-gray border, but this border stretched the entire with of the page because of their block-level displaying. I tried inline but this took much of the control away from me in regards to margins and paddings. I'll be looking to make a few adjustments in the near-future though ;) - On 18th April 2007 Dustin said:
Permalink -
Wow, this is amazing! Haven't been here in a week and its completely different :P
- On 18th April 2007 Pascal said:
Permalink -
Haven't been back in a while - just discovered your new design. I think it's very nice - very fresh, easy on the eyes and the content/comments mix plays really nicely..and did I say I like that snazzy fading effect when you click on a link! Very cool dude.
- On 18th April 2007 Steve Tucker said:
Permalink -
Cheers fellas :)
- On 18th April 2007 mahud said:
Permalink -
I love the design. Not sure if I found your site during CSS naaked day are not, but sometime around then :)
The fade out page transistions are nice, and the expanding logo is effective, although I didn't notice it at first. I'll remember it in the future.
I think the line-height is a bit extreme. I'm sure the text would still be readable if it was reduced a full pixels.
The side comments is not an original idea, I've seen it on a few blogs now, and have done something similar myself.
But it doesn't need to be original to effective and your comments layout is lovely. and the idea behind it, to elevate the importance of the comments in relation to the original post is a god one.
Ok, I'm going on a bit here.
Great work on all the coding!
- On 18th April 2007 Owen said:
Permalink -
I like the new look Steve. It's airy in comparison to previous incarnations. The comment positioning is nice and I am a big fan of the line-height, it helps me a lot.
A few little things. The links are extremely subtle and I would be afraid they would be practically invisible on poor monitors and to some visually impaired people. I resized my window to 1024x768 and got a horizontal scrollbar; could be a web dev toolbar innaccuracy, but just thought I'd mention it. I am not a fan of the transition I'm afraid. If I had to navigate through more than a couple of pages I'd get irritated by it.
This sounds very negative so I'll finish up by saying, excellent job and the back-end stuff sounds well thought out and detailed.
Good work Steve :) - On 18th April 2007 Owen said:
Permalink -
By the way the double post is my own fault, I ignored the warning when refreshing the page. One of those days. My humble apologies :(
- On 18th April 2007 Steve Tucker said:
Permalink -
@Dustin: I get bored easily ;)
@Pascal: great to see you back again - I keep visiting your site from time to time, but its always in french! Should have concentrated at school more! :P Glad you like the fade effect :)
@mahud: Good points really appreciated mate :). The line hight was somewhat to do with the fact that my blog article are not always that long and I wanted to avoid empty-looking pages, especially when a large number of comments have been made and the page is pushed down vertically.
In regards to the comments I have seen styles side-by-side in columns. However I've never seen them actually embedded into the content itself, which is what I meant by original. If you've seen any though Id sure be interested to take a peek :) Cheers again!
@Owen: Dont apologise for the double comment - you highlighted an important flaw (which is now fixed!) - thanx! I checked out the site again on 1024 but as I suspected could not find an error. Are you sure you didn't mean 800x600? If so my stats show only a TINY minority of people use it so, what the hell :). Ill also keep the transition in mind - might have to speed it up or something. Cheers bud - On 20th April 2007 Owen said:
Permalink -
It was 1024x768 alright, but it must be something local as I tried it on a different machine and it was perfect.
- Leave your comment...