Years ago the GIF format was famous, with the ability to bring animation in browsers. Flash didn’t exist, so GIF was the only way to do that. It became a true nightmare when people began to make annoying images. Very fast it became a not done for web designers to use animated GIFs.

Times have changed since then. Web designers now would like to use advanced graphical possibilities, like true colors and alpha transparency. PNG offers them those things. However, if we want to do animated stuff, GIF and Flash are still the only things we have. Both of them have their downsides.

GIF has bad support for color and transparency. For really cool things it is impossible to use it. Flash can do those things, but the downside of Flash is the impossibility to use it as background with your CSS, or to use it as list item.

The inability for PNG to support animation, and the downsides of GIF led to the development of MNG: Multiple-image Network Graphics. It was developed by the team that developed PNG itself. The real downside was the complexity, the code to read and write MNGs is quite heavy. Mozilla implemented it, but dropped it later to make the browser faster, and also because nobody used it.

Mozilla stated to work on an own implementation of animation in PNG, named Animated PNG (APNG). Really usefull about this is that it is completely backwards compatible. A non-APNG user agent will only show the first frame of the animation. For them no information will be lost, and it is even possible for APNG user agents to ignore the first frame.

Great news lately was the default implementation of APNG in the newest versions of Firefox (version 3) and Opera (version 9.5). Both are not public yet, but will become that in the next few months.

There are a few applications that can make an APNG image. There is, for example, a Firefox extension to make them (will only work in the Firefox 3 betas). Another one is svg2png, a program that can transform SVG images to PNGs. Last but not least, there is an online generator called APNG Assembler.

More information on APNG can be found in the specification, or in the introduction at Mozilla Labs.

Many designers want to use fonts for a web site that are not installed on most of the computers. More fonts are a large problem, but there are some solutions.

The first one is a replacement system. You just use h1 and h2 elements for your headers, and after the page is loaded a JavaScript will turn them into an image or a Flash file. All the images are auto-created. sIFR is the most used one in that kind. This solution is very welcome when you’re building a large web site, or a web site that changes of content very often, like blogs.

When the web site is static (the content doesn’t change often), there are two methods you can choose. But one is in my opinion very bad practice.

That bad practice is the usage of a background image, attached to the headers via CSS. It can be done via text-indent (set that to a large, negative number), or via a span element within the header element. CSS then hides the text with the simple rule display: none;.

This is bad practice, because when the user had images turned of, the user doesn’t see anything! Plus, it is not very semantic because you do show an image, aren’t you?

My way for small web sites, is to use just an image tag inside the header element. Via the alt attribute you handle the search-engines, screen readers and people with images turned off. Unfortunately, some browsers do render something weird when there is no image to display, like that red cross in Internet Explorer. I satisfied myself to hope not many people have turned images off…

So, all not very cool solutions… but better solved in this way than wait for ages for more fonts for the web.

Alan made a second part of his successful Animator vs. Animation.

Flash isn’t really my thing, but accessibility is. So Mike’s linkdump about Flash and accessibility was good news to hear about: Flash can be more accessible than most people know.

Flash, being the only technology with any kind of ubiquity worth developing in, seems to answer so many branding problems but creates so many technical problems that most designer / developers go back to the client and say. “Sorry, there are some things on the internet that do not work…”.

“No” has never been a very good selling point.