Fix Cufon Flash of Unstyled Content ∞

Posted by Chris at 12:35 AM on July 25th, 2009

Whenever I’ve used cufón, I’ve ALWAYS experienced a FOUC, otherwise known as a Flash of Unstyled Content. If you are experiencing the same issue, then this fix is definitely going to make you happy. I must give credit for the fix to Rogie King who worked it out like Jane Fonda in the 80s.

(more…)

Elsewhere on the Web: Flippin’ Pixels with Pixelflips.com ∞

Posted by Chris at 8:32 PM on May 14th, 2009

From time-to-time I write for other blogs on the interwebs. Most recently I’ve been writing design critiques on PleaseCritiqueMe.com, a design critique blog that helps mentor other designers by addressing flaws and offering expert advice for websites that have asked for another opinion. The most recent critique I’ve written is on PixelFlips.com, the web design shop of Phillip Lovelace, a designer from the US, now living in Germany.

Why IE6 Update is a Terrible Idea ∞

Posted by Chris at 9:49 AM on May 13th, 2009

By now, you’ve probably seen IE6 Update, which is a javascript file you can include on your site that provides IE6 users with a message that appears to be a system or browser toolbar that provides users with critical information and a link to a required update (really it is just a link to download the latest IE browser). Recently Paul Boag recorded a short rant on AudioBoo which was very politely disagreed with by a user named Japh who believes the tactic is perfectly acceptable.

(more…)

Introducing Cufón, a Font Replacement Solution ∞

Posted by Chris at 4:46 PM on March 23rd, 2009

If you’re like me, you probably have been searching for a solid web font replacement technique which avoids replacing text with images or utilizing both Flash AND Javascript. In a nutshell, web font replacement aims to allow web designers to replace standard web fonts on a website with any font you can imagine while keeping your markup semantically meaningful, accessible, without ballooning page load times. There are few good alternatives out there but most require Flash and JavaScript. The problem with that is requiring an end user to have BOTH Flash and Javascript installed and turned on.

(more…)

A Crash Course in Becoming a (Successful) Web Designer ∞

Posted by Chris at 6:06 AM on February 12th, 2009

Layout, typography, and color all combine to make a great design.

You know, everyone has the moment in their life where they realize what they want to be.  For me, it was a natural progression. My love for the internet and computers combined with my love for designing and building things that wowed everyone around me. Web design isn’t for everyone and there’s definitely a lot of talent required, but should you decide to make the leap into creating things for the web, I’ve put together some great advice for your journey.
(more…)

CSS Framework Roundup: Should You Use One? ∞

Posted by Chris at 7:30 PM on February 3rd, 2009

After seeing some CSS frameworks pop up over the past couple years, I thought it fitting to address the increasingly popular trend. In my opinion, I see CSS frameworks as a way to learn how other designers and developers work with layout, markup, and style to produce websites rapidly, semantically, and with great flexibility.

(more…)

Expanding on How to Auto Caption Images Using MooTools ∞

Posted by Chris at 9:31 PM on January 23rd, 2009

One of the guys I love chatting it up with is Jacob Gube of Six Revisions. Jacob recently posted a great Mootools tutorial on automatically adding image captions using Mootools. I enjoyed the tutorial so much I thought I would expand upon it and make it a MooTools class that can be reused for various purposes as needed.
(more…)

The Last Browser Testing Advice You’ll Ever Need ∞

Posted by Chris at 11:54 AM on January 18th, 2009

Everyone knows the basics, you have to support the current version of IE, Firefox, and Safari. On top of that, you have to make sure it functions/looks ok in IE6, Opera and Google Chrome, if your browser stats warrant. In this post I discuss A-Grade browsers, my personal testing process, and graceful degradation vs. progessive enhancement. Read on, my friend, and become an expert on browser testing.

In no particular order

Five Easy Steps to Integrate Facebook Connect with your WordPress Blog ∞

Posted by Chris at 11:06 AM on January 7th, 2009

Wondering how to seamlessly integrate Facebook Connect into your WordPress blog? Have no fear, Facebook Connect Man is here. Uh, well, not really, but read on if you want millions of people to be able to use their Facebook login for your blog!
(more…)

My Thoughts on CSS Optimization ∞

Posted by Chris at 8:20 AM on December 29th, 2008

After using a CSS optimizer a couple of days ago, I realized that if you write your CSS properly, you should never need a CSS optimizer. Here’s why: when a CSS optimizer runs, it groups all the selectors together that share common styles and rules. For example, if you have

margin: 0;
padding: 0;

on 50 different selectors, it’s going to group them all together. Which means in most cases, it will repeat that pattern for all the different styles that you’ve applied throughout the stylesheet. So if you’ve got list-style: none on 16 different selectors, it’s going to relist all those selectors again just to add that one style. Below is an example of the CSS I tried to optimize for my new design, only to have the optimizer add 2kb and say “sorry ” when it was done.

Here’s what it looked like after I optimized:

 body,fieldset,#header #nav li,#bottom-header #nav,#bottom-header #nav li a,#main,#sidebar-one.column .search-form fieldset,#sidebar-one.column .search-form,#sidebar-one.column ul li,#sidebar-one.column ul,#sidebar-one.column ul#switcher li,#sidebar-one.column ul#switcher,#footer #lastfm,#footer #lastfm ol li,#footer #lastfm ol,#footer #archives ul li,#footer #archives ul,#footer #copyright ul li,#footer #copyright ul{margin:0}body,fieldset,#header #nav li,#bottom-header #nav,#bottom-header #nav,#maincontent .date small,#maincontent .date strong,#sidebar-one.column .search-form fieldset,#sidebar-one.column .search-form,#sidebar-one.column .outer,#sidebar-one.column ul li,#sidebar-one.column ul,#sidebar-one.column ul#switcher li,#sidebar-one.column ul#switcher,#comments dd,#footer #lastfm ol li,#footer #lastfm ol,#footer #archives ul li,#footer #archives ul,#footer #copyright ul li,#footer #copyright ul{padding:0}

As you can see, that’s a lot of CSS for setting two values, margin:0 and padding:0.

CSS optimization can be good, but only if you write terrible CSS or repeat the same styles over and over again throughout your stylesheet. Now that’s not to say you shouldn’t minify and/or compress your CSS. That’s something that doesn’t change the order and values of the CSS, but makes it more compact when delivered to the user’s browser.