• The New Design

    Dec 16 2006

    If you're revisiting the site, then I'm sure you've noticed the new design. If you're reading over RSS, well, then you'll have to pop over and check it out.

    I got bored last night, started sketching out what a logo might look like for The Future of the Web, and ended up sketching a whole new site layout to match it. Then I painted it in Paint.NET, was surprised how much I liked it, and spent the rest of the night wrestling with CSS until it came out the way I wanted.

    Here are a few notes on the design:

    • This was the first time I used Internet Explorer's Conditional Comments. I have a single CSS file that works for both Firefox and IE 7 (no hacks), but I use the extra CSS file to get rid of some of the png transparency files, and to fix a couple of bugs.
    • I tried to keep the HTML the same and just change the CSS. I ended up having to change a few things (the search form of course, adding some classes, moving a few elements around) but it was fairly minimal.
    • I encountered some of the strangest CSS bugs I've ever seen, like things disappearing/reappearing when scrolling down and up, or things moving around when making a link active. For IE 7, my greatest friend was zoom: 1, forcing things into hasLayout mode. This always fixed weird behaviour.
    • I opted for a fixed width design to improve readability. I think a lot of web designers developers have huge resolutions, and having the text stretch out so wide makes it harder to read.
    • I feel the site looks a lot cleaner and simpler than the original design, even though there is really just as much stuff on the page. I think this is due to the text being in a white area in the center of the page instead of stretched out filling most of the page.
    • There are random slogans at the top of the page. Refresh and collect them all!

    I'm looking forward to your comments. This is the first web design I've done that I'm actually really happy with. Not bad, I think, for not being a designer.

    Update: For those of you who are new to the site, or if you just want to compare, here is a screenshot of the old design.

  • Comments

    1. kel at 8:02pm on December 16, 2006

    Excellent! Also love the funny quotes.

    2. Emil Stenström at 2:57am on December 17, 2006

    Nice! Much brighter than that last one, much easier to read. Well done!

    3. Nate K at 10:18am on December 17, 2006

    Congrats on the re-design. I never saw the first iteration, but I like what you have here!

    Nice work.

    4. Diogo Chaves at 8:11am on December 18, 2006

    Congrats my friend! This new version is more clean, simple, and (besides your photo) sexy LOL =D

    Keep up the good work!

    5. Doug Karr at 12:54pm on December 18, 2006

    I didn't get to see the old one, but this is a really nice design - very clean!

    6. Ruediger Haupt at 11:54am on December 19, 2006

    Dear Jesse,

    please go back to your old design with 3 columns, the holy grail. This is the most elegant technique and perhaps the most sought after layout: a 3 column page with a fluid center column. Easy to understand, easy to implement.

    See: http://www.glish.com/css/7.asp

    Your new design we call in german

    "eine Ver-schlimm-Boeserung anstatt einer Ver-besserung"

    ...schlimm      =  ...worse
    ...boeserung  =  ...bad
    ...besserung  =  ...better

    In minimal form you see 1/2 information and 1/2 nothing

    3,2 cm dark blue
    1,4 cm blue
    9,0 cm white (with information)
    2,0 cm blue
    3,2 cm dark blue

    In maximal form you see 1/3 information and 2/3 nothing

    8,6 cm dark blue
    1,4 cm blue
    9,0 cm white (with information)
    2,0 cm blue
    8,6 cm dark blue

    With regards from Germany

    Ruediger Haupt
    Dahlienstr. 3
    D-76327 Pfinztal-Berghausen

    7. Jesse Skinner at 12:48pm on December 19, 2006

    Thanks everyone for your comments, and Ruediger for your extremely detailed arguments. I never knew my 3-column layout was so beautiful. Maybe I'll implement a switch where you can toggle the site from liquid to fixed-width. Any suggestions what an intuitive link/icon would look like to do this?

    8. nitinpai at 4:08am on December 22, 2006

    Hi Jesse,

    I have previously visited your site and due to your information in this site I had subscribed it in google reader. Good that you mentioned that "If you're reading over RSS, well, then you'll have to pop over and check it out." !! ..:) ..or else the readers would have been lost in wonderland.

    Umm... now coming to the layout. I am feeling a slight emptiness in this layout though the header is atractive. The earlier layout which I had seen in my first visit proved very attractive. The 3 column layout has a magic of providing more information in a page view than this current layout. Besides that the 3 column is specially suited for blogs who have large content to put on as in case of your blog. Those who have less content are pleased with the 2 column layout since it fills up the space with some design elements rather than info.

    IMHO.. i would like you improve the 3 layout design.. in my suggestion keep the font dark and background white.. otherwise the black text over blue background strains the eye.


    9. Mike Papageorge at 5:29pm on February 9, 2007

    Hmm.. Late to the party, Jesse, but I like the new design, more then the three column version. Well done!

    10. Curt at 7:33pm on February 21, 2007

    Although I agree someone with your German reader, and do like your older *design*, I felt that the previous look was too blue. I think too many sites are overusing the color blue and it's taking away from the enjoyment. In this one you are using a white background for the articles and I feel that this is good.

    As for the 3-column being the 'holy grail', I've never really held it in that high esteem. A flexible article section is good, but I agree with you: if it expands too wide it becomes too difficult to read. IMO, however, this column is a bit too thin for my liking.

    11. Damien Jorgensen at 4:12pm on May 14, 2007

    I love this new look, but it is a bit thin

    12. JusJane at 12:17am on January 29, 2008

    Your new page is MUCH better than the old.  Now if I could figure out or find a way to stop the floating layers.

    Commenting is now closed. Come find me on Twitter.