Author Archives: Ian

Jumping Jesus On A Pogo Stick!

I thought I had IE 6 all figured out, or at least well enough that I wouldn’t have to put much energy into it before it became irrelevant. So when I ran into the IE6 bug below I recognized it right off as the duplicate character bug.

IE6 duplicates the last few characters of a floated element.

The gist of the bug is that IE freaks out if there is an <!-- HTML comment --> between adjacent floated elements. Knowing how smart I am, I went to the template knowing what to look for and viola! There is was. I removed the coment, copied of my templates over, and refreshed the page with confidence…no dice.

After fiddling for a bit I went on to ask The Oracle for help and came across this. Apparently IE6 also chokes on floated elements if their total width matches that of the containing box. The only way to avoid it is to make sure the nested float is at least 8px less than the width of the container. I wasted an hour of my life I’ll never get back on this one. I’m counting the days till IE6 is just a memory.

Semantic Fieldset Structure for General Use

Recently figured out a great way to build a form with good semantics and just enough hooks to style it just about any way I like. Just jotting it down here for future reference. The ordered list provides structure and order without using tabindex. The nested fieldsets continue the semantics and allow for alternate formatting of the radio and checkbox inputs which are always a pain.

<fieldset>
    <legend></legend>
    <ol>
        <li>
            <label></label>
            <input type="text" />
        </li>
        <li>
            <label></label>
            <input type="text" />
        </li>
        <li>
            <fieldset>
                <legend></legend>
                <ol>
                    <li>
                        <input type="radio" checked="checked" />
                        <label></label>
                    </li>
                    <li>
                        <input type="radio" />
                        <label></label>
                    </li>
                </ol>
            </fieldset>
        </li>    
        <li>
            <fieldset>
                <legend></legend>
                <ol>
                    <li>
                    <input type="checkbox" checked="checked" />
                    <label></label>
                    </li>
                    <li>
                    <input type="checkbox" />
                    <label></label>
                    </li>
                </ol>
            </fieldset>
        </li>
    </ol>
</fieldset>

Google Analytics for Multi-Channel Marketers

If you use Google Analytics (GA), you probably find it does a great job of giving you insight into how visitors are finding your site right out of the box. The (Traffic Sources) section can tell you where your link traffic (Referring Sites) is coming from or which search engines are sending traffic (non-paid) with a high degree of accuracy. The one blind spot is the (Direct Traffic) bucket. Normally you would count these as folks typing in the URL to your site directly. That’s a pretty safe assumption unless you engage in any type of marketing. Luckily, GA has built in support for tracking Adwords traffic, but that leave a lot out. What if you advertise with Yahoo! or Bing? What if you engage with folks through Facebook, LinkedIn or Twitter? Even scarier, what happens in the analog world of mailers, catalogs, newspapers, magazines and so on?

Enter GA Campaign Tracking. The GA team has put together a fairly simple to use campaign tracking system that will help you allocate some of that direct traffic bucket to the correct sources. Plus, you can add specific information about not only the source, but information about the visitor and any campaign that may have drawn them in. With a little organization, you can track your marketing efforts with precision, understand what works (or more importantly what doesn’t) and proceed with plotting to take over the world. How does this all work you ask? Query strings.

At this point 50% of you just scratched your heads, the rest have either skipped ahead to the meaty part or have realized they already know this stuff and bounced. For the 50%, let me explain explain. To parse out the visitors we want to pass some basic information to the GA code installed on your site. To do this, we just add some text to the end of any link back to your site. That text starts with a parameter (name) and is followed by a value. The first parameter is preceded by a question mark (?) and you can string several together by adding an ampersand (&) after the first parameter followed by another name/value pair. So the basic structure looks like the link below:

http://www.yourdomain.com/?name1=value1&name2=value2&name3=value3

OK, now the juicy bits. The Google Analtyics code that you put in the of your website is written to listen for a specific set of query string parameters. It then stores these for later reporting. Below are the four parameters available:

  • utm_campaign: This parameter is meant to store information about a specific campaign. Think “Fall 2011 Fashion” or “Memorial Day Extravaganza”.
  • utm_source: This one is meant to give you information about where the traffic originated. For example “prospect”, “wallStreetJournal”, or “email”.
  • utm_medium: Medium indicates how they found you. A link or a banner ad online or perhaps a print ad in a local newspaper.
  • utm_content: With this one you can store a little information about what your marketing may have been communicating. Like a 20%-off sale, a prize contest, or even a specific piece of copy you what to note. (Keep the reference short though, you don’t want to store a sentence for any of these. There is actually 255 character limit.)
  • utm_term: This one is perfect for tracking PPC outside of Adwords. You can use it to specify the keywords targeted in a particular ad on Bing, Yahoo! or anywhere else.

So let’s try using these in a real word example. I recently ran advertising in the Wall Street Journal’s iPad application for a popular wireless headset. Because we’re talking about an app here and not a browser, a click from the iPad back to the site will have no referrer. That means it will get lumped into the (Direct Traffic) bucket and I’ll lose the ability to know how much traffic my banner ad is sending. To make sure GA puts the visit in the right bucket I appended the following query string:

?utm_campaign=60DayTrial&utm_source=wsj&utm_medium=banner&utm_content=blueprint

Now, when I go to look at the visitor reports, I can sort through the traffic and see how well a particular ad is doing. This can be done for just about any marketing that drives visitors back to your site and will give you tons of visibility into the succes of your efforts.

A few tips and a word of caution:

  • For instances like a print or television a long query string won’t make sense. I wouldn’t not remember it, much less type the whole thing in once I got to my computer. In cases like these, give your prospect an easy to remember URL like http://yourdomain.com/offer, then 301 redirect them to a well made landing page. The redirect can include your Analytics parameters.
  • You can use a URL shortener like bit.ly for Twitter. Just add the query string to the destination URL.
  • Create a master list of your commonly used parameters then make sure you always use them the same way. If you use ‘email’ as a medium value, be sure to match the case the next time you use it. The parameters are case sensitive so if you’re not careful you’ll end up with duplicates.
  • There is no real right or wrong when it comes to the values you assign. While there are some best practices the values are completely arbitrary and you have the flexibility to tailor them to you specific use. Nice huh?
  • STAY ORGANIZED! As your maketing efforts multiply so will the complexity of keeping track of all your efforts. I keep a matrix in Excel of every string I’ve used then consult it religiously before creating a new one. I even have a simple formula in the worksheet that helps me create new strings with less typing. Perhaps I’ll share that in another post.

So that’s setting up query strings in a nutshell. They’re really simple to create and with some planning will help take the guesswork out of measuring and understanding the traffic into your site.

Project: My WordPress Site | Part 1

If you’re reading this as of the posting date, you’ve been greeted by the default WordPress theme and possibly a handful of posts. After plenty of procrastination I’ve decided it’s finally time to get this project off the ground. Over the next few weeks I’ll be planning, designing, and coding a new skin for this site. The first thing to do is decide what the site needs to achieve and stick to the plan. Without some discipline, any project can get out of control quickly while slowing progress and sapping motivation. I usually begin every project plan with one sentence that boils the desired result down to as few words as possible. With a clear-cut goal, the rest gets much easier. This isn’t to say a project can’t achieve more than one thing, but there should be one over-arching idea and anything else thrown in should be in support of that one idea.

Q: So what’s the point of this website?

A: This site will assist in growing my business.

That’s it, 8 words. It might seem simple but that’s the point. From here on out anything I add to the plan needs to help “grow my business.”

So what does the website need to do that I think will achieve that goal? I’ll just toss out a few initial ideas.

  • Be attractive and professional looking
  • Clearly describe the work I do and illustrate solutions I provide with examples
  • Give me a forum to jot down important learning for later reference and add credibility
  • Be written in well formed semantic code with graceful degradation across older browsers which should add further credibility for anyone looking “under the hood”

Ok, that’s enough to get started. In the next post on this project I’ll figure out features and content the site needs to meet the criteria laid out here.

Recommended Reading: HTML for Web Designers

So I just finished HTML 5 for Web Designers by Jeremy Keith. It’s the first in the A Book Apart series of books from the web design and standards gurus over at A List Apart. The book is a quick read, and is accessible even for those new to coding HTML.

The gist of it is that in many ways HTML 5 is here now. So why wait to start using it in your projects, right? Well, rolling with HTML 5 is not quite as simple as we’d like yet. Lucky for us the the book is full of practical examples and strategies for keeping your code compatible with various browsers while building sites that are ready for the future. Highly recommended for anyone looking for a quick start on HTML 5. Get it here, $30.00.