With any creative work, the longer you expose yourself to it, the more stale it becomes. That’s why, about three months ago, I got the itch to redesign my site.

So here we are, one year ago and change I launched version 2.0 of eleven3. Today I launch version 3.0 – and yes I am just as excited as my last redesign. There are a lot of reasons for my excitement, but mainly it’s just a new look, a new focus, and more flexibility. Gone is the rigid and closed-source Movable Type and arriving is the flexible, fluid, WordPress.

Continue reading for the off chance of relating to the requirements of the relaunch, the design phase, the challenges of coding the front-end, and the use of WordPress and a plethora of plugins that now make up the site. A lot of work went into it, my hopes are that it is well received.

Redesign Requirements

The Tools
There are many examples out there of great tools facilitating great work – but let’s not forget the old adage, “It’s a Poor Craftsman that blames his tools.” I had become the poor craftsmen. Movable Type was my tool and I had grown fully tired of it. It kept timing out when I created new entries and the comment spam kept getting worse and worse. Overall the system felt bloated and rusty. In the end – your tools can put you in a rut, the old adage is only half true.

The Focus
If version 2.0 had something to say to new visitors, it would have been, “Hey! Look at my portfolio.” My life has change considerably since then and the portfolio is no longer my focus. There are two main reasons for this change. After blogging for about a year I found out how much I really enjoyed it, and then I realized how secondary and unimportant my blog seemed in the context of the rest of the site.

Notice the hierarchy of the page and the prominence of the portfolio.

My content wasn’t really findable and old posts just seemed to die. My primary focus in the redesign has been to put the spotlight on the content I am generating, both old and new.

The other reason I have decided to place my portfolio as a secondary element is due to the fact I have started a creative shop called We The Media – this is where the main body of work will reside. I will discuss WTM and it’s goals in another entry.

Inspiration and Design

There were many steps and components to the project – but I would say one of the most important is the feedback I received from some really talented designers. Without them pushing me to explore further, I may have stopped short of what I feel has evolved into a solid site. While my name is on it, it was a group effort.

Sketches
As with any web design project, I started by sketching out a few ideas in my book. I will be the first to admit that my drawing skills directly straddle the line between almost mediocre and really really bad (ironically my webdesign skills were described the same way once).

This sketch was nowhere near my final design other than in layout, initially I wanted to do something more ornate.

Inspiration
Danielle, my fiancee, came home one afternoon with a pile of old magazines from the 40′s, 50′s, and 60′s. Immediately I discarded the vintage coolness factor and traded it in for the, “Where are we going to put all this crap,” attitude. As always, I was proven wrong and over time I grew to love these magazines. The ads were so rich and copy-driven, the pages so big, and the content had substance. So one night I started scanning them in and collaging them together in photoshop. This ended up being the foundation for the site.

My good friend Nicholas Galanin should write about why I chose to use those ads – he has a way of describing his work that gives it depth and artistic merit. Me? I just say things like, “I used those ads because I thought they looked cool.” Lame lame lame.

The Grid
After being exposed to Khoi Vinh’s gridding exercise from SXSW ’07, I have applied it to everything I do. I usually opt for the 12 column grid and this project is no different. What a wonderful approach. For those Photoshop users out there, here is a great little plugin for setting up a quick grid, courtesy of Andrew Ingram. I’ve never heard an argument for not using a grid – but I am certainly open to it.

The Elements
Tape – My early comps had tape in them – it just wasn’t the masking tape. It was more like the transparent tape with lines in it and is really hard to tear. It also was really hard to make it work – which is why it was eventually ditched.

The masking tape was an evolution from that and I am quite happy with the outcome, for now at least.

Rounded Corners – The first version I did felt really boxy. It was one of those things you feel, but don’t necessarily have the courage to overcome till someone says something. I slowly migrated from the abrupt edges to the rounded corners. While it may not necessarily go with the look and feel of the ads in the background, it does separate the side bar in a way which gives it a “site within a site” feeling. A goal I wanted to accomplish with the new sliding sidebar approach I am trying.

The Side Panel - I’ve been using mootools for a few projects lately and as stated above, I am experimenting with a new solution to avoid the long scrolling sidebar. I’m not a fan of blogs that scroll forever, unless one updates the content more than once a day.

By creating a consistent look and feel, I was able to have continuity across the four panels and allow the user to access the information without leaving the page or having to scroll down. It also separates the content into groupings of information that become clearer by looking at the navigation. What’s worse? A click or a scroll? Who knows, but what has a fun factor?

The Carpet - It was around 2am when I came across an old advertisement in a vintage Esquire Magazine. For many reasons, it seemed like the perfect footer for the site. It was greeny, shaggy, and had the little up curl which had so much potential for customization. Eventually it became what is visible now.

I think it’s a carpet ad, but I am not totally certain.

Front-End Fun

Browser Compliance
Ask anyone who builds websites what the biggest thorn in their side is? I have no doubt the majority will likely name Internet Explorer 6.0. At the time of writing this post, IE6 has 36.6% browser share. I’m not sure what the breaking off point for IE6 users will be, but for my personal site – it was almost 36.6%. Eventually I caved under statistical pressure and rest assured the site is working just fine in Internet Explorer, but it did not get by without my nasty poem.

MooTools and (Slimbox)
I wrote code for the sliding panels not too long ago and used it for a few projects. Once I had the moo.fx implemented, I moved on to setting up lightbox – another favorite piece of JavaScript trickery. Unfortunatly, MooTools and Lightbox didn’t seem to be compatible, and that is when I stumbled upon Slimbox – a Lightbox clone. Once again I was happy having my fade to black photo slides.

Standards
I was so tempted to keep this site as “Transitional” and keep my target=”_blank” tag in some of my external links, yet I decided to go strict. Why? So I could shake my tail feathers just a little bit more. Seriously though, standards are very important and if I am going to sell clients on their importance, I have to walk the walk myself.

A splash of WordPress

This was my first attempt at migrating a Movable Type blog from a WordPress blog. It was surprisingly easy and it makes me very happy to be in the WordPress camp. There are a few reasons for this.

Ease of Maintenance
I handle all WordPress maintenance in Dreamweaver and do not have to rely on an internet connection to get between different templates. I know Movable Type had a way to do it – yet it seemed like an afterthought. Using a WYSIWYG editor to edit code is nonsense. I had gotten to a point where I hated logging into make any edits. Not to mention having to rebuild the entire site for things as simple as a date change.

MT4 has been released and I hear good things, but as I stated – it was too little too late for me.

Extensive Plugin Library
I am using several plugins to make this baby hum. The development community for WordPress is huge and getting plugin to work is much easier than in Movable Type. Just about every little thing I had the, “I wish it did this,” thought for was actually floating around somewhere and just needed to be tracked down. Brilliant!

Putting it all together

After extensive testing, a migration to Media Temple, and a lot of little tweaking, eleven3 Version 3.0 is ready for all the scrutiny and praise it deserves. It will always be a work in progress, but at least now I feel liberated to make the progress. Now if only I could figure out a way to make the size of the document go from high to low without sacrificing aesthetics or functionality.

I decided to write this post because I always liked it when designers wrote out in detail their processes – it’s how I learned myself. For some people, this will be a big repeat of what they already know. But I am hoping that others will find it useful in discovering their way as a designer. It’s a great field and everyday I feel fortunate getting to do something I absolutely love.

I had a colleague ask me about this site, asking if it was mine. While I do live in Portland, I do love CSS, I am shocked that Google would bestow this honor upon me. And as James Hall, a CSS guru from The Good Harvest, told me, blogging about the fact I am known for Portland and CSS will make my Google Search ranking even stronger for those terms!

So here I am. Feeling fancy! Indulge me in my narcissism and run a search for portland and css. Oh happy joy day.

Ok, back to the code.

——

Update: Ok, no longer number one, stupid Google! That lasted all of 20 minutes.

How does that work? I grumble and complain, I tell folks some of the horror stories of Microsoft and how they’ve gotten too arrogant to adhere to the “hey let’s get on the same page” policies of the little guy. In doing so I have switched tons of people to Firefox. I remember when people would get joked on for using AOL as their web browser, the beginning of the end for AOL. I’m pushing that same concept amongst friends, oh you still use IE? And it’s pop-up blocker? And it’s anti-spam-phishing-spyware bundled package with activeX? It looks like we will see more gmail and thunderbird users out there. I hadn’t had any qualms about Outlook until now. Microsoft, stop pissing off the influencers!

The gist of the conversation I remember, the rest was lost in a bit of a haze, so please forgive the generalizing without examples. Essentially what I got was this, yes, we work at Microsoft, there are some good things here, but Google/Firefox/Opensource/Apple/Web Standards are awesome! There is something troubling in this thought pattern.

Take someone like me, I am extremely passionate about what I do and the web. If someone like me were offered a job at Microsoft to do what I do, I would be leary. Why? Because I don’t see passion coming from Microsoft. My two conversations illustrate this to a certain extent. Both of these individuals lit up when we started talking about OpenSource, Web Standards, Apple, or Firefox. I’m curious to know how many Microsoft Employees get excited when they start talking about their own products. Could someone really get excited about releasing a bloated browser full of security holes that isn’t even up to web standards? Everything I have read indicates scope creep nightmares within Microsoft and there is no better killer for motivation.

Back to me. Personally, if I was working on a project, and it’s release got pushed back two years for bureaucracy, for competitors products features, for scalability, for compatability, for office politics, for whatever reason; I would be thinking about how cool my competitors are too. Google releases products and updates blazingly fast. Apple releases products and software at the same speed. The OpenSource movement is so egalitarian it’s hard not to be enamored by it and have a win one for the little guy attitude.

Microsoft has to convince Microsoft to change, it would be nice to see a Microsoft who makes decision for the good of the community, not maximizing shareholders wealth. And in the end, good community decisions make for good business. I don’t see that happening anytime soon. To the two of you whom I met, I would love to keep the dialogue going. Chances are, you have something to say.

I’m wondering when it will be ok to drop the PNG hack entirely and tell people if they want to see the sites, upgrade to Internet Explorer 7 (or firefox). As I have still received complaints that sites don’t look good on Internet Explorer 5.5 on a Mac, it will probably be awhile.

For those who don’t know the hack it looks a little like this:

div#mask {
background: url(images/mask.png) top left no-repeat;
}

/* FOR IE 5.5+ ALPHA TRANSPARENCY */
* html div#mask {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/mask.png”, sizingMethod=”crop”);
}

As one can see, assigning the background to none and pulling in the automagically gets png transparency working in IE. The first div is how it should be, the second div is how it is. For the sizingMethod, one can use crop or scale. Scale is for repeating backgrounds, but instead of repeating, it stretches. So this only works for some sites, not all.

Good luck and may the future bring us more web standards.

To take it one step further, we can also take sed RSS feed and pull it into our own blogs/sites. Kind of like the homepage of this site. What one sees is the parsing of three RSS feeds, one for del.icio.us, flickr, and last.fm.

I added those on there because I wanted all the time I spend doing other things on the web to reflect on my blog. Yet, in doing so, I ALMOST had to sacrifice something else that was very important to me. Standards.

The first issue I dealt with was the RSS feed for flickr. For some reason it isn’t looked at as valid markup. I had to run it through a feedburner account to pull it into my blog and not break my site. In the end it was a good solution as I now have big brother tracking on everyone that subscribes to my photos. And to be honest, I think it is just Magpie RSS that is pinging the feed to update it. I can’t imagine subscribing to someone’s photos unless…perhaps I was stalking them.

The second issue was with my del.icio.us feed. This is a perpetual problem and something I have to take extra steps to avoid. I use Firefox and I have the del.icio.us tag extension installed. It’s way too easy to tag a site and add it to my growing list of bookmarks. The problem lies within the sites I tag and their title tags. For some reason people throw funky characters into their tags. Why can’t they change their ways to suit me???? (-; Anyhow, when I bookmark something, I am on the lookout for renegade characters that break my validation.

I really only had those two issues in regards to feeds, yet I have another one that has been a thorn in my side for building blogs. That thorn is YouTube embed code. Now don’t get me wrong, I love YouTube and have been sucked in plenty of times surfing between clips. But their code they are passing to the millions of users to post on blogs and myspace breaks validation. I could care less about MySpace (67 html validation errors on my page) but YouTube I expect more from.

In all honesty there is more to the problem than just YouTube. It’s flash, it’s validation, it’s Internet Explorer, and on and on. In the end I cannot build a blog for a client that is completely standards compliant if they want to paste in YouTube code. It’s already a stretch with them entering in their own content.

What’s the point to this rant? James Hall is the point. James Hall is the solution.

For anyone else who wants their site standards compliant AND wants YouTube, a solution is out there.

–

Update: To illustrate another case of external content breaking my validation, Lupe Fiasco coming in through last.fm has a problem. Looks like I am going to have to stop listening to that album.

In my last post I talked about the entry fee for getting a job at my company required being up to par on web standards. Yes, we recommend one uses firefox with the web developer toolbar as well. Oh and there is also the useful Measure-It! extension. With all of these tools in one’s pocket, the question becomes, why haven’t some people caught on?

Microsoft Internet Explorer. This would require an entry in itself.

Perhaps one day all sites will be coded in valid css/xhtml and the validation links at the bottom will seem innappropriate and unecessary. Either way, Microsoft has a lot of making up to do to those of us in the web space. Perhaps they could make their browser standards compliant, and make something as appropriate as validation links go away.

Or they will just be Microsoft, and we will have to fight the good fight for the long run. I hope they come around.

(Checking out IE7 soon, somewhere I saw a dual install for both IE6 and IE7, so what happens to my IETab extension??)

Since the launch, of what James Hall defines as a “bloatfolio” (i believe he has a new one coming any day now), I have been engaged in a few practices that I believe are succesful traffic drivers to this site.

What follows is a list of what I have done to drive traffic. I was toying with the idea of making it a top ten list, but I think I will save my big top ten list for, “Top 10 reasons why I am the most amazing blogger on the internet” post. Ha! Anyhow…

1) Aesthetics - I can’t stress how important this is to a site’s success. Whether this be for one’s own portfolio or for a client’s site. I work in an agency (i’m a xhtml/css junky) and so many times I have seen our designers come up with unbelievable compositions, only to have a client splash a little bit of bad taste onto it. And then I will proceed to watch the designer become jaded. This is not how we want to work! It’s very important from the start to establish the designer’s importance in the success of the site, don’t tread on that. A aesthetically pleasing site will attract people from all over.

2) Solid CSS/XHTML – There are two sides to this; search engines and galleries. Writing good markup and moving away from tables allows the search engines to spider the site quickly and find the relevant content. Placing all of the content in the proper order and assigning relevance is about the best SEO you can do (white hat). CSS galleries are fantastic, they allow good work to be noticed within the community.

3) Submit It! – Here is where you can build your tidal wave of initial traffic. If you have the first two things on this list covered, then you should be able to gain entry into the growing list of CSS galleries out there. Steve James over at epicunion turned me on this. One day I was sputtering along with my measly 15 hits a day for HomeSkilletFest and the next day I had thousands of hits. I looked at my traffic and it was all coming from cssremix.com. Now I search out galleries. They are a great way to boost your traffic and gain recognition from the community.

I was going to list out a few of the sites, but then stumbled on this link. Good luck.

4) Tag It!- I have a feeling when the rest of the world really catches on with del.icio.us or any other social bookmarking service, things will start moving very quickly. Never before have we had this much relevant data delivered to us on a silver platter. So what does tagging yourself mean? For me it means tagging many of my blog posts in del.icio.us with relevant tags. One must have short term hopes of popping up on someone’s RSS reader and long term hopes of being found via del.icio.us search. This isn’t spamming, this is helping people find more information in their topic of interest. Want me to find you? Tag your site with CSS, webdesign, or inspiration. These lists move quickly, but if your site is relevant, perhaps they will tag it. The ball really gets rolling when many users are tagging your site.

5) Digg It! – Ahhh digg, the much loved, much hated, social news network. I wasn’t an early adopter of Digg, it didn’t really show up on my radar until May 2005. However, when it did, I was hooked. Some of that early relationship bliss has faded, yet I still feel Digg is a very cool site and also very useful. Digging yourself means submitting your posts to digg. Yes, it may seem like shameless promotion, but waiting for someone else to do it could take a lifetime. I get about 8% of my traffic from Digg. Not because I have ever come remotely close to the homepage, but because my content is there, and is findable. I am going to Digg this entry as soon as I finish it.

6) Create a top # list – I guess we are all suckers for lists. I see them come through my RSS feeds and I can’t help but clicking on them. So here is my top six list for building a tidal wave of traffic to your website. Yes it is shameless self promotion, yes it’s not as pure as if people just found your site and liked it. The truth is, there are a lot of us out there trying to gain an audience, it’s competitive. It is essential to use the power you have.

The reason I bring this up is the fact I am becoming a bit of a code snob. Ugly, sloppy code really grosses me out. There was some code pulled up on a projector today and I had to turn away. So when did this happen for me?

I was introduced to the wonderful world of CSS about two years ago now. Before that I was building sites like everyone else, tables and spacer gifs. I can completely understand the necessity of those means before CSS came along, but now I can’t bear to work like that. Seperating design and content is essential to get past any sort of design changes one has to a multipaged website.

Thought One – Applications.

One thing that I have come to find over the last few years of being a “professional,” is that I am not so good at writing my own application code (working on that with rails, but more on that another time), but I am good at changing the look and feel of others. So what does that make me? A good skinner. And I am cool with that by the way.

So when I come across an application I want to work with, a blog or cms platform, and the code it generates is dated and ugly, I become a bit turned off to the whole idea of spending the time to learn it. Case in point: Joomla!. What a great CMS for cookie cutter websites. They have tables and other useless stuff so engrossed throughout the code, the idea of building beautiful, unique, thoughtful websites becomes extremely difficult. After two weeks of pulling my hair out trying to figure out Joomla! and delete all of it’s unecessary html code in the php, I switched to CMS Made Simple. These guys have it figured out and I was able to get done in one day, what I hadn’t been able to do in two weeks with Joomla!. Mixing html inside of your application code is a bad idea. And if you want to attract us standards guys, mixing table cells and server-side scripting is a especially bad idea.

Now all I have to do is break it to the guy who writes my checks that I had to make a call.

Thought Two – Consistency

I pat myself on the back everytime I see a valid xhtml or css link on someone’s page. It will be ok, eventually all of us will get in line with this whole thing. What the standards link tells me is this: not only will I be able to go in and change the whole page around with CSS, but they probably aren’t using tables and spacer gifs either.

In fact, I would go as far as saying their code probably looks a lot like mine. Begins with: <div id=”container”> and goes through the list of identifying everything with id’s and classes? What’s the point? The point is when the majority of the web developers start going down this path, a very important consistency emerges.

Thought Three – The Future

I have gone from hacking websites together to building websites built for the future. This entails a few things.

1) Build websites with the intention of coming back and editing it in five years. Yes, some things will change, but there will be a consistency to your work.

2) Build websites with the intention that someone will be editing it in five years. I can’t stress this enough. I work at an agency and our team just got on the same page about building sites (file structures, naming schemes, css practices, html practices) the same. This doesn’t have to be one man to rule them all, it just needs to pull from everyone’s best practices.

3) Look at the greats in this field; Shaun Inman, John Hicks, Veerle Pieters, and Cameron Moll only to name a few, see how they code, see how they design. My first portfolio pulled heavily from John Hicks, as to say, I killed cats or something to that extent. These people really have a feel for what is good.

Although this list is published, I may add more to it in the future, just because this stuff never ends.

Before the list though, I would like to thank Steve James over at epicunion for keeping me up to date on the good, the bad, and the ugly of web standards. Everytime I think I can teach him something, he ends up teaching me.

Please comment on this post if you have any feelings towards any of it.

1. The “target” attribute I feel the target=”_blank” function isn’t as obsolete as the w3c would have us believe. In all practical respects, most websites do not want to direct traffic away from their sites. While it is nice I have a flickr picture gallery feed coming to my site, I do not want to send all of my traffic from my site to flickr. With tab browsing becoming the norm (with the release of IE7 of course) links opening new tabs is not the annoyance that it once may have been. With that being said, here is the first hoop:

Strict XHTML does not allow the “target” attribute within a tags. Now, by no means did I come up with this solution, I found it here. There are far brighter folks than me kickin it on the web and I can only express my gratitude for them to share their solutions. Moving on..

Instead of using target=”_blank” one must use rel=”external”. But the fun doesn’t stop there, one also needs to include a JavaScript file on every page that looks like this.

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;

All in all, it’s a great solution to a problem, that I feel, shouldn’t exist. But that’s just me.

2. Feeds Compliance – I listed my feeds on every page with contact information. When I went to validate my code, I found the W3C really didn’t like my flickr feed. The workaround:

I opened a FeedBurner account and ran my feeds through them. Upon which, I also now have tracking for my RSS feeds. I am still not totally convinced of the accuracy of FeedBurner, but I really appreciate their effort to provide this as a limited service for free.

This particular problem brings up the lack of effort from many of the cool “web 2.0″ companies to bring their services up to standards. While I understand they are focused on their service, it would be nice to see a little more love shown to the standards community.

3. YouTube Embed – Yet to be solved. James over at The Good Harvest, is tackling the problem. More flash wizardry to come.

4 Building good clean XHTML and CSS – More important than anything I have mentioned is to practice good coding. Think about what you are doing before you do it. I am not claiming to have perfect code, but I am claiming that is what I stive for. If you care to take it there, I am more than open to suggestions on my own coding practices. Always learning…