A lot has happened in my life.

In May, I accepted a new position as a front-end web developer for a public affairs firm in D.C. and the past seven months have been a blast.

I would say the biggest surprise is how much I like working with an in-house graphic design team. It’s great having input in the design process—much more fun than receiving a 10 zipped-up PSDs ready to be sliced without any further instruction.

I’ve also continued to pursue my interest in SEO, and thanks to our senior web developer, I’ve expanded my knowledge of jQuery, too.

However, the commute from Reston to D.C. 5 days a week got to be a real drag. So, at the end of October, I moved to the Court House neighborhood in Arlington.

It’s awesome. As much as I love my car, words cannot how much I like not needing it on a daily basis.

Now that I’ve had two months to settle in, I think I can safely say that 2010 is going to be the best yet.

This post originally from: therouxDown

Whoa, 2010!

Corey examines the differences between brand positioning and logo design and gives tips for branding for projects using the agile design method.

Total Runtime: 7:31

The audio is a little out of sync, but it doesn’t detract much from the presentation.

DS2: Corey Greeneltch, “More Than A Logo” from Viget Labs on Vimeo.

Full disclosure: Corey works for Ironworks on the floor below my old office and used to go on coffee breaks with me, so I’m generally inclined to think he’s a very cool person.

Also, I’m a big fanboy of anything done by Viget Labs over in nearby Falls Church, Virginia. They’re nifty.

This post originally from: therouxDown

Brand Positioning vs. Logo Design

How do I know this? Of the many, many Analytics accounts I’ve accessed, maybe 5% have set up goals, or even a customized dashboard for that matter. Five percent might be too generous.

The typical Analytics user sets up the account, and every two weeks or so logs in, looks at the blue graphs and goes, “Oh wow, that sure looks spiky.” It’s a valid lifestyle choice, I guess, just don’t expect me not to judge you.

If you’ve not yet made the leap to Analytics-junkie, here’s a quick tip that’s going to get you a lot of bang for your buck: Set up a User Defined Report to Obtain the Full Referrer URL from Google Analytics.

Follow the link to get easy step-by-step instructions (see Method 1). I’ve used this technique with both the urchin.js and ga.js tags without any trouble.

What Does It Do?

Normally, Analytics only provides the domain (& sub-domain, if applicable) of referring pages.

Pretty anemic, huh?

But after applying this ‘hack’ (and I hate to use the word hack to mean ‘clever tip,’ but that’s an entirely different blog post), you’ll see the full URL.

Voilà:

Not bad for 3 minutes of work, eh? Don’t forget to add the User Defined Report to the Google Analytics dashboard after you’re done.

Nota bene: You won’t see anything at first—this filter only works from the moment it’s implemented going forward. Also, don’t worry if you see a lot of “(not set).” In most cases this refers to your “Direct Traffic.”

Edit: Of course it’s possible to see click through on the domain to see the individual pages, but that’s a huge pain, and often there’s probably only one page hiding behind there anyway. And of course you won’t see the stuff after the file extension, like ?user_id=12334?category=unicorns, which is useful for reverse-stalking.

This post originally from: therouxDown

The Best, Simplest Google Analytics Hack You’re Probably Not Using

Usually I’m a self-starter type, but for whatever reason, I just couldn’t/didn’t get around to teaching myself the basics.

The user interface of Adobe Flash looks very similar to the UI elements I’m used to in Photoshop, but they work in subtly different ways. It drives me crazy. And all my well-practiced Photoshop keyboard shortcuts lead to general disarray when used out of force of habit in Flash.

So rather than continue ranting about how Flash is utterly pointless and wretched for SEO and usability (defense mechanism much?), I decided to enroll in a local Introduction to Flash night class.

Behind the link, you’ll see the movie I made during class. Be prepared for hilarity.

It’s like I’m back in 1990s, learning HTML all over again. Except with sound effects!

This post originally from: therouxDown

Remember, it’s tacky to laugh at amateur Flash movies

Wait until morning.

It’ll look different.

This post originally from: therouxDown

Note to Self, re: Design Decisions

Home Page

The old home page (which I neglected to screen cap), featured a prominent plain-text heading followed by several subheadings that described everything you could do on my site: read about me, hire me, contact me, read my blog, or follow me on Twitter. Graphically, it was dull. But worse, it overwhelmed the visitor with links without providing a clear next step.

The new homepage design uses a PHP conditional statement to alter the ID of the main content area. This allows me to work a little CSS voodoo—the content area is now black, in order to separate the homepage visually from other pages on the site. I also gave the main heading a bold CSS background image to create some visual interest (and I set the text-indent to -9999px to preserve accessibility).

Next, I drastically reduced the amount of support copy on the page. I kept what I consider the two most important things you can do on my site: read my blog or hire me.

Finally, I turned off the Twitter widget in the sidebar. I think it’s a lot of fun, but not necessarily important enough to grace the homepage.

jQuery Lightbox

If you click the screen cap above (and have Javascript enabled) you’ll notice that the entire screen dims and the image enlarges in its own pop-up.

This is the lighbox effect, which I downloaded and installed in under 10 minutes.

The drawback, of course, is that the lightbox effect takes a second or two to load. However, when a post has more than one photo, the lightbox plugin’s next & previous buttons will make browsing much quicker than clicking each photo separately. This will be especially handy on my portfolio page… if I ever actually create one.

Accessibility Improvements

April 9 was CSS Naked Day, a day in which participating sites turn off all their decorative stylesheets exposing their (hopefully) well-structured, semantic HTML underneath.

Although I didn’t plan on participating in the holiday, it did remind me to review my site with CSS disabled in order to find potential SEO and accessibility problems. (Better late than never!)

I was, naturally, flabbergasted. The jQuery plugin that draws shadows underneath my <div>s works by

1. replicating the <div>,
2. repositioning the <div> absolutely,
3. re-coloring the <div>,
4. blurring the the <div>
5. lowering the the <div>’s opacity
6. lather, rinse, repeat

What I didn’t expect, is that the plugin duplicates not just the <div>, but also its content, down to every last paragraph and image. With CSS disabled, every HTML element was plainly duplicated several times, making the page unreadable.

Since this was an effect of Javascript, I didn’t have to worry about the plugin affecting SEO, but it was a definite accessibility nightmare for anyone who had disabled CSS.

Luckily, with the help of a friend, I was able to alter the plugin so it duplicates only the <div>s, not the content. Theoretically this should cut way down on page rendering time, too.

Additionally, I belatedly realized that my primary navigation did not include a “Skip to Content” link. Oops. Another head-smacking accessibility moment. (It’s there now, just hidden with CSS, but screen readers will still be able to see it.)

Take-Home Message

Through my full-time job, I’ve had the pleasure of being involved in a number of site launches.

Even if a launch or a redesign goes smoothly, there’s always going to be some glitch that could have been prevented or some feature no one thought to implement. My own launch was no exception.

I think the hassle-free site launch might be a myth.

And if it’s not, you’re probably playing it too safe. Boo.

This post originally from: therouxDown

Week One Improvements

Why did it take so long? I really don’t have a good excuse. There is no excuse. The fact is, no self-respecting web professional should be without their own domain in this day and age.

If you’re interested in how I coded and designed this blog, keeping reading…

Building Blocks

WORDPRESS—I knew from the start I wanted to build the blog with WordPress. Its blogging functionality can’t be beat, and it makes a solid CMS for simple sites.

Plus, its community is excellent, and there exists a plugin to do almost anything I’d want.

Blueprint CSS—Grid-based CSS frameworks have been all the rage for the past year or so, and I have been itching to try one out. What better place than my own blog?

Out of the many available CSS frameworks (YUI Grids, 960 Grid System, YAML…) I chose Blueprint for a simple reason—it’s maintained by my friend & former co-worker Christian Montoya.

The learning curve has been fairly shallow, although I must admit Blueprint is forcing me to design in terms of em based font sizes for the first time, which was embarrassingly difficult at first.

jQuery—I’m currently using jQuery to draw some drop shadows behind a few <div>s. It’s not essential, but it’s a nice touch and saves me from mucking around in Photoshop every time I want to tweak the design. In order to improve site performance, the jQuery library is being hosted by Google.

In the future I’ll undoubtedly incorporate more and more jQuery into my work—when tasteful and appropriate, of course.

Graphic Design

Caveat—I’m not a graphic designer professionally. I’m just a guy with a copy of Photoshop and sometimes too much free time.

Graphic design is at the same time thrilling and utterly terrifying for me. When I get it right, I’m euphoric—but when I perceive a flaw, the flaw consumes my entire field of vision. Worse yet, oftentimes I’ll know something’s not quite right with one of my designs, but I can’t figure out how to fix it.

Even though I don’t consider myself a graphic designer, I know I needed to create an absolutely 100% original design. This is my blog after all… I’d look a bit silly hawking my own skills but using someone else’s design, wouldn’t I?

My first concept (way back in late 2007) positioned me as a sort-of comic-book superhero designer. I actually coded most of this before feeling that it was too cartoon-ish. It didn’t communicate professionalism.

The second concept went too far in the opposite direction. When I tried to strip out the goofy soul, the design become an unwitting parody of web 2.0 candy-coated lacquer gradients.

Looking at those old designs melts my eyes and strangles my soul.

My final concept (the design you see now, assuming you’re reading this post on April 8, 2009) was, in retrospect, definitely influenced by the grunge trend in web design. I played with organic textures, but I did so according to my own terms—content & usability ahead of decoration, always.

Onward and Upwards

Let it be known that on this blog, I am always open for feedback and constructive criticism. Feel free to twitter @ me.

If you like what you’ve seen so far, please subscribe to my RSS feed. Or if you’d prefer, receive blog updates via email.

This post originally from: therouxDown

therouxDown.com launched!… finally

Here’s to new beginnings.

This post originally from: therouxDown

All I’m saying is…