So, for those who missed it, I attended @media this year. I really enjoyed the great speakers, learned some more things about design and usability and met quite a lot people for the first time. But what did I like the most? Here some things I actually learned and liked.

The first presentation was by Jeffrey Veen, about how to design with and organize data in a clear way. It is a bit impossible to reproduce the key things in one sentence. In my opinion it is a good thing to give the user a bit control of the way the data is resented. That could be done by a table with the data, and also displaying a graphic representation. (To make it accessible, you could use a table, and turn that with JavaScript and canvas into a graph. Something I discussed a bit with Robert Jan later.)

Another presentation I liked very much, was about Mental Models. Indi Young did a really great job giving us an introduction into that. Basically it is about asking people what they feel about something (a website, a hotel, anything), and the things they expect of it. By grouping all those things, and combining that with parts of the subject that support those feelings, you can quite easily see what kinds of things need to be changed to achieve a better experience for the clients or users. She has also written a book about it, and I put that one on my wishlist.

Andy Clark did a design presentation, wherein he explained in a very good way how he got inspiration from comic books for his designs. I think it was a good topic and it can be applied to other creative things, too. The essence is to understand really good what the original creator wanted you to feel or do. If you want to achieve the same with your website, it is a matter of applying the method used.

For me the presentation by Dan Rubin was very educative. As a developer, primarily, I don’t really have much experience in adding details to the designs I create. He pointed at a lot of things I really wouldn’t come with by myself.

Although I didn’t really learn much from the presentation Steve Faulkner gave on WAI-ARIA, it was good to be part of the audience. He introduced ARIA, the way to make applications accessible by applying some attributes to input elements. He clearly demonstrated what the benefits are, by using JAWS to demonstrate some simple applications that use ARIA. (A good point to start with ARIA, is the documentation at Mozilla.)

A great speaker was Richard Ishida, who demonstrated Unicode as a tool for creating an international website. He didn’t tell anything new to me, made very clear for everyone in the audience why and how to think good about i18n before you start to build the website. It was really a pity he couldn’t present a part of his presentation (not enough time).

So, that were the most interesting parts for me. I hope to attend @media next year again, I’d really love to see more presentations like these.

Something that has annoyed me lately, is how in-accessible some web sites are for people who browse using their keyboard. Number one issue is, in my opinion, that some people simply remove outlines from links. Outlines are those gray borders around links when you click on them. But is is very okay if you remove outlines for some links, but only if you add a proper focus state to that link.

Let me give an example first. The first menu has a nice hover state. The second menu also has an hover state applied to it, but also hides the outline. Some designers dislike the outline, and try to hide it. Also some CSS reset methods (like the popular reset method by Eric Meyer) ‘reset’ the outline.

To be better accessible it is good to declare a focus state for your links. Focus states are, like hover states, a pseudo-class for CSS, which you can apply easily. If an element can receive actions with a keyboard, the state’s properties are applied. Think of typing into a text box, or hitting space when you use tab to navigate.

You could, for example, declare both focus and hover in one selector, using a comma to separate them. See this example. It should be noted, that I change both the color and shape of the element. This is done for people with a color deficiency, because if you use (slight) color changes the link would be much more difficult to recognize by colorblind people.

If all was that simple.

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.

I came across an web page (I don’t link) that had removed the outline from all links. Why? I don’t know. Maybe because it looks nicer. By removing the outline, however, an accessibility problem occurs.

But first, what are the outlines? And how to remove them? Outlines are the gray dotted borders around links, buttons and input elements that indicate where the focus is. To remove them, the CSS property outline needs to set to none. Example: a:focus {outline:none;}. Some CSS reset methods also remove the outline. Not all browsers support this property, but quite a few do.

The problem you get when you do remove the outline, is quite simple. If you don’t use a mouse to navigate, but instead use the keyboard, you cannot navigate easily. Because you use the tab-key, you don’t know which link you are when you hit tab. As alternative you only can see the URL in the status bar (not ideal, is it?).

It can become even worser when the page uses the tabindex attribute to mess up the default order. I have never believed in the usage of that attribute, since you simply need to place the elements in the order you want in the source. With CSS you can visually place them almost anywhere you want.

Conclusion: just not remove the outline. Your page looks the same, and everybody is happy.

Today it is Blog Action Day. One day to think about the environment. To think about what you can do for a better environment, even if it is a bit, since a better environment starts with yourself. The color green plays an important role in this, since almost everybody associates it with a better environment.

In the development of a web site green also plays a quite important role. Some people live for the green bar the W3C markup validator shows when a web page validates. The green color indicates everything is good, and that is also what a better environment is. Unfortunately nothing can be validated on how good they are for the environment, even web sites not.

Another green aspect of web development are Microformats. Microformats help people and computers interact with each other much easier, they are more balanced. Thinking about the environment also about getting a better balance between you and everything around you.

For the server-side programmers, I have this one: PEAR. Their web site is green, but that’s not the only equality between PEAR and a better environment. PEAR allows every developer to share and grab code others developed. Developers can learn and safe time by looking at code by others, or be nice for colleague developers by sharing their code. A greener world also is good for others, and people can learn from nature in many ways.

I almost forgot graphic designers. It’s a fact a higher percentage of the designers uses an Apple Mac. So it is good to know Apple was tackled down by Greenpeace to build greener Apples. It is a result of the Green My Apple website.

Concluding I can say web designers and developers can help the world to be much greener. If you have more ideas, I would love to hear: just drop a comment.