Eric DeLabarWeb 2.0 from a Web Purist and J2EE Developer

For those of you visiting to check out my changes for the May 1st Reboot, I’d like to welcome you and encourage you to subscribe to my RSS feed. Sadly, I did not get my design totally finished thanks in part to life in general. If you’ve seen my design before the reboot I think this is a definite improvement; however there are plenty of tiny details that still need a lot of work.

Since I’m away for most of next week at the JavaOne conference in San Francisco I’m planning to do a bit of work on this site while in the air. So, with any luck it should be prettier than it currently is sometime next weekend. If you have any comments, concerns, or suggestions, please feel free to leave a comment on this post. This is a design in progress and I welcome any and all criticism.

Regular updates should now resume since I don’t need the reboot splash screen any longer, so check back tomorrow for a brand new article.

Today is the last chance for a whole week to check out my archives, tomorrow at 10AM EDT this site will be replaced by the May 1 Reboot placeholder as per the rules. After that and until May 1, I will be working furiously to design and implement the best website I’ve ever done. So, check back on May first at 10AM EDIT (2PM UTC) to see the first official release of EricDeLabar.com.

It always struck me as odd, but I originally had three types of feeds on this site, Atom, RSS 0.93, and RSS 2, this is accomplished quite simply with the following code block in WordPress:

10
11
12

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" >
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" >

That code was only really there because the theme I used as my base had it, so I kept it without thinking. I run my feed through Feedburner, which has a feature that is supposed to provide the format that your reader can read, assumably making multiple feed definitions unnecessary. I’m not sure how that works, or if it works with the Feedburner plug-in for WordPress, but it’s turned on in my Feedburner account.

While hacking feeds out of my head I chose to keep the RSS 2.0 feed because WordPress seems to favor it based on URL structure; with RSS 2.0 being /feed and RSS .92 and ATOM being /feed/rss and /feed/atom respectively. With that answered, I suppose the next question is “why?” Well, mainly because of this article by Dean Allen over at Textism. It just makes sense, and from a usability standpoint, the easier to subscribe to my feed the better! Less choices equals easier to use, so maybe this will help my subscription numbers if people can subscribe without thinking.

With that being said, I initially 301 redirected the other two feed URLs to the RSS 2 URL using the technique described in this post, which I’m assume should work perfectly, but I’m guessing that is unnecessary, since the URLs themselves will continue to function thanks to WordPress’ default behavior, so I took the redirects out. If anybody has any problems accessing the feed, or thinks my methodology should change, please enlighten me with a comment to this post.

Without any CSS or fancy design, this site is pretty ugly. As the current ugly kid on the block I cry myself to sleep every night and my wife consoles me by saying that it’s what’s on inside that counts. “Google likes your content, just ignore those mean kids, one day your CSS will change and then they’ll appreciate you for who you are,” she says. I sort-of believe her and resolve to finish my design by the end of the month, but the same thing will just happen tomorrow. The thing is, I just can’t help but ask myself, “self, does your content suck or is social media just that shallow?”

Here’s the thing, I’ve submitted three of my articles to Digg, one that I thought was pretty funny, one that was pretty technical, and one that was just on a whim to see what it would do. I followed the rules and didn’t blindly submit every post, I think I wrote a decent description for each, and my analytics account says I had some people click through. So, I managed to generate some interest, but, once they were there, they spent an average of ten seconds and then bounced immediately! I know for a fact that the posts took longer than 10 seconds to read, so what happened?

Speed shouldn’t be a factor, I’ve benchmarked the site, since there’s no CSS or JavaScript to download and process, and very few images, it’s really just a matter of downloading the content. I even have wp-cache installed and enabled so this site should be as fast as static HTML. Does that mean people are just so disgusted by my 1995 design sensibility that they can’t even stand to read an article they were interested enough in to click on? Would I be better to enable the default Wordpress theme? Is it a readability thing? I know I’m not using 80-character lines, but I don’t think it’s that hard to read. Or maybe my content just sucks and I should go back to being a mindless programming drone.

Social media I implore you, answer my question. Are you too shallow to vote for posts on this site because they’re ugly?

To continue the discussion on the design of this blog, I’m going to take a moment and step onto my soapbox. But first, a brief introduction to the topic at hand.

I think I noticed this whole grid revolution back in December 2006 when Cameron Moll mentioned it in his article Gridding the 960, based on the optimal layout width for a 1024px wide screen. I was interested, and sites designed using a grid seemed pretty sharp, so I added it to ma.gnolia and moved on. A few months later I caught an article on ALA about the baseline grid, a post to 24-ways about vertical rhythm, and after that a nice 7-step guide to creating a grid-based design, and a great piece on incremental leading. Between these five articles, (and about a year’s worth of time) the concept finally clicked in my mind.

Enter the frameworks. Sometime in the last few years a number of CSS frameworks have emerged, including frameworks from giants like Yahoo, and brand-new frameworks like the 960 Grid System. The most popular, as far as blogosphere-based chatter is concerned, is probably Blueprint, which recently released version 0.7, giving you a pretty good idea of how young this technology is. So, with (at least) three frameworks out there you must be saying. “Surely one is a suitable fit for EricDeLabar.com?” That’s exactly incorrect, at least for Blueprint, but not for 960.gs and here is my reason why.

Semantics. Please, put the pitchforks and torches down, I’m not saying that Blueprint and 960.gs are is un-semantic, I’m saying they it could be more semantic. I’m a strong believer in separation of content from presentation, and IMHO, this is the reason why CSS is as amazing as it is. If you’re not 100% sold on this concept, check out Zen Garden and order yourself a copy of Dave Shea and Molly Holzschlag’s book The Zen of CSS Design. For today’s post I’m going to ignore YUI, mainly because it’s too huge for my taste, and concentrate only on Blueprint and 960.gs.

Both Blueprint and 960.gs use HTML class names to specify the width of the grid, these class names are specifically named with the number of columns the content block is supposed to span. This violates the separation of content from presentation because now the HTML contains instructions on how to render the page. That’s it, my two-sentance, semantic-web-purist’s argument against the current batch of CSS frameworks. Can it be fixed? Of course it can! The easiest way to do this is probably with some sort of script-based solution that provides CSS post-processing. Initially I thought of CleverCSS, but then I realized that the newest version of Blueprint already does this! Imagine my surprise when I discovered this wonderful fact a half hour into writing my post! Oh well, I’ve learned something, and the web is a better place, so I’m going to post this anyway, send you over to the details on the Blueprint Compress ruby script on jdclayton.com, and formally state that I stand corrected and I will probably be using Blueprint for this site’s layout.

Ok, I’ve been blogging for two weeks now, I think I may have the habit for it. I say this because if I don’t have a post done by my second cup of coffee I start twitching uncontrollably. Yeah. Seriously though, I’m a procrastinator, if I don’t have a deadline I will simple put things off forever, so in order to get this site a skin, I need a hard due date.

So, in honor of this year’s May 1st Reboot, the new style is going live on May 1st. I’ve signed up, submitted this site, and I now have roughly 29 days to make it something other than black on white. Now that doesn’t mean it will happen any time soon, in fact I’ll probably do most of it the week the site is down in preparation for the reboot, but I can assure you, May 1st is it, no more black and white.

Yesterday I listed quite a few sites from which I picked a few aspects of design that I liked. I was looking more towards the layout and feel than the color but I did note a few palettes that I liked. Yesterday evening I was shopping in my local Old Navy and I noticed the colors being used in the decorations for the men’s side of the store. A solid brown wash with blue and white “boxes” and orange circles. I liked it so I snapped a quick picture with my phone and after playing for a while with different shades I came up with something like this.

It’s pretty abstract for now, and it doesn’t offer any of the texture or depth I’m looking for, but as a palette, I’m very happy.

To add to my list from yesterday, I love the footer on Design View and 5thirtyone’s homepage is amazing (Derek Punsalan’s portfolio is also very impressive, I love the header and footer, but they’re not really what I’m looking for). Of course since I’m considering brown, I have to mention UnstoppableRobotNinja for its layout and sort-of brownish color scheme and Jeff Croft for his recent redesign and advocation of brown websites.

After an hour in the Smashing Magazine archives, I’ve narrowed my inspiration down to roughly 65 sites. Yikes. In general, I’m feeling a little more locked down for what I’m looking for, definate use of textures and depth, slight grunge style, and a not-so-blog layout. I’m thinking three columns for the home page, possibly elastic, articles on the left, menus, etc. in the middle, and tumblog on the right. Not sure if this theme is going to carry off this page though.

But anyway, without further ado, here’s what I’ve found:

Header

• Kara Burke Illustrations – Love the texture and color, the grunge down the right is cool too.
• Brandon Muth – Simple Web 2.0 style, love the typography but contrast is a little harsh at the bottom. Specifically like the subtitle.
• EvanEckard.com – The menu is cool, and I like the logo.
• cameron i/o – I love the horizontal rule and the brightspot is very slick. Logo simplicity works well too.
• Toggle Design – Like the watermark circles in the upper right.
• TNTPixel – The stapled subtitle is cool, and the texture and depth give it an amazing paper-like feeling.
• adi Pintilie – Love the tabs, the angle is cool.

Layout

• Schneeballschl8 – Love the three column thing with dueling content.
• afasici papuasia – Love the vertical logo and high-contrast between the primary and secondary content.
• I am Jeriko – I love the sunbursts and texture,the locked background is pretty slick. Blogroll in the footer is cool too.
• blog.critical – Clean and grunge.

Footer

• Wilson Miner Live – I love the Ephemera section and concept.
• SamRayner.com – The grunge-type footer is cool, again with the music/reading recommendations.
• Verbalized – Playful and colorful, not quite sure if this will fit, but I like it.

Secondary Content

• SamRayner.com – The watermarks in the right nav are a nice touch.
• Squawk – Subtitles are cool, the bullets on the link-list are very sharp.

Overall

• Design*Sponge – Love the texture.
• Blog What? Design – Texture and depth, a little bit of reflection on the headers, and the post-ending glyph is a neat touch. Contrast and typography are beautiful.
• eleven3 – I just love it.
• grantmx – The feel I’m looking for, clean and grunge at the same time.
• Blogsolid – I’m torn on this one.
• sr28 – Grunge. Web 2.0. Texture. Depth. Perfect.
• 31Three – Love the color and texture.

In case you’re wondering, this site has no styles applied to it. I’ve done this so that I can craft the XHTML and WordPress theme to perfection. After I’m happy with the markup, I’ll begin making it pretty. I swear, I’m really going to do it this time. Changes are coming down the pipe, including the start of a few new projects like a WordPress theme and some plugins to make WordPress behave the way I think it should. I guess only time will tell, but hopefully the next post to this blog won’t be in a year…