And the problem is certainly not confined to my Mac, as OS X Daily recently got Safari to use up 7,909.9 % of its CPU. No, that’s not a typo, they caught Safari using up almost 8,000 % of CPU in what they call an “epic freakout”. Check out the proof below:

More often than not, the culprit is not actually Apple’s Safari browser, but actually Adobe’s Flash plug-in. Oh Flash, can’t browse with you, can’t browse without you. Or can you?

Frack Flash

Sure, many would say just ditch Flash and be done with it, but then you’re also shutting off videos, siFR fonts, and web applications that rely on Flash.

The solution?

ClickToFlash.

Like many Apple applications and plug-ins, ClickToFlash is simple, elegant, and damn useful. Since installing it, Safari loads within 1-2 bounces and doesn’t crash and doesn’t throw up more beach-balls than a rock concert, baseball game and 4th of July party combined.

So, what is ClickToFlash?

Good question. CTF is a plug-in for Safari that prevents any and all Flash from loading. You’d be surprised how often Flash pops up on a site, until you download and install CTF and see that it literally litters the web.

But CTF doesn’t stop there. As it’s name shows, the beauty of CTF is that it enables Flash by clicking on the graphic it uses to mark Flash zones. One click, and your YouTube video, siFR fonts or what have you load up and play like normal. You can spot Flash areas with this nice, pleasant placeholder image:

More than just a Flash blocker

But, ClickToFlash doesn’t stop there. It goes a step further and allows you to load .h264 videos on YouTube instead of Flash, which leads to higher quality. Other features allows you to whitelist sites and load Flash for an entire page, all with one click.

If you don’t have ClickToFlash, do yourself and your web browser a favor and install it now. Seriously. It’s free and has zero downsides and plenty of up.

What Changed?

The new design features a fixed header that stays at the top wherever you go, allowing you to quickly search through the site, access the archives, send me an e-mail, subscribe to the blog feed, or connect with me on one of my favorite social media sites. My intent was to move from a huge header that simply looked good to one that took up little real estate but was useful. To that extent I think the new slim, fixed header is a big success. But let me know how you feel, I’m always open to feedback!

Some of you may be disappointed that I got rid of the old header with the great Apple keyboard shot, but it was time for a change. Sorry Dave I’m afraid I can’t do that.

Other changes were dropping the sidebar widgets to the bottom of the page, allowing me to give the main content a much wider space. Doing so lets me embed full size YouTube videos and wide images into posts. As you can tell, I really went for usability and functionality here rather than looks. The look itself is really simple and clean and draws the focus back onto the content.

On a sidenote, you’d think the new wider look would break on an 800 x 600 resolution, but that’s not quite the case. By dropping the sidebar below the content the design scales gracefully to a low resolution.

I’m still working on re-adding some of the widgets I had before (most notably the Scribnia and Friendfeed widgets) but otherwise it’s all done!

Before & After

Here’s a snap of the before look (note, it’s not an exact replica as I deleted the old look, this one is from an older local copy I had but it’s basically the same):

Old header, body, and sidebar

Now let’s take a look at how this section looks in the new design:

Oooh...more room for content!

Another section I wanted to tweak up was the Thesis teasers section. I felt they were a bit small so I widened them out and made each teaser fall on its own line. Personally, it makes it easier to scan through the teasers and archives and allows for a bigger thumbnail image.

Here’s how the teasers used to look:

Effective, but can they be improved?

Looks OK, but in the move to the wider main content column, they looked a bit scrunched up and out of place. In the new design each teaser falls on its own line:

What a tease...

Another section I felt needed a good deal of revamping was the comments and footer. Here’s a look at the old comments and footer section:

Comments and footers, pretty bland.

Quite bland, eh? Let’s take a look at the new comments and footers, which for those of you using new versions of Safari or Firefox feature lots of easy to look at rounded corners.

Roundy boxes.

And here’s the comments:

New Comments with more rounded corners

That’s about the bulk of the changes. There’s a few more tweaks and touchups here and there but the majority of the look’s covered above. If you find anything out of place or have any suggestions or questions on how I did something, feel free to ask. Hope you all enjoy the new design!

Thanks to eelke dekker for the HTML vs. CSS lego figures.