The Net is Dead - version 4.0
Filed under: design
Number of comments: 
Number of trackbacks: 
Tagged with: Welcome to the brand new design for 'The Net is Dead'. Over the past three weeks I've been spending my travel time as well as many evenings and time in the weekend on creating a brand new look for my weblog. It's been a great experience to work on this new template and I've learned a lot of new techniques in the process. I can now officially express my deep love for Prototype.js. Without this awesome piece of javascript wizardry this new template really wouldn't have been possible. This posting marks the beginning of a new and exciting period for me as a developer & designer. I've got a lot of exciting things planned for the future about which I'll write more in due time. Let's first celebrate this new design!
General theme
When redesigning 'The Net is Dead' there was one thing I absolutely wanted to preserve: the road! The 'road to nowhere' which decorated the old theme is also in my favicon and it's the most important recognizable part of my site. Originally I even wanted to use the exact same photograph but unfortunately I couldn't find it anymore on the stock exchange. Then I found the one you're looking at right now. I fell in love with it immediately as it has a somewhat more industrial look compared to the previous image. In fact I designed the whole site around this one image. I hope you will consider it an improvement. I myself definitely do.
Some design decisions
While the previous template was nice and resulted in many enthousiastic reactions from readers, it had it's disadvantages. First of all it was quite cluttered. There was simply 'too much going on' to my taste. Therefore I attempted to reduce the clutter and move things around a bit. This resulted in a tabbed interface in the sidebar which nicely organizes (and hides) the less important stuff. I dumped the calendar in favour of a recent comments lists which is nice to quickly keep track on what's going on.
Then there's the new 'big bottom'. I really love Derek Powazek's concept of 'embracing your bottom'. However, many people take this to the extreme by placing highly important content (such as a main menu!) in the bottom area. This is way too much to my taste. Instead of forcing people to scroll all the way down for a menu and other important elements I choose a 'best of both worlds' solution. There's a nice fat bottom with important content in this new design but the menu stays where it belongs: above the fold.
Since 'content is king', I decided to take the less important 'interesting reads' tidbits to the bottom. This results in visitors immediately being exposed to the real beef: the large postings. In order to force myself to only post really good articles and reduce babble entries I decided to feature only one article on the frontpage. My reasoning: If there's only one article on my frontpage, it better be a damn good one. Therefore you can expect less 'blogging' and more writing from me in 2006. As a nice side effect this also results in a rather compact frontpage which I happen to like a lot.
AJAX
This has got to be the most AJAX packed site I've ever created. While Typo, for which I designed Lush contains quite a lot of AJAX there's a difference between Lush and this design.
Typo has all the fancy stuff built in, ready to use, while Pivot doesn't have any of these 'Web 2.0 gadgets' at the moment! This posed a challenge: I had to do all dirty work myself. Luckily I already built a live search before which saved part of the trouble. The code however was kinda messy and I had a strong desire to completely separate the behavioral layer from the presentation this time around. Therefore I refactored the livesearch thoroughly.
Then there was the AJAX commenting. Typo has it, WordPress has it (if you use the K2 theme) but Pivot doesn't. Yet I just _had_ to be one of the cool kids that have AJAX commenting on their blog. It took a while and a lot of hacking but I managed to pull this one off. 'The Net is Dead' now features nifty AJAX commenting and nice error handling in it's forms. All thanks to Prototype.js and script.aculo.us. One day I might release this functionality as a separate Pivot plugin if I find a way to make it a bit more 'dummy proof'. Who knows....
Some other tech issues
I will probably be tinkering and tweaking for a while but I figured it would be best to unleash the beast since this is still the best way to find those little issues I overlooked. The XHTML is mostly valid and the javascript is completely isolated from it. The CSS is still slightly messy and you'll still find some style attributes here and there. This will be fixed soon. All in all I consider this new design a huge improvement over the previous template. I find myself learning new things and improving myself with every new design I finish which makes it very exciting to keep going, design after design.
I'm sure some minor things will change in the weeks to come and I'm sure you'll spot some problems with the site in it's first weeks. If you do, by all means let me know so I can fix or improve it!
Thank you
Some grateful words go out to the folks at the 9rules forum who gave me valuable feedback when I first demonstrated a rough version of this template to them. A special thanks to Kyle Neath for his excellent and elaborate list of tips! This is exactly the kind of stuff why I'm so happy to be part of 9rules. The community just rocks!
I guess I could go on forever in this posting but I'll leave it at this. I hope you will enjoy this new design as much as I did creating it!
P.S: for my Dutch viewers: IF you like this result you can still nominate me for a best design bloggie ;)
At 17 January '06 - 11:16 Simon wrote:
Guess it’s my turn now… ;p
At 17 January '06 - 11:47 Bob wrote:
At 17 January '06 - 12:09 Kevin wrote:
At 17 January '06 - 12:17 Mike Rundle wrote:
At 17 January '06 - 12:20 bosmeneer wrote:
Great work! Err.. hobby I mean, it is still not your work, is it? ;)
At 17 January '06 - 12:44 Saskia wrote:
At 17 January '06 - 12:50 Blues wrote:
At 17 January '06 - 13:27 Bram wrote:
I also like the typography of the website and the layout. The next version of my own blog, which I’m already working on for too long now (more then a month?), will also have less important content (like linkdumps) at the bottom and the actual blog entries at the top. Though I will place the commentform closer to the top, to attract people to leave a reaction faster.
The header part of your website is a very attractive one, a nice photo, transparent tabs etc. The bottom is nice and big, does it job well. But IMO the middle part doesn’t really impress me. In particular the comment and date blocks. They are a bit too ‘hard’, too much there. A bit more subtle would do the trick I think. A bit less contrast? For the rest big thumbs up!
Those are my two cents, not that they are worth much, I can’t do much better anyways I guess
At 17 January '06 - 13:33 Bakkel wrote:
At 17 January '06 - 14:05 Ronald wrote:
At 17 January '06 - 14:12 Bram wrote:
At 17 January '06 - 14:13 Griswald wrote:
At 17 January '06 - 14:24 Carsten wrote:
Just one complaint: for me, using Firefox 1.5 on Linux, the highlighting of the main menu items is very slow…
At 17 January '06 - 15:54 Marco wrote:
At 17 January '06 - 16:03 Marco wrote:
At 17 January '06 - 21:08 Chantal wrote:
Unfortunately the 1 of “16” etc touches the border…
At 17 January '06 - 21:51 Stoyan wrote:
You still have the old favicon.ico, maybe on purpose?
At 17 January '06 - 22:30 Marco wrote:
@Stoyan> Yep! I love the ’8 bit’ favicon and since I still have the road thing going on I thought I’d keep it
At 18 January '06 - 00:45 Pelle wrote:
At 18 January '06 - 00:52 Pelle wrote:
The comment is there though, so I think it is an AJAX problem. You might wanna take a look at it.
Finnaly, when loading this page a JS error occurs:
Line: 267
Character: 1
Error: ‘document.getElementById(...).pive_rememberinfo.0’ is empty or no object
Code: 0
I use IE6.0 on Win XP SP2.
At 18 January '06 - 00:58 MichMich wrote:
At 18 January '06 - 01:01 Marco wrote:
At 18 January '06 - 01:03 Marco wrote:
At 18 January '06 - 01:04 Pelle wrote:
It looks like it has got something to do with the trailing slash:
http://www.i-marco.nl/weblog/tags
Finally: the ‘remember this info’ checkbox isn’t checked when revisiting a weblog post, even when I check it when leaving a comment.
At 18 January '06 - 01:08 Marco wrote:
At 18 January '06 - 01:13 Marco wrote:
At 18 January '06 - 01:21 Ashtash wrote:
At 18 January '06 - 01:37 stefan wrote:
At 18 January '06 - 05:07 Geert wrote:
At 18 January '06 - 08:19 Roberlan Borges wrote:
At 18 January '06 - 14:53 Some Guy wrote:
At 18 January '06 - 23:01 Khevor wrote:
At 19 January '06 - 10:10 Matthijs wrote:
A couple of remarks, don’t know if you already know: first, the text in the comments overflows the boxes. I have to select the text to be able to read it.
Second, the contrast in the main text area is a bit too low for me. Reading a long post is quite fatiquing. Also, I can hardly distinguish links from regular text. I don’t know if I’m the only one having problems with the colors and contrast, if so please let me know, then it’s time for glasses or a new monitor :)
Now I’ll go check out all the cool stuff you build in the new site.
(btw using Mozilla 1.7.12 win XP)
At 19 January '06 - 10:15 Marco wrote:
I’d like to see a screenshot of that if possible. It sounds like some weird rendering bug.
At 19 January '06 - 11:19 Marco wrote:
At 19 January '06 - 11:56 Matthijs wrote:
It seems as like it is a Mozilla thing, because indeed FF 1.5 doesn’t show it.
At 19 January '06 - 13:14 Simon wrote:
At 19 January '06 - 13:15 Simon wrote:
At 19 January '06 - 15:03 Marco wrote:
(i think…)
At 20 January '06 - 06:32 Tobias wrote:
At 20 January '06 - 06:35 Tobias wrote:
At 20 January '06 - 06:49 Marco wrote:
Let me know if there are still problems. This really helps!
At 20 January '06 - 07:17 Tobias wrote:
At 20 January '06 - 07:30 Marco wrote:
At 20 January '06 - 11:59 Matt J wrote:
Havent been here in a little while, and while I was gone, you throw out a new design. I’m loving this new design, with the exception of a few things.
This purple is a little wierd, but the color for thie commenting section is perfect. and the fonts for the headings is not stylish at all, then again it could be that purple color.
Then again it could just be me.
Overall good design!
At 21 January '06 - 05:05 Leo Kennis wrote:
Big compliments to this redesign, and indeed, the headerphoto looks great :)
At 23 January '06 - 06:26 Ryan Brooks wrote:
At 24 January '06 - 05:21 Bryan wrote:
BUT.
Your site is HOT! :)
Great job with everything, you did an awesome job.
At 24 January '06 - 06:40 Matthew R. Miller wrote:
At 05 November '06 - 23:14 Joseph Yim wrote:
At 17 December '06 - 22:42 Joseph wrote:
Not only the fancy stuff (ajax, layout, photo…) are attractive, but also the mix and match of the theme really puts the user in a comfortable way of reading.
Good job.
BTW, I’m using Wordpress, could I adopt some of your layout design, I could really learn a lot.
Thanks for your great design!!!