Scarf*oo

Roughly a month after the proposed recommendation status, the Web Content Accessibility Guidelines (WCAG) 2.0 have reached the final stage and it’s ready to be adopted.

Ever happened to you that after applying one of the many solutions for fixing IE’s png background image support, links on that element didn’t work? How about repeating background images? I bet most of you will nod in agreement. Well, Drew Diller from dillerdesign.com’s got the solution for you. While his script fails to apply PNGs to the body element and to an img tag (for now), it solves the problem with background-position and background-repeat.

All you have to do is call the following script and voila, your headaches are over:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png_bg'); //EXAMPLE
</script>
<![endif]-->

Head over to the DD_belatedPNG page for downloads and more examples.

On one hand you have a carefully written fast web site and on the other one, well, you have another carefully written web site that isn’t quite as performant - but why is it so?

The answer doesn’t lie in your web site’s size, but in the number of elements on your site, and consequentially the number of requests to the server to fetch those elements. Surely, you should always be careful to cut down image size, choose the appropriate image format, produce clean and nice (x)html and couple it with CSS, but as experienced web developers we already know that, right? Right?

Let us now look at some ways to cut down server requests to speed-up our web site.

1. CSS sprites

A common way to speed up your web site (by reducing the number of images needed to be fetched from the server) is to group related images into a single big image and use the CSS background-position property to set a “window” - or “mask” if you prefer - on a particular part of the large image.
This technique is well documented, so you should have no problems implementing it. Visit Dave Shea’s article on CSS Sprites if you want a thorough view on the subject.

2. Larger images, smaller number

Decreasing image count is always a good thing, so try to have fewer of them for the sake of their size. You should carefully consider how to achieve this early enough - when cutting them out of your photoshop design, for example would be ideal.

3. More CSS, less background images

Try a solid background-color instead of a background-image whenever possible. If your design isn’t overly graphical or heavy on the gradients, you can get away with very few background images. Having many solid lines for section boundaries and such? Instead of heavy images, use CSS borders.

4. Prefer size over quantity of linked files

Although style sheets, javascript files, etc. are cached by the browser, they still get a request to the server - asking for an updated version of the file - each time your browser reloads. This leads us to the idea that fewer linked files means fewer update checks - It’s true.

Conclusion

The fact is that something so simple as file count gets little attention nowadays, but remember that as fast as the internet gets, latency will always be a problem, and that is why we should do our best to keep the file count down - the surfers will be glad we did.

Here we have been blessed with the green light to step up from WCAG 1 to the latest and greatest WCAG 2. You can read more about the topic by following the links below:

• Overview of WCAG 2.0 Documents
• How to Meet WCAG 2.0 (Customisable quick reference)
• Transitioning from WCAG 1.0 to WCAG 2.0
• Accessible Forms using WCAG 2.0

This issue is all about the standards we love (or hate). Molly E. Holzschlag tells us how the standards movement is splitting and going separate ways and opens a can-o-worms for us to discuss upon. The second article written by Scott Jehl is all about testing the target browser capabilities before delivering specific enhancements to the web. An interesting read, although who will bother implementing it is a completely different story.

Over at ALA, Dave Shea branded a new technique called CSS Sprites2, which is basically a combination of our beloved CSS sprites technique turbocharged with the famous jQuery javascript library we all learned to love (or hate). You can find the lengthy tutorial over here.

What can you expect following last year’s, 37 questions sized A List Apart Web Design Survey? This year’s survey, or course. Named differently, yet pretty much the same lenghty, snore-inducing, honey-please-make-me-coffee 18 page survey. No game to watch on TV tonight? You know, you want it.

An slick new 50$ mac application from Clearleft for web site usability testing. Seems like a well designed app that could really come in handy. See for yourself.

Silverback screencast from Jeremy Keith on Vimeo.

Oh, and just in case you are holding back on the purchase, 10% of all profits go to save the gorillas!

Opera software released 21 tutorials on web development targeted for the masses. All in all it seems to be a well-rounded collection covering the basics, so if you are into more advanced stuff, you may find the stuff covered oh-not-so-tasty.

From the Opera site:

“Learning Web Standards just got easier. Opera’s new Web Standards Curriculum is a complete course to teach you standards-based web development, including HTML, CSS, design principles and background theory, and JavaScript basics. It already has support from many organizations (including Yahoo! and the Web Standards Project) and universities. The first 23 articles are currently available, with about 30 more to be published between now and late September.”

Jump to the first article in the series if you are still interested.

The People at RNIB have released the Surf Right Toolbar, which is — you guessed it — a toolbar for IE, which is designed to bring to the surface the often hidden accessibilty settings, such as turning javascript and images on/off, changing text size and so on.

Quoting:
“The Surf Right Toolbar is really for anyone who wants to adjust the way they view content on the web to make it easier to read. This could include people with mild disabilities, the elderly, people with reading problems, cognitive problems, using dial-up, photosensitivity and so on.”

You can grab the beta, right here.

An informative new website dedicated to webfonts & @font-face embedding. Features a list of fonts, which specifically allow @font-face embedding and fonts with an OpenFont license, so you can pat yourself on the shoulder, knowing you are a good boy/girl. Now I’d love to hear how many of you are jumping into font embedding, because I am actually considering it myself for a while now… Go.

For all of you – me included, of course, – who couldn’t make it to New Orleans and join An Event Apart, there is a short video online with Eric Meyer explaining why the W3C’s recommendation to allow browsers to insert quotation marks doesn’t actually make a whole lot of sense. Enjoy.

Yeah, the Firefox Team is aiming at the Guinness World Record for the most downloaded software in 24 hours, and guess what, I am all into it. I love quality bug-free software, especially if it means I can contribute at the shortening of the atrociously long wait, till IE6 will be abandoned and forgotten by its god-forgive-them-and-give-them-grey-matter users, and bless us, good web developers.

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

A welcome addition to my virtual library, I guess.

An inspiring article by Flickr’s core team member George Oates is well worth a read if you are planning on growing your online community, while you should probably steer clear and wisely avoid the filler article.