Ab morgen gibt es wieder eine der besten Ressourcen für Webworker online, der Webkrauts-Adventskalender öffnet 24 Türchen bis zum Ende der Weihnachtszeit.

Das Motto in diesem Jahr lautet „Tipps und Tricks“ und enthält viele (hoffentlich) interessante Artikelchen rund um den Webworker-Alltag.

Just got that email:

Hi,

I would like to invite you to promote yatil.de on search engines
by participating in free automatic link building system – [REDACTED].

[…]

This email was sent after finding your site on Google.

So, if you find my site via google, why should I care about your service that makes me findable via google?

What annoys me the most about the Discussion about Chris Heilmann’s talk at A-Tag in Vienna is not only that Chris doesn’t want to speak at German accessibility events at all anymore, but the claim that Chris is solid against any laws. That is not what he said.

His point was that accessibility in the real world can only be so good or average as the developer and designer knowledge is. If a designer/developer is suddenly in charge to provide an accessible website he will look for a way to archive that goal with as little effort as possible. This will lead to accessible websites but badly designed ones. Additionally there may be problems with jump links which are hidden with display: none and other oddities (like text-only versions etc.).

Of course we all think: Such a person should never be in charge to make a website (as, to my understanding, we aim that all websites are accessible, right?) – but then 90% of web developers needed to change jobs, and we’d get only two websites a year online as those few agencies who do accessible websites can’t cope with the demand.

The other problem is that law hinders progress. German law, which is a (not compatible) reformulation of WCAG 1.0 prohibits the use of any scripting and other non-standard techniques. That means no youtube, even embedded on a website even if the video is completely subtitled and accessible. The accessible youtube player is nice but not allowed. WAI-ARIA techniques: not allowed.

The problem: German law is very old (2002), but it was also amongst the first to even implement a law about web accessibility. The now so often cited PAS78, the British accessibility law, is from 2006. And it is not undisputed either. We have to see how fast that really gets updated, the German law is about to update as well.

And then there was the claim about “eleven years of education and nothing changed, we need thumbscrews”: This is not true. Layout tables are in general gone, federal websites are accessible and even websites that are not required by law are generally better accessible. I wish that all websites are required to be accessible, but that isn’t possible as it seems. Even disability associations don’t bother to fight for it, which is the real scandal here.

There are a few tasks that a good accessibility law should do:

• Create awareness. Only if there is awareness in companies, they will give developers time to be educated and do great stuff.
• Do not create a climate of fear. If you have to fear that you are sued, because you made a mistake you’ll get conservative and lethargic. This shouldn’t happen as the web and accessibility technology is getting better and better every day.
• Create mediations. If there is a problem with a website people should come together and talk (first), not sue. That works quite well in Austria. Mediations are often a lot cheaper than trials, too.
• Reference international standard. WCAG, whatever version is current. Austria does that as well, so immediately after WCAG2 were out, web developers were required to use that. This creates again a climate of education. Germany copied WCAG1 and made that a regulation which is now outdated for over a year.
• Be inclusive. There is no reason why public and private websites should be treated differently, so don’t.

We need laws, but we need good laws, not outdated ones. The myth of the flexible law is exactly that, a myth.

About 6 months ago I tweeted some steps for really good web sites with progressive enhancement. Those tweets aren’t available via the official Twitter search but I’ve just found them in my Tweetstats. Just click #petweet and you’ll see the original 6 tweets. Here I’ve added and clarified some points.

1. You need to know your content first. Real content, not the Lorem Ipsum kind of content that will later out of the sudden sill be some kind of rich text with images and stuff.
2. Get an overview on the different templates, identify reusable elements and make them reusable: use classes!
3. Add exceptionally good HTML. Think about every part of the site, use the most appropriate elements, don’t get too distracted. Use table for tabular data. Keep it simple. And then simplify some more!
4. Add CSS. Start your CSS with the basics: reset, fonts, positioning. Try not to add new elements to your HTML only because you think it can’t be accomplished with the existing structure. Often it will work and you saved not only some bytes but some maintenance cost.
5. Test regularly across targeted browsers. That is important. Start your working day with an hour of browser testing, at least use some screenshot tool to look for breaking layouts. Do not fix them immediately, just note them down. If you get back to that element during the day, fix it then or as a wrap up at the end of the day. (You will feel in “got things done” mode when you leave the office!)
6. Adding bells and whistles for real browsers, so IE7+ and the others, a website doesn’t have to look the same in all browsers, but it should at least be a consistent look and feel. If something is not supported by a browser use default fallbacks. If the fallback is not working as intended, add the feature only to browsers who support it.
7. Use shortcuts. You don’t get paid for reinventing the wheel every time, so don’t do it. Use a JS library to get around inconsistencies in browsers and use a CSS framework if you know it very well. Typically you’ll create a flexible framework for each project and you’ll learn which parts work and which to reuse. Different projects need different approaches.
8. Be accessible. Every part of the web site has to be accessible even if there is only the raw HTML code rendered. Everything can (and will) break, so be sure that the content is accessible. If non-targeted browsers like IE6 get something wrong, you can rely on your existing HTML structure and hide the JS from the browser.
9. Deploy, Enjoy. (Okay, that isn’t really a guideline ;)

One reminder: You may want to backup your important data regularly, probably with time machine on the mac or with Dropbox. You may also want to use at least a local version control system like GIT to track your progress.

To wrap this up, there will be an online publication which moves along those lines some time in spring 2010, follow me on twitter (which is mostly German chatter, I know) for the latest news.

Im Juli nahm ich am CSS Summit teil, einer Online-Konferenz zum spezifischen Thema CSS. Ich würde behaupten mich mit CSS gut auszukennen, doch unter anderem diesen einen kleinen Trick konnte ich aus dem Vortrag von Dave McFarland mitnehmen: Cross-Browser rgba().

Rgba() ist eine Methode um Alphatransparenz mit Farben zu benutzen, im Gegensatz zu Opacity kann man so halbtransparenten Text auf einem Hintergrundbild machen oder halbtransparente Hintergrundfarben. Nachteil der Technik: Sie ist nur für Firefox (ab Version 3), Safari und Opera 10 verfügbar. Andere Browser tun einfach nichts, wenn sie auf diese unbekannte Angabe stoßen. Beispiel:

background-color: rgba(255,255,255,.3);

Diese Angabe zeigt in den oben genannten Browsern eine halbtransparenten, weißen Hintergrund an. Andere Browser zeigen nichts an, also „Volltransparenz“, wenn man so will. Man kann sich dadurch behelfen, dass man ihnen vorher eine Hintergrundfarbe ohne Transparenz angibt:

background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.3);

Alle CSS2.1-fähigen Browser zeigen nun einen rein weißen Hintergrund an, wenn sie diese beiden Regeln sehen, da sie die zweite „einfach“ ignorieren. Diese Art von (nicht-)transparentem Hintergrund funktioniert auch im IE8, im Firefox 2 und Opera. Doch für IEs gibt es eine Möglichkeit ebenfalls transparente Farben zu nutzen (obwohl es natürlich nicht halb so schön ist wie rgba()).

Im IE nutzen wir die proprietären Filter um den Effekt zu erzeugen. DXImageTransform.Microsoft.gradient kann nämlich nicht nur Farbverläufe zeichnen, sondern auch halbtransparente Farbverläufe. Wenn sich die Verlaufsfarben dabei nicht verändern bedeutet das faktisch eine halbtransparente Fläche.

Indem wir unserem Element nun folgenden Code mitgeben bekommt es in IEs<8 eine transparente Fläche:

filter:progid:DXImageTransform.Microsoft.gradient( 
  startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);

Erklärungsbedarf benötigen sicher die startColorstr und endColorstr-Werte. #4CFFFFFF ist ein Hex-Wert, der sich aus zwei Bestandteilen zusammensetzt: #4C als Grad der Transparenz (#4C = hex(.3*255)) und #FFFFFF für die Farbe.

Das Problem im IE8, da er die CSS-Regeln beachtet hat er ja den weißen Hintergrund für die älteren Browsermodelle. Das müssen wir ihm noch abgewöhnen. background-color: transparent\9; wird nur vom IE8 verstanden (fragt nicht warum, ich hab’s bei Dirk gefunden).

Noch einmal das gesamte CSS auf einen Blick:

background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.3);
background-color: transparent\9;
filter:progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
zoom:1;

Also: Wir setzen eine Standard-Hintergrundfarbe, überschreiben sie für Moderne Browser mit der halbtransparenten Variante, entfernen sie aber für den IE8 ganz. Dann benutzen wir den IE-Filter um einen halbtransparenten Gradient ohne Farbwechsel zu erzeugen. Und zum Schluss geben wir dem Element noch hasLayout, das braucht der IE6 nämlich um den den Trick überhaupt darzustellen (und schadet ansonsten niemandem).

Beispiel- und Testseite

(Wer Transparenz auch für FF2 und OP<10 benötigt sollte das mit einem halbtransparentes PNG bewerkstelligen oder alternativ Dirk Jesses Lösung benutzen, die aber ein zusätzliches, rein zu Präsentationszwecken eingefügtes div benutzt – und dessen Beitrag mich zu diesem Beitrag inspiriert hat.)