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:

  • 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 on December 16th, 2006

kel

Excellent! Also love the funny quotes.

2 . Emil Stenström on December 17th, 2006

Emil Stenström

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

3 . Nate K on December 17th, 2006

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 on December 18th, 2006

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 on December 18th, 2006

Doug Karr

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

6 . Ruediger Haupt on December 19th, 2006

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 on December 19th, 2006

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 on December 22nd, 2006

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 on February 9th, 2007

Mike Papageorge

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

10 . Curt on February 21st, 2007

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 on May 14th, 2007

Damien Jorgensen

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

12 . JusJane on January 29th, 2008

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.

Comments are closed, but I'd still love to hear your thoughts.