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.

Feel free to include it in your IE Stylesheet:

/*

An ODE to IE6 – By A Webdesigner
—————————-
The road has been long,
full of anguish and pain.
How long will we endure,
the internet’s shame.

Once you were nice,
all light and fast.
Then came Firefox,
and lit up your ass.

Get a better browser,
the geeks have been saying.
The internet looks weird,
No PNGs displaying.

Conditional Statements,
feel like dirty code.
With anger and hope,
I write this ODE.

I create thee,
oh you dirty IE stylesheet,
With the hope of the future,
and pressing delete.

*/

I’m throwing this post out as a last resort. Somebody throw me a life ring here. Some people post solutions to problems, I’m posting a question.

Does anyone know if the most recent update to IE6 supports the “progid:DXImageTransform…” filter to get PNGs to work properly? Another potential issue could be that I am running IE6 in Parallels on my Mac. Either way, IE6 doesn’t work with any PNGs. This includes an entire backlog of sites that I have done in the past.

I’ve tried multiple things and none of the usual tricks work. Burn M$ Burn. Anyone?

** Update **

That filter uses a directx component on a video card. Won’t work with virtualization software.

Thanks Jeff.

Anyhow, what I am getting at is a few gripes I have with some of my tools. Today’s culprits are The Mighty Mouse and Firefox. When I first got The Mighty Mouse I fell in love with it. The mini scrollball and the elegance of two buttons in one were both big hits with me. However, as time goes on, I am starting to fall out of love with this piece of hardware. Firefox, when I first got it, had me singing its praises to anyone who would listen, however this too is falling by the way side.

The Mighty Mouse has a few flaws. The first is the middle click, because the scroll ball is so small, a push down is also a roll forward. It’s difficult to push it down just right without making a conscience effort. Every time I am surfing in Firefox I middle click on a link, and it does that funky up down page scrolling thing. When I go to middle click close a tab, it often scrolls to the next tab over and closes that one. This is a flaw I have lived with, but still a nuisance.

The flaw that spurred me to write this post is again associated with the little scroll ball. This thing collects dust and randomly stop scrolling down or up. Remember the old Microsoft mice, before they went laser? You could take out the little ball and clean out the insides of the mouse if it wasn’t working right? Well this scroll ball does the same thing, but you can’t open it up. I scoured the internet and the solution is this: poor rubbing alcohol on a cloth, and then turn your mouse upside down and run the scroll ball over the rubbing alcohol (helps to do it with a vengeance). The first time I had to do this was nine months into using The Mighty Mouse, now I have to do it once a month. This is annoying. Can someone please make a pretty white mouse?

Firefox, oh once so near and dear to me. I used to be a PC user and Firefox ran smoothly. Now I am on a Mac and Firefox runs like shit. The problem is, I am addicted to the Live Bookmarks and the extensions I am running.

• Better Gmail 0.7
• Colorzilla 1.0
• del.icio.us Bookmarks 1.5.29
• Dummy Lipsum 1.2.0
• Firebug 1.05
• Gmail Notifier 0.6.0
• Google Browser Sync 1.3.2
• MeasureIt 0.3.6
• Tabbrowser Preferences 1.3.1.1
• Web Developer 1.1.3

I don’t think it’s a crazy amount, but who knows. These used to work fine on a PC.

Anyhow, I’m going to try to clean out my install of Firefox and see if a fresh copy will work better. As for the Mighty Mouse, I probably won’t change anytime soon, I can live with it.

Slowly I have been feeling out the parameters of the png hack. There have been about three times where I must have spent between 3-5 hours trying to figure out why either it wasn’t working, or it was causing other weird issues. Namely the linking issue. There is a thorough guide here, a lot more thorough than anything I would write on the subject. I’m just here to complain, oh and my own solution is listed as well.

It seems if you are using the scale mode within the filter, and the element with the png is positioned relative, then the links within that element cannot be clicked on or rolled over within IE. Where does this leave us? Frusterated, disappointed, thinking of tables (scratch that), hating microsoft, etc…

Currently I am coding a layout that is incredibly complex. It has tons of relative positioning, pngs, and css columns. The challenge is to get it all working cross browser, as well as make it all valid.

There were three main problem areas, but the most difficult one proved to be my right column. Here’s what I did.

Start with the positioning of my Right Column and leave all png stuff out.

div#rightColumn {
float: left;
width: 410px;
position: relative;
left: 30px;
font-size: 12px;
}

Create a second div within the RightColumn that will fill it 100%. This way you avoid the relative positioning and the a tags can be clickable.

div#rightColumn div. content {
float: left;
padding: 34px 60px 15px 30px;
width: 320px;
background: url(images/bg_floatedLayers.png) top left;
}

This is the IE filter hack.

* html div#rightColumn div. content {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/bg_floatedLayers.png”, sizingMethod=”scale”);
}

Lastly I added z-index’s to my a tags so they can be above the png. Not sure why you have to do this, but hey it works. Oh and for z-index to work, it needs a position.

div#rightColumn div. content a {
position: relative;
z-index: 1;
}

It is a ton of extra work between figuring out the solution and implementing it. Hopefully people will stumble on this solution quicker than I did. Makes me wonder if Microsoft is liable for all of the time we spend catering to their browser. It’s ridiculous. Yes, I am annoyed right now.

The site I am relaunching is nicholasgalanin.com and I will further illustrate it when I launch.

As soon as I saw the ftp link on this or that blog, I went for it. ** Update – Apparently I am guilty of a little pre-official release downloading.

Is it a significant improvement? Probably not. It definitely looks prettier, not by much, but the icons are shinier, and as we all know, shine adds prettiness to anything. There are a few additional things to note.

Extension Integration

As everyone knows, Mozilla Firefox has a huge community of extension developers. It is nice to see many of the most useful extensions developed by the community, being integrated into the newest version of Firefox.

Added Functionality

There are a few good things noticeable on the surface of Firefox 2.0. As I mentioned above, the GUI got a facelift. The buttons look more crisp and they highlight when rolled over. While it is not a huge difference, it is a difference.

They also filed all the community extensions and themes under “Add-Ons” under tools. While it’s amusing to those of use using the browser for a few years, it actually makes a lot of sense for those new to the browser, whom are mostly composed of non-techie people.

Other noticeable positive additions include anti-scam protection, spell check for forms (which have already caught a few of my types), and a bigger diversity of options handling RSS feeds.

In all honesty I am happy with the Firefox 2.0 except for one thing. The tabbed browsing. Instead of listing all of my tabs all the way across (the way I am used to and the way I like) they decided to only allow 12 tabs and then provide the rest in a drop down over to the left. One can scroll from left to right with the addition of left and right buttons, but using them feel clunky, at least add smooth scrolling. It’s not that big of deal, and I will probably get used to it, but it will take some time. *sniffsniff

** UPDATE **

Thankfully I don’t have to get used to it, I stumbled on this in lifehacker. Long story short:

1. Type in about:config in firefox address bar
2. Scroll to browser.tabs.tabMinWidth
3. Change 100 to 0
4. Back to browser goodness

Conclusion

I have only downloaded Firefox 2.0 on my PC, but soon I will try it out on my Mac. I will add any differences to this post.

All in all I feel like the Firefox crew rushed out this version to counter the release of IE7. While strategically it is the right move, it’s not all that impressive. I like Firefox 2.0 because it is still Firefox. I just don’t think it improves enough on version 1.5 enough to validate a 2.0 release.

Anyone feel the same?