View Demo   Download Files

HTML

Each block has class names applied to it for the groups it belongs to. Here are two examples. The both belong to the group “all”, the top one “adv” and the bottom one “cla”.

<div class="all adv">
<img src="images/flavor-curry.jpg" alt="" />
<h4>Sweet Curry With Saffron</h4>
<p>Lusciously mellow with notes of overripe berries, 55% Hawaiian dark chocolate meets its soulmate in sweet curry - awash in spices including coriander, tumeric, cumin and cardamom and sprinkled with rare saffron. This spicy melange is slowly steeped in fresh coconut puree and gently blended with the chocolate. The taste rushes over you in waves - fragrant curry, chased by coconut, then the lingering, raisiny sweetness of chocolate. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a> and <a href="/store/products/Adventurous_Collection-3-2.html">Adventurous Collection</a>.</p>
</div>

<div class="all cla">
<img src="images/flavor-vanilla.jpg" alt="" />
<h4>Lucille's Vanilla </h4>
<p>For those who prefer milder chocolate, this winsome truffle will ignite a lifelong love affair. Gail uses a dark blend in this recipe handed down through four generations of the Guittard family of chocolate makers. It tastes like a rich spoonful of homemade chocolate pudding - just like Gail's mom, Lucille, made on the stovetop in their family farm's kitchen. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a> and <a href="http://gailambrosius.com/store/products/Classic_Collection-2-2.html">Classic Collection</a>.</p>
</div>

Then the navigation includes REL attributes that reference those classes:

<div id="flavor-nav">
    <a rel="all" class="current">All</a>
    <a rel="cla">Classic</a>
    <a rel="adv">Adventurous</a>
    <a rel="tea">Tea-Inspired</a>
</div>

jQuery JavaScript

The plan in plain English:

1. When a link in the filtering navigation is clicked…
2. Fade down all blocks (visual indication something is changing)
3. Remove “current” class from all navigation and apply it to newly clicked navigation
4. Figure out which group should be showing from the REL attribute
5. Any flavor NOT a part of the group, slide up
6. Any flavor that IS a part of the group, slide down
7. Fade back up all blocks

$(function() {

	var newSelection = "";

	$("#flavor-nav a").click(function(){

	    $("#all-flavors").fadeTo(200, 0.10);

		$("#flavor-nav a").removeClass("current");
		$(this).addClass("current");

		newSelection = $(this).attr("rel");

		$(".flavor").not("."+newSelection).slideUp();
		$("."+newSelection).slideDown();

	    $("#all-flavors").fadeTo(600, 1);

	});

});

This leads to a smoother experience than we had in version 1. Primarily because of the use of the .not() native jQuery filter. Before, we just “slid up” all the flavors and then “slid down” the correct ones. That means that every single flavor went through animation on every single navigation change. But that isn’t always necessary. For example if you are viewing one sub-set, then click back to “all”, those currently showing blocks don’t need to be animated, just all the other ones need to grow out. This solves that.

I’ve literally tried to work on different solutions for this for years and always came up short. I recently came across a solution from Kazi Manzur Rashid (about two years old now) that looks pretty solid so I thought I’d try it out. The results are the closest I’ve been able to come yet:

View Demo
Warning: the demo kinda freaks out WebKit browsers like Safari and Chrome, see issues below.

To those who have come before…

To do this with an iframe with source content on the same domain, you can do this. Same-domain iframes aren’t subject to the same restrictions so it’s far easier.

Adam Fortuna explored some options using kind of a man-in-the-middle idea. This may have been inspired by a technique by John McKerrell.

The following technique doesn’t require the middle man thing though, which is why it’s closer to ideal.

Prereqs

This solution presupposes that you have control over both the hosting site and the source site. You’ll need to run JavaScript on both ends. So this isn’t going to work for an iframe of google.com.

The Big Idea

The work-around is using hash tags in the URL to relay information back and forth. This circumvents the security restrictions. It is unlikely that this will ever break, so it’s not really a “hack”. You can’t really do anything malicious with just a hash tag. In our case we’re just reading in that information and using it to do the resizing.

The HOST Domain

Actually has the iframe on it:

<iframe id="frame-one" scrolling="no" frameborder="0" src="http://digwp.com/examples/iFrameSource/source.html" onload="FrameManager.registerFrame(this)"></iframe>

The iframe has an onload event on it, which calls a function from the FrameManager class, which we’ll need to call in the <head>:

<script type="text/javascript" src="js/FrameManager.js"></script>

And here is the magical FrameManager class:

var FrameManager = {

    currentFrameId : '',
    currentFrameHeight : 0,
    lastFrameId : '',
    lastFrameHeight : 0,
    resizeTimerId : null,

    init: function() {

        if (FrameManager.resizeTimerId == null) {

            FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 500);

        }

    },

    resizeFrames: function() {

        FrameManager.retrieveFrameIdAndHeight();

        if ((FrameManager.currentFrameId != FrameManager.lastFrameId) || (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight)) {

            var iframe = document.getElementById(FrameManager.currentFrameId.toString());

            if (iframe == null) return;

            iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";

            FrameManager.lastFrameId = FrameManager.currentFrameId;
            FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
            window.location.hash = '';

        }

    },

    retrieveFrameIdAndHeight: function() {

        if (window.location.hash.length == 0) return;

        var hashValue = window.location.hash.substring(1);

        if ((hashValue == null) || (hashValue.length == 0)) return;

        var pairs = hashValue.split('&');

        if ((pairs != null) && (pairs.length > 0)) {

            for(var i = 0; i < pairs.length; i++) {

                var pair = pairs[i].split('=');

                if ((pair != null) && (pair.length > 0)) {

                    if (pair[0] == 'frameId') {

                        if ((pair[1] != null) && (pair[1].length > 0)) {

                            FrameManager.currentFrameId = pair[1];
                        }
                    } else if (pair[0] == 'height') {

                        var height = parseInt(pair[1]);

                        if (!isNaN(height)) {

                            FrameManager.currentFrameHeight = height;
                            FrameManager.currentFrameHeight += 15;

                        }
                    }
                }
            }
        }

    },

    registerFrame: function(frame) {

        var currentLocation = location.href;
        var hashIndex = currentLocation.indexOf('#');

        if (hashIndex > -1) {

            currentLocation = currentLocation.substring(0, hashIndex);
        }

        frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' + currentLocation;

    }
};

window.setTimeout(FrameManager.init, 300);

The SOURCE site

The source content could pretty much be anything, located on a different server. Perhaps:

<body>

    <div id="content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce in tortor sit amet sem luctus ornare. Nam sed augue id erat commodo gravida. Nulla in pede. Nunc sed elit non pede aliquam eleifend. Cras varius. Sed non lorem eget ipsum accumsan suscipit. Donec bibendum enim. Phasellus a ligula. Fusce turpis diam, ultricies at, ullamcorper a, consectetuer et, mauris. Pellentesque neque felis, scelerisque non, vestibulum at, luctus quis, velit. Quisque sit amet mi sed sem facilisis ornare. In leo ante, hendrerit nec, lobortis eget, feugiat ac, orci.
    </div>

</body>

The most important thing we do on the source site is run some JavaScript to “publish” the height of itself. In my demo, I’m also throwing some jQuery in there to do some font-size animation so that the source content grows taller and shorter.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2"></script>
<script type="text/javascript" src="frame.js"></script>
<script type="text/javascript">

    window.onload = function(event) {
        window.setInterval(publishHeight, 300);
    }

    $(function() {

        var $content = $("#content");

        function toggleFontSize() {

            if ($content.css("font-size") == "22px") {
                $("#content").animate({
                    fontSize: "15px"
                });
            } else {
                $("#content").animate({
                    fontSize: "22px"
                });
            }

        }

        var int = setInterval(toggleFontSize, 5000);

    });
</script>

So we are calling publishHeight() every 300 milliseconds. Here is that function, and it’s rag-tag gang of fellow supporting functions from the frame.js file.

function publishHeight() {

    if (window.location.hash.length == 0) return;

    var frameId = getFrameId();

    if (frameId == '') return;

    var actualHeight = getBodyHeight();
    var currentHeight = getViewPortHeight();

    if  (Math.abs(actualHeight - currentHeight) > 15) {
        var hostUrl = window.location.hash.substring(1);

        hostUrl += "#";
        hostUrl += 'frameId=' + frameId;
        hostUrl += '&';
        hostUrl += 'height=' + actualHeight.toString();

        window.top.location = hostUrl;
    }
}

function getFrameId() {

    var qs = parseQueryString(window.location.href);
    var frameId = qs["frameId"];

    var hashIndex = frameId.indexOf('#');

    if (hashIndex > -1) {
        frameId = frameId.substring(0, hashIndex);
    }

    return frameId;

}

function getBodyHeight() {

    var height,
        scrollHeight,
        offsetHeight;

    if (document.height) {

        height = document.height;

    } else if (document.body) {

        if (document.body.scrollHeight) {
            height = scrollHeight = document.body.scrollHeight;
        }

        if (document.body.offsetHeight) {
            height = offsetHeight = document.body.offsetHeight;
        }

        if (scrollHeight && offsetHeight) {
            height = Math.max(scrollHeight, offsetHeight);
        }
    }

    return height;
}

function getViewPortHeight() {

    var height = 0;

    if (window.innerHeight) {
        height = window.innerHeight - 18;
    } else if ((document.documentElement) && (document.documentElement.clientHeight)) {
        height = document.documentElement.clientHeight;
    } else if ((document.body) && (document.body.clientHeight)) {
        height = document.body.clientHeight;
    }

    return height;

}

function parseQueryString(url) {

    url = new String(url);

    var queryStringValues = new Object(),
        querystring = url.substring((url.indexOf('?') + 1), url.length),
        querystringSplit = querystring.split('&');

    for (i = 0; i < querystringSplit.length; i++) {
        var pair = querystringSplit[i].split('='),
            name = pair[0],
            value = pair[1];

        queryStringValues[name] = value;
    }

    return queryStringValues;

}

Issues

• Refresh happy in WebKit. Apparently it used to be Firefox that got all refresh happy, but apparently with the latest version it is flip flopped. Watch out of visiting the demo in Safari or Chrome, it’s a little choppy. If anyone has any ideas here, this is probably the biggest problem.
• Messes up back button. Because of all the hash tags flying around on the host page, it may screw up the back button functionality on that page.
• Intervals, intervals, intervals. There are a lot of intervals flying around here which are nearly always hacky-red-flags. The quicker the intervals, the smoother but more resource intensive. The slower, the more choppy but easier. Either way, sucky.
• Limit of information sent via hash. If you were thinking about using this technique to send other information, because it happens via URL, you are limited by the amount of information that can pass. Presumably the same as a GET request… around 1k.

The holy grail

I think the reason I’m so obsessed with this because Wufoo forms seem to handle this so perfectly. Wufoo forms used to only be embeddable with iframes. I always had to set the height of them literally almost 50% taller than the content itself to accommodate for the innards growing when the form was submitted with errors (the error messaging expanded the height). If I didn’t, the submit button would get cut off making the form un-submittable.

Wufoo now has a JavaScript embed option, but ultimately the form still comes in via iframe. However they do it, the iframe can magically resize itself as needed. I have no idea how it’s done, but I imagine it something somewhat similar to what we are doing here. Because Wufoo has access to both the host page and the source page. My best guess is that the JavaScript on the host page can send requests back to the source page which can somehow accurately tell the host page what height it should be.

Got better?

It’s a lot of code, but hey, it works (again, thanks for Kazi for the smarts). Got better? Please, share.

Content Websites vs. Product/Service Websites

There are some websites that spend their time building content. They build it to keep visitors coming back because it’s funny or interesting or important or otherwise compelling. Content websites, by and large, are free to visit and consume. Creators of content website spend considerable time and effort creating and maintaining the site and it’s content.

Some websites exist to support a product or service that is for sale. The creators of these sites spend the majority of their time and effort working on that product or service. Making it better, improving features, etc. They aren’t working on building content, that’s not their forte.

Content websites get the traffic (but need money). Product/service websites make the money (but need traffic). Advertising is a way to trade and share some love back and forth.

Not Evil

There is nothing “evil” about advertising. Creating content takes blood, sweat and tears. Creating products takes blood, sweat, and tears. Both deserve to be paid for that. Advertising makes sure they do.

Advertising can certainly be overdone though. Having to watch a 30 second video before reading an article… I feel that’s too much. A page-peel that you come within 100 pixel of and it comes down and covers half the page? Too much.

Except when it is

The “evil” stuff only starts entering the picture when websites start do things under the table. Selling emails/spam, that’s clearly evil. Writing an article about how great a book is, without ever reading it, so you can link to it with an Amazon affiliate code, is evil. Filling a page with bullshit keyword-strewn content in hopes to get some search traffic and covering the page in ads, is evil.

Honest websites creating honest content displaying ads for honest companies creating honest products, that’s always OK. When any one of those things loses the “honest” part, that’s problematic.

Services

On this site, I use BuySellAds. They specialize in the design website community, which means that they have a base of advertisers with products and services that cater to this community. That’s awesome, as it means that ads on this site will be filled with things that web designers might be interested in. They take 25% of sales, a hefty fee at a glance, but completely worth it when I consider that I spend almost no time at all thinking about advertising. I can use that time building content instead. Otherwise I’d be spending my time finding/communicating with advertisers, invoicing them, keeping track of live dates, flipping in and out graphics, etc. And because BSA comes in over JavaScript, it keeps paid links away from Google bots which frown upon that. Also great about the BSA model, advertisers pay for what they get. They look at ad spots, they see what kind of impressions the site has, they see a fixed monthly price, and they make the call. It’s as straight-forward as it could be.

A much more popular advertising service on a global scale is Google AdSense. AdSense reads the content on the page it resides upon and serves up advertising relevant to that content. In general, I think that’s great. Relevant ads benefit publishers (more people click them), advertisers (the people clicking are a targeted audience), and the users themselves (they find something they are actually looking for). On my site, I don’t need it, since I already have a service that is targetted. But it’s great for something like Ning.com, where people can build their own social network for free. Someone starts a knitting site, content on the site is about knitting, there are Google ads on the site about knitting, everybody wins. Forums are also good targets for AdSense, since topics are set by your visitors themselves, and the ads can mimic those topics. Personally, I don’t like Google ads. I think they are ugly. I think people know exactly what they look like and know how to avoid them. I think it attracts lots of crappy advertisers. Most of all, I don’t like how it pays via clicks.

There is one place on CSS-Tricks that uses them, and that is next to the search results. I love Google Custom Search Engines. It does a great job in searching this site. I tied my AdSense account to the CSE so that I earn from the clicks on the ads in search. It amounts to a few dollars a month. The reason I do it is because it costs $100 to remove them and I don’t really think it’s worth it. They sit harmlessly over to the right which would be blank white space anyway.

The cool kid club

There are a couple of ad serving services in the web design niche that are exclusively for the cool kids: The Deck and Fusion Ads. They are pretty great. Publishers using these services display only one ad per page. The ads are typically very well designed and classy. I like this idea very much. Unfortunately you have to be a lot cooler than you or me to get in on it. I also tend to think that sites serving these ads aren’t primarily concerned with advertising income. While I’m sure they pay fairly well, I’m betting one high paying ad can’t beat 9 medium paying ads.

Affiliates

Affiliate programs are another form of online advertising. Product/service sites tend to love them, as they only have to pay out when successful sales are made. In traditional advertising, they have to pay no matter what and if the ad does poorly, it’s a loss for them. If an affiliate ad does poorly, it’s a loss for the publisher.

I like the idea of affiliate programs. If someone goes through the trouble of spreading the word and sending in sales, they deserve to be paid for that work.

I’m also wary of them. I think the advertiser gets a pretty significant advantage. Advertising isn’t just direct sales, it’s brand exposure and mind share as well. The advertiser gets this part for free, as well as only paying for direct sales.

I think if you become an affiliate for anything, you should do it because you like what you are selling and you think you’ll sell enough of it to turn the balance in your favor.

I have affiliate programs both for Are My Sites Up and Digging Into WordPress. I like how they have worked out.

Common sizes

I have no idea what these sizes are based on or what the history is, but the Interactive Advertising Bureau offers up this list (based on what is “commonly sold” in the marketplace). They say that the goal is to provide some standardization to reduce stuff like having different publishers using sizes only trivially different like 300×95, 300×100, 300×105 etc., which is a damn fine goal.

Personally I think the sizes are rather asinine – with one ad size having nearly no relationship to the next. Standards are great, and of course it will be hard to fight against the stream now, but I think this whole “common sizes” business needs a re-think.

Randomization

If you offer a number of similar sized ad blocks in one area, the fair thing to do for the advertisers is randomize their position within the block. I’ll post a snippet of how to do this soon.

A/B Testing

You may not have the ability to always do this if you are using an ad service, but a good idea in web advertising is to use A/B testing. That is, have two versions of the same ad and measure which one does better, everything else being equal. Randomly display each one, and add different tracking information to the end of the URL that each links to. If you are using Google Analytics, you could use their link builder.

When to start

A classic problem of online advertising is deciding how to approach it on a brand new site. There are some pretty different schools of thought.

Some people say you should wait to put ads on a site until it has grown up enough that it’s “worth it”. I can buy into that. You are going to make pennies when launching a brand new site with no audience. Your ads aren’t worth anything, so why put them there? It also preoccupies you with thinking about advertising when clearly the most important thing for a fledgling site is growing that audience and traffic.

The flip side is putting ads on a site from day one. Even though they aren’t worth anything, at least you are ready, in the design/layout of the site for when they are worth something. It also sets up user expectations on the site. If you build an audience on a site with zero ads, then one day fill the site with ads, that’s rocking the boat quite a bit. Users might not take kindly to that. Having ads from the beginning sets expectations straight from the beginning.

For the sake of offering advice, I’d say if you think your site will have advertising on it eventually, plan for it design-wise and throw some placeholder ads up for now (perhaps display ads for your friends sites?). Then once you’ve grown enough (perhaps 50k pageviews a month) then start working on paid ads.

Feel free to chime in with your own thoughts about online advertising!

I created a really simple design. Then I replaced all her content with good ol’ C’thulu so I have a generic template I can give out to you folks.

View Demo   Download Files

Really nothing to amazing here, just a clean layout. But also:

• Contact information using microformats
• Main resume area using what I think is the semantically correct definition list (<dl>)
• Literally one page (just an index.html file, with optional images)
• Prints nicely

Print Preview

Of course feel free to do whatever you want with it.

I think this is very similar to how great designers see great designs.

But let’s get back to the musician for a second.

To an outsider observing this great musician analyzing a great song, they might oooh-and-ahhh at their ability to quickly dissect the key, melody, or chord changes. But to the musician, these things likely feel trivial. That is no problem for them. That is their trade. Of course they know what key it’s in. What is more important is that emotion, that atmosphere, those little details that took the song to greatness.

Now what about a great designer looking at a great design? I think the designer looks for the same things the musician does. The emotion. The details. I think they try to put their finger on the sometimes elusive qualities that make a great design great. The outside observer watching this designer break down the design might oooh-and-ahhh at the designers ability to replicate it, or analyze the technology used to make it happen. But the designer likely feels those things are trivial. Of course they can replicate it. Of course they can figure out the fancy CSS tricks or Photoshop effects that made it happen. That is their trade. More importantly though, is the designers ability to understand the details that took the design to greatness.

Do you think this is true? Or is perhaps the opposite true? Great creators are great because of their ability to see their creations as an untrained layperson would.

How much is it?

It’s $67, and automatically comes with the PDF version (more on that later). We realize that is toward the high end of the scale. There are a variety of reasons for this.

• This is 400 pages of full-color printing.
• We aren’t printing in massive quantities. In printing, the less you run the more you pay per-piece.
• It has been a ton of work getting this all together. Aside from some very helpful folks who helped us find errors after the PDF went out, every inch of it has been done by myself, Jeff, or our friends and family. We don’t have the efficiency of a company that does this day in and day out.

Believe me, our margins are fairly tight on this.

We are shipping internationally. But as you might suspect, it costs a good bit more. I asked the post office for the cheapest possible way to get it overseas, and places like the United Kingdom and Germany were around $28, so that’s what we need to charge.

In the United States, shipping is closer to $5.00. Illinois sales are subject to sales tax; international sales get VAT.

Already have the PDF?

First things first, as promised, if you already purchased the PDF and want a print copy of the book, you are entitled to a discount. Here is what you do:

1. Email us at sales@digwp.com (or use the contact form). Either forward us your receipt or just provide us with the full name and email used when buying the book.
2. We’ll send you a discount code you can use during checkout.
3. The code will be valued at whatever you paid for the book plus $5 off. So if you paid the full $27 for the PDF, we’ll send you a code worth $32. So you’ll end up paying $35. This helps us keep our margins intact and not lose money on these print books.

Features

My favorite… it’s spiral bound! For once, a tech book that will lay flat next to your keyboard.

Every page is full color!

And of course the slew of stuff we talk about. Perhaps most importantly, free updates to the PDF version for life. We already have plans in the works for updates. As a buyer, you’ll be emailed a free download link when those new versions go out.

How it affects the affiliate program

Our affiliate program for the book pays (a rocking) 50% for sales of the PDF. That part doesn’t change. But we obviously can’t afford to pay 50% for book sales. For book sales we are going to give 20%. What that works out to is basically the same exact payout for either purchase: $13.50 for a PDF sale, $13.40 for a book sale. Pretty damn good if you ask me. I’ve literally PayPal’d out thousands of dollars to affiliates.

Much love

Look at my family hard at work!

… and in case you missed it at the top, it’s available here.

• Amazon: to buy the movie
• Netflix: to add it to your queue
• IMDB: to learn more about the movie

One way to add these links to each movie in the list would have been to go to those websites, find the movie, and copy and paste the link. But boy that’s a lot of grunt work for dozens and dozens of movies. There must be a better way.

Fortunately for us, each of these websites offers a search page that accepts URL parameters. We can simply insert the name of the movie into a specially formatted URL, and then append links to our page with JavaScript.

The formats are like this:

http://www.amazon.com/s/ref=nb_ss_d?tag=chriscoyier-20&url=search-alias%3Ddvd&field-keywords=MOVIE-TITLE-HERE

http://www.netflix.com/Search?lnkctr=srchrd-ips&v1=MOVIE-TITLE-HERE

http://www.imdb.com/find?s=tt&q=MOVIE-TITLE-HERE

Notice the Amazon one has my Affiliate ID in there. Might as well eh?

Automatic insertion

In my article, I used a table to lay out the movie list. After all, it’s tabular data. In my table I left the last table in each row empty. With JavaScript we are going to

1. Loop through each row
2. Find the movie title
3. Construct the URLs based on the movie title
4. Create the links
5. Append the links to the last empty table row

<script type="text/javascript" charset="utf-8">

  var movieText = '';

  $(function() {

	$("#movie-list tr td:first-child").each(function() {

		movieText = $(this).find("strong").text();

		netflixURL = "http://www.netflix.com/Search?lnkctr=srchrd-ips&v1=" + movieText;
		amazonURL = "http://www.amazon.com/s/ref=nb_ss_d?tag=chriscoyier-20&url=search-alias%3Ddvd&field-keywords=" + movieText;
		imdbURL = "http://www.imdb.com/find?s=tt&q=" + movieText;

		$(this).parent().find("td:last-child").empty().append("<a class='out-link netflix-link' href='"+netflixURL+"'>Netflix Link</a><a class='out-link amazon-link' href='"+amazonURL+"'>Amazon Link</a><a class='out-link imdb-link' href='"+imdbURL+"'>IMDb Link</a>");

	});

  });

</script>

View Demo   Download Files

What does it do?

The main point here is the math. It’s a simple table of products, and each product has an input box for quantity. Changing the value of that quantity box automatically triggers the math and totals are calculated. Row totals are calculated across, then order totals are calculated down. Quantities are totaled and multiplied by a shipping rate and all that is added together.

For demonstration purposes, the form is integrated with FoxyCart, to show how it might be used in a “real” situation.

Improvements over last time

• Some of the functions are more efficient.
• Number formatting is far better. Instead of having a box that just says 12423 in it, it says $12,423. This is thanks to some fun snippetry like this.
• Event handling is smarter. Instead of waiting for the input’s blur event to fire, the math is performed on focus, blur, change, and keyup events, making the form seem smarter and snappier.
• Logic in general is better, handling bad inputs in a cleaner way.

If ya’ll have ideas to make it even better, I’m all ears as always.

Reasons

• Reign in the font situation. I wanted to establish the “CSS-Tricks” type part of the logo in a font that I liked and was a part of a larger family. I went with Gotham Condensed, which I picked up just for this, to extend my collection of the Gotham family, which should serve me well for a long time to come. Headers on the site are in FF Tisa Web Pro, served through TypeKit. Body copy is Verdana. Other than ads, which I cannot control, those are the only 3 typefaces in use on the site, which was the goal. (Well, the code in Monaco, but that doesn’t count.)
• Feature more of the site on the homepage. The homepage now also includes the latest 5 snippets and the latest video screencast, in addition to the the latest 5 posts.
• No more dark sidebar. The #1 complaint of the last design was the really dark sidebar which visually overpowered the content area. I eventually started to buy into that criticism so I wanted to make the sidebar less intense that way. The outsides of the site is now “framed” as well, which makes me feel more comfortable, instead of the all-white-no-edges middle that was going on before.

Not do anything too crazy. This is just a refresher. No major new areas. No navigational changes. No different URL’s… This is the same ol’ joint it used to be

Considerations

• Maintain or increase the value of the advertising. There isn’t any more or less than the last design, but things were shuffled around a little. I like the placements better. They have more breathing room.
• Dropping IE 6. Unfortunately I kind of half-assed IE 6 support in the last one. This time I just didn’t want to deal with it. I’m fine with supporting IE 6 on client sites and eCommerce sites and whatnot, but that demographic on this site is tiny and I just don’t care. For IE 6, I’m serving the Universal IE 6 CSS.
• TypeKit fonts kinda look like shit on Windows, so I’m only serving up TypeKit for non IE browsers. This doesn’t solve the problem of Windows+NonIE browsers, but we’ll see what kind of feedback there is on that.

To Do

• Update my bookshelf area
• New footer for the forums
• Re-think the increasingly-important Archives page
• Add a few tweaks, mainly regaring search, in an additional IE 6 stylesheet
• Ideally, go through the entire video archive and redo nicer thumbnails and put them in my new system (just an internal thing, I’m using custom fields for everything now and supporting two different systems until I can go back over this).
• See if I can get it with no horizontal scroll at 1024px. I planned for this and then something went funny somewhere. I need to track down what the thing is that is sticking out and try and bring it in.
• Keep on tweakin’ — I have some little micro-ideas already I need to get to.

For Posterity

Old

New

This is what I am calling “aborting” a link. Years ago now, I remember seeing somebody’s demo where they found some weird combination of CSS which made it so you couldn’t abort from a link. It’s been on my to-research list for a long time, and I just started to get around to it. I wasn’t able to dig anything up, or find much written about it elsewhere. I have a feeling that it was more of a weird old browser bug, and not something easily replicate-able in the modern browsers I am using now.

This idea of aborting links is pretty interesting though. As it turns out, different browsers have pretty different ways of handling it. Let’s take a look.

Firefox 3.5.6

In Firefox, you can click anywhere inside the link and you have about a 5-pixel dragging radius before the link is aborted.

Safari 4.0.4

In Safari, if you click off the text, you can drag anywhere within the link and the link will not abort. You have to release the mouse actually outside the link for it to abort.

If you click on the text, you have about a 40-pixel radius before the link will be aborted, showing you a small link-popup.

Chrome 4.0.249.30

No matter where you click in Chrome, you have about a 40-pixel drag radius before the link is aborted.

Opera 10.10

In Opera, if you click and drag left or right, or even diagonally, the link will not abort until you leave the confines of the link. But if you drag up or down, your link will abort in about a 5 pixels. This is for clicking off the text itself.

If you click on the text, you have about a 5-pixel radius before the link will abort. Left or right dragging will actually select text, which is unusual (in other browsers you have to click outside the link and drag around to get a text selection).

IE 8.0.6

IE has a consistent 5-pixel radius to abort no matter where you click.

So?

So – nothing. It’s just kind of interesting how different browsers, even browsers that use the same rendering engine, handle aborting links differently. This is definitely something they thought about while creating the browser, and all came to different conclusions on how it should be handled.

This concept applies to anything with a click or touch surface. For example, the iPhone allows you to abort the pressing of an icon / link, but simply moving your finger away from that area.

For the record, the demo page used in this research is here.

If you wanted to be a real bastard…

It is important the links are able to be aborted. It’s just common courtesy, to allow someone to back up out of a mistake before it happens. However if you really had a good reason why you needed a link to be unabortable (or you were a real bastard), you could redirect the page with JavaScript on the mouseDown event. Here is some jQuery:

$(function() {

    $("a").mousedown(function() {
        window.location = $(this).attr("href");
    });

});