Coding with Jesse

The New Design

December 16th, 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:

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.


Interested in web development? Subscribe to my newsletter!

Comments

1 . kel at 2006-12-17T01:02:53.000Z

kel

Excellent! Also love the funny quotes.

2 . Emil Stenström at 2006-12-17T07:57:28.000Z

Emil Stenström

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

3 . Nate K at 2006-12-17T15:18:03.000Z

Nate K

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

Nice work.

4 . Diogo Chaves at 2006-12-18T13:11:10.000Z

Diogo Chaves

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 2006-12-18T17:54:15.000Z

Doug Karr

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

6 . Ruediger Haupt at 2006-12-19T16:54:33.000Z

Ruediger Haupt

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
Dipl.-Phys.
Dahlienstr. 3
D-76327 Pfinztal-Berghausen
[email protected]

7 . Jesse Skinner at 2006-12-19T17:48:48.000Z

Jesse Skinner

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 2006-12-22T09:08:34.000Z

nitinpai

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.

Cheers!!

9 . Mike Papageorge at 2007-02-09T22:29:02.000Z

Mike Papageorge

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

10 . Curt at 2007-02-22T00:33:11.000Z

Curt

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 2007-05-14T20:12:59.000Z

Damien Jorgensen

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

12 . JusJane at 2008-01-29T05:17:52.000Z

JusJane

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