Scarf*oo

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.

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.

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.

The W3C announced today that the WCAG2 Candidate Recommendation is likely to go live by the end of the year. With their words, “Candidate Recommendation means that we think the technical content is stable and we want developers and designers to start using WCAG 2.0, to test it out in every-day situations.”

If you are interested to help them, you are warmly welcome to do so by building your content following the recommended guidelines outlined here.

Hey fellow web developers and designers, there is a new LinkedIn group available for your collaborating and stay-in-touch necessities called “Web Standards Design + Development“, enstablished by Greg Storey from airbagindustries.com. The membership is free, but you’ll have to be approved to join in.

And you are waiting for… what? Sign in.

WebKit, the development version of Apple’s Safari web browser now supports another advanced CSS feature, which keeps blowing it way ahead of the competition…

Competition?

For more info on the subject, visit Surfin’ Safari Blog.

“Bring your data to visual life with web standards, and roll you own Google-style maps.” is the theme for the latest issue of ALA.

The first article by Wilson Miner shares us techniques for incorporating data visualization into standards-based web navigation patterns, while Paul Smith teaches us how to build our own mapping application using open-source software and how to integrate it into our web site.

Enjoy the read!

Google App Engine is a new fully-integrated development environment, which offers you to run your web applications inside the Google infrastructure, which means you have their software framework, processing and storage power to work with. In this preview release you can sign-up for a free account with 500MB of persistent storage and enough bandwidth and CPU for 5 million monthly page views. For now you are limited to python-based web applications, but they promise to support more languages in the future.