Echo Faith Design - j4

Welcome to the new Echo Faith. Codename - j4.

Though the basic look is very borrowed from my previous design (cleverly codenamed - j3), this redesign was definitely the most extensive, hard, and time-consuming one yet. I lost sleep many, many a night on this guy. And let me tell you, it’s a good thing I don’t have a job right now or this would’ve never made it online. (no job? more on that later...)

Honestly I redesigned this site 10 different ways in the past month, none of which really quite hit what I was trying to achieve.

There were several things that I wanted to accomplish with this new design.

Designing For Content

No beef about it, this redesign most likely would not have happened had it not been for the heavily inspiring thought-provoking post Designing for Content by Garrett Dimon on the process behind his redesign.

By relying on imagery and tangible examples, and less on my rhetoric, I hope not only to improve the quality of my communication, but also the clarity of my ideas. This entire redesign was motivated and designed around that single goal. I needed a format that enabled and encouraged the use of examples. This includes code, screenshots, or anything else that helps me communicate. The design had to put the content first. In fact, the content had to be the design.

Wow, genius. If you haven’t seen it, go check out a true example of beauty in simplicity.

I have often struggled with the content of this blog. I never had much of an image scheme so I hardly ever posted images, fearful of how they would look. Not to mention I could never find a happy design that matched my large ranting posts as well as my little 1 sentence posts. In this redesign I’ve focused on a large post format, meant for images, etc to spice up the look. I’ve implemented a “Musings, Links, etc” section which will hold all my “mini” 1-2 sentence posts that are nothing more than musings, links, etc… *cough*

The Grid

I’ve recently been reading through a great book Transcending CSS that helped to cement the idea of using grids religiously in design. I’ve always sort of kept a loose eye on the grid in the past but this time I was a grid zealot. Most likely the primary cause of many of those lost hours of sleep.

In sketching and creating the grid which my design was based around I found inspiration from quite a few different sites. Of course there was the infamous Subtraction, pretty much the de-facto grid design. Also of note are 5ThirtyOne, a local Seattle resident whose design is loosely based on Subtraction but definitely stands on its own; and Jeff Croft‘s old design, which sadly disappeared halfway through my redesign process - he updated his site and the footer that I so adored was gone.

The grid I ended up using is a 5 column grid, each at 180 pixels width with a 10 pixel gutter between each column (including the outside) totaling a 960 pixel width. I even tried to maintain somewhat of a vertical grid, although cross browser support just wasn’t totally there for that so it’s not nearly as obvious.

Math hurts my head.

Designer Showcase

One thing that has always bothered me with my previous designs is, it was never easy to direct a potential design customer to my site without the fear that they might be confused by what they see. But on that same token, I didn’t want to give up the blog which I still felt should be a driving force of the website, I mean that is why I created this thing in the first place.

Rather than using the front page to try and sell someone into checking out my services page like many others do, I decided to just make the services page become the home page.  I knew that I didn’t want to lose my blog elements though so I created a sidebar that gives the most recent updates while somewhat hiding itself from the casual potential client.

I also added a sweet monoslideshow banner which rotates through my portfolio images, enticing potentials to want to see more. Originally this banner was on the header of every page until I realized how much it would annoy me if someone elses website had a rotating image banner on every page.  So I trimmed it to just the home page where it really matters. =)

Site Inter-connectivity

Blog archives suck. No way around it, they are never any good.

I wanted my blog to be more receptive to exploration, for people to want to take a look around, see more of the content available. To have posts that are a few weeks old not just be DOA.

Through the use of a couple of nice Wordpress plugins I think I’ve allowed the exploration aspect to really shine. The sidebar (should) adapt to any page throughout the website, highlighting related posts or most popular posts in the current category, month, year, etc.

I’m absolutely in love with how this works! It makes it easy to bounce around from post to post staying on topic with what you are interested in.

Broken Stuff

Unfortunately there are still a few things that are broken with the site.  I’m sure there are probably a couple stray pages out there that will have errors (if you see them let me know!) but here are the few problems I do know about.

Validation

Argh… I tried so hard, but I am currently just 1 error short of being valid XHTML 1.0 Strict. I spent almost 3 hours on this last night (and I’m using this as the excuse for why I didn’t make the deadline of launching it yesterday… but hey, only a couple hours late, right?). I cannot figure out for the life of me, how to get a search form to validate. I even went as far as to try borrowing some code from a buddy of mine (Nathan Smith) who is kind of a web standards nazi (in a good way). I saw that his website (of course) validated perfectly as XHTML 1.0 Strict so I tried replacing my search code with his.

Nothin, the EXACT SAME CODE invalidates my website. I don’t get it. If anyone can see what I’ve done wrong and tell me how to fix it you would rock.

Archives

I much prefer the single page archives here than the previous link upon link upon page upon page default version that wordpress supplies. Unfortunately, with my new Musings posts (which have no title), this plugin has no way of excluding categories so all my little mini-posts show up under the archive as their ID numbers, which considerably is going to muck up the archives a bit.

Weird Characters

Unfortunately when I made the move from Textpattern to Wordpress way back when, all of my posts with weird characters freaked out. Before I just didn’t care because no one read those posts very often.  But now with my inter-connectivity those old posts are going to be cropping up in plain view again. Bah, it can wait. I’m tired.

Final Thoughts

If you made it this far into my design rant - congratulations! Thanks for caring and for reading echofaith. Please feel free to leave any feedback you might have on the design in the comments.