Main

April 16, 2008

Best practices for speeding up your site

Best Practices for Speeding Up Your Web Site — part of an excellent series of articles on the Yahoo Developer Network.

They mainly focus on the front end, as that is where you’ll get most bang for your buck. They make frequent reference to YSlow, a Firebug extension that looks extremely useful.

The presentation here is also strongly recommended, as it makes succinct arguments for all the techniques. (View on Slideshare to see it full-screen.)

Some things were familiar to me (and most are already standard practice for my colleagues), many weren’t (e.g. avoid @import for CSS), and some I know of but haven’t been convinced of before (e.g. CSS sprites). I was quite intrigued by this example of CSS sprites in use on Google. (When using CSS sprites, remember to consider their accessibility to screen readers, and don’t use if you want them to print.)

Posted by Francois Jordaan at 05:02 PM | | Comments (1)

March 06, 2008

IE8: steps in the right direction

After the furious controversy and rationalisation unleashed by Microsoft’s embrace of version targeting from IE8 onwards, we were thrilled by their u-turn on the decision yesterday. Instead of acting like IE7 unless instructed otherwise, “IE8 will, by default, interpret web content in the most standards compliant way it can.” Big sigh of relief.

And today Microsoft released the first IE8 Beta. Thanks to John Resig for his excellent review, pointing out all the significant improvements as well as ommissions. As Resig points out, it’s primarily my JavaScript-coding colleagues who’ll see the greatest leaps forward, but I’m amazed and happy to see support for ARIA, meaning we can finally improve the accessibility of Ajax-based web applications. And I love the Firebug-like integrated debugger — you can even use it when in IE7 mode!

In the review, Resig makes one comment that resonated with me: “I simultaneously feel both joy and anger in seeing these fixed. Happy that they’re being released and anger for the fact that I had to struggle through them and that they now consume some portion of my brain.” Joy and anger. That’s exactly what IE8 makes me feel. We’re made to feel grateful for the fixing of years-old bugs that on any normal software product wouldn’t have been tolerated for longer than a few months.

Posted by Francois Jordaan at 11:08 PM | | Comments (1)

January 21, 2008

xhtml & ccs crashes IE6

It’s always fun to find another bug in IE6. This XHTML/CSS kills IE6 out right. It is cut down from a real project and had us amused for a while.

This seems to be the minimal set that causes the crash. The negative margin is required too.

We swapped the <p> for a <span> in the end.

<head>
<style>
#inner DIV {
        background: #cccccc;
        }
#outer P:first-letter {
        margin: -1px;
        }
</style>
</head>
<body>
<div id="outer">
        <div id="inner">
            <div>
                <p><a href="">ie6 breaks</a></p>
            </div>
        </div>
</div>
</body>
</html>

Posted by David Bell at 03:52 PM | | Comments (0)

September 03, 2007

CSS tip: beware Helvetica

It’s a fairly common practice to specify a site’s primary font as { font-family: Helvetica, Arial, sans-serif; } That way, people with Helvetica installed (primarily Mac users) get the real thing you intend instead of Microsoft’s half-baked rip-off. Other people get Arial, and are none the wiser.

However, I got burned recently by some unintended side effects. Basically, Helvetica on the Mac has a much smaller line-height than Arial (which is identical cross-platform). On 11px sized text, the difference is 2px, more for larger text. This has ugly consequences wherever pixel amounts matter, which is most places except body text, for example navigation menus or when you’re trying to vertically align an icon with a text label.

Even worse, it’s impossible to work around without JavaScript-based platform detection. Since I draw the line at that, I have dumped Helvetica in most cases except headline sizes. To this typographical purist at least, the differences are invisible under ~18px.

Posted by Francois Jordaan at 12:33 PM | | Comments (2)