21.01.06 // Focus Recode: Redux

Zuersteinmal danke ich allen, die sich mit dem Entwurf auseinandergesetzt haben und ihre Anregungen und Kritik mit mir geteilt haben, egal ob hier, auf anderen Webseiten oder per E-Mail.

Es sind jedoch auch ein paar Fragen aufgetaucht, die ich hier beantworten will.

1. Weshalb hast du die Seite nicht direkt redesignt?
Das war nicht Sinn dieser Aufgabe. Es sollte demonstriert werden, dass ein vorgegebenes Layout browserübergreifend, semantisch und barrierearm aufgebaut werden kann.

2. Warum hast du kein liquides Layout (passt sich der Fensterbreite an) genommen statt einem elastischen (passt sich der Schriftgröße an)?
Bei hohen Auflösungen läuft die Schrift zu weit und das Lesen fällt schwer. Beim elastischen Layout jedoch wird die Relation zwischen Laufweite und Schriftgröße auch bei einer Vergrößerung erhalten.

3. Ein paar Zahlen, bitte!
Okay. Ich habe die Beispielseite um Linkziele erweitert, um einigermaßen eine Vergleichsbasis zu haben. Dann ergibt sich folgendes Bild:

  • (X)HTML-Datei von 115kB auf 49,2kB (-57%)
  • CSS-Datei(en) von 34,3kB auf 12,9kB (-62%)
  • JS-Aufrufe von 23 auf 0 (-100%)
  • Class-Attribute von 610 auf 150 (-75%)
  • Style-Attribute von 413 auf 19 (-95%)
  • Listen (ul) von 0 auf 28
  • Überschriften (h1) von 1 auf 20 (+2000%)
  • Absätze (p) von 0 auf 76

4. Wieso hast du überhaupt Style-Attribute im Quelltext?
Das sind alles Angaben über Bildbreiten. Ich habe versucht sie so gering wie möglich zu halten. Zumindest ist diese Angabe – neben der Angabe in der Stylesheet-Datei – die einzige Möglichkeit die Bilder mit der Schrift vergrößern zu lassen.

5. Weshalb ist es überhaupt wichtig, dass Überschriften, Listen und Absätze vorhanden sind?
Weil es nicht nur Leute gibt, die sich die Seite anschauen. Sehbehinderte beispielsweise können sich ausschließlich die Überschriften vorlesen lassen und dann direkt zu diesem Abschnitt springen.

6. Bedeutet das, dass deine Umsetzung barrierefrei ist?
Nein. Barrierefreier vielleicht oder barrierearm, aber nicht barrierefrei. Das hat zwei Gründe: Zuersteinmal war die Seite nie barrierefrei konzipiert und es gibt designerische Schwächen hinsichtlich der Barrierefreiheit, die auch durch ein Recoding mit Webstandards überwunden werden können. Allerdings ist das Zoomverhalten und die semantische Auszeichnung bereits ein Schritt in die richtige Richtung.

7. Weiß die Redaktion des Focus davon?
Wenn, dann nicht von mir. Ich arbeite aber zusammen mit anderen Webkrauts an einem Anschreiben. Das Anschreiben der Wbkrauts ist raus.

8. Wie verhält es sich mir dem Copyright?
Für die Texte und Bilder beanspruche ich überhaupt keine Rechte, lediglich der Quelltext die Umsetzung ist wie im Dokument beschrieben geschützt.

Kommentare ()

  1. Link zu diesem KommentarSilentWarrior

    21. Januar 2006, 22:34 Uhr

    Eric, eine Frage: Warum hast du die CC-Lizenz gewählt? Ich könnte mir durchaus vorstellen, dass das für die FOCUS-Leute ein Hinderungsgrund sein könnte, dein Recoding zu übernehmen; damit müssten sie ja quasi zugeben, dass die Seite von “irgendeinem popligen Webdesigner” erstellt wurde. Und diejenigen Leute, die etwas von der Materie verstehen, wüssten ohnehin, von wem der Code stammt—den Rest interessiert es sowieso nicht.

  2. Link zu diesem KommentarEric

    22. Januar 2006, 08:29 Uhr

    Ganz einfach: Ersteinmal gehe ich davon aus, dass der Focus das Design in den nächsten zweitausend Jahren übernimmt, vorher feuern sie Markwort! Und wenn sie es übernehmen oder Teile davon, dann denke ich, dass eine Namensnennung für die Arbeit nur gerecht ist. Für diese Entwicklung müssen sie ja nicht bezahlen. Gegen eine großzügige Geldsumme im Tausch würde ich aber auch auf mein Recht verzichten :)

  3. Link zu diesem KommentarJann

    22. Januar 2006, 12:21 Uhr

    Einfach klasse wie du das hinbekommen hast, Eric. Mal gespannt, ob sich der Focus mit dir in Verbindung setzt. Ich würde es dir wünschen, da schliesslich auch eine menge Arbeit dahinter gesteckt hat.

    Ich hätte allerdings auch ein paar Fragen:
    1. Wie errechnen sich die verschiedenen “krummen” em-Werte? Wie bist du vorgegangen?
    2. Wie kann man seinen Quelltext unter der Creative Commons Lizenz veröffentlichen?

    Ich bin gespannt auf deine Antworten ;)

  4. Link zu diesem KommentarEric

    22. Januar 2006, 15:21 Uhr

    @Jann: Die Krummen em-Werte errechnen sich von der Schriftgröße aus. Auf der Focus-Seite haben die meißten Abschnitte eine Schriftgröße von 11px. Um beispielsweise ein 110px breites Bild – bei der Standardschriftgröße – auch 110px breit darstellen zu lassen muss man es durch die Schriftgröße teilen. Hier 110/11=10 => die Breite des Bildes muss mit 10em anegeben werden. Genauso sind .45em circa 5px.

    2. Na in dem ich’s dazuschreibe :) Ich rede da ja auch nicht vom Quelltext (der hätte wahrscheinlich keine einklagbare Schöpfungshöhe) sondern von der Umsetzung. Das beschreibt also das Verfahren.

  5. Link zu diesem KommentarHeiko

    22. Januar 2006, 16:42 Uhr

    Die Zahlen waren ja fast zu erwarten und sie sprechen eine deutliche Sprache. Mit deinem Einverständnis Eric, würde ich deinen Artikel gern als Artikel der Woche in meinen Blog aufnehmen. Da besondere Artikel die mit Webstandards und dessen Einsatz zu tun haben, so oft wie möglich gelesen zu werden sollten.

  6. Link zu diesem KommentarEric

    22. Januar 2006, 21:19 Uhr

    @Heiko: Kein Problem.

  7. Link zu diesem KommentarJeena Paradies

    26. Januar 2006, 10:18 Uhr

    Wird sich jemand mit Focus in verbindung setzen, bzw. hat es schon jemand gemacht, oder soll ich das machen? Eric alleine das alles durchziehen zu lassen fände ich nämlich sehr schwach von uns anderen, wenn der Focus aber davon nichts erfährt war seine ganze Anstrengung umsonst.

  8. Link zu diesem KommentarEric

    26. Januar 2006, 20:17 Uhr

    @Jeena: Die E-Mail ging gestern raus, siehe Webkrauts-Weblog.