Im Rahmen der Serie Failed Redesigns in Germany hat die (empfehlenswerte) Website Vorsprung durch Webstandards die Webseite des Magazins FOCUS unter die Lupe genommen. Das Ergebnis:

Focus hat den Trend erkannt. Websites werden ja heutzutage tabellenlos gebaut. Soweit, so gut: Hurra, keine Tabellen. Mehr Fachwissen hatte die Relaunch- Chaostruppe allerdings nicht. Der Code ist vollkommen verschwurbelt (a href vor h), strotzt vor div– Verschachtelungen, wo ein li genügt hätte, und ist voll gestopft mit Inline-Stylesheets, altbewährten Blind-Gifs und esoterischer Abstands- div– Kunst.
Vorsprung durch Webstandards: Failed Redesigns in Germany – Episode 1

“Stimmt”, werden die kenner der Webstandardsszene sagen. Aber auch nur die. Für Außenstehende ist weder die Polemik noch das anschließende Codebeispiel hilfreich. Darauf macht Jeena Paradies in seinem Kommentar aufmerksam:

Ich glaube ehrlich gesagt, dass dieses Anprangern, vor allem bei großen und bekannten Seiten, eigentlich gar nichts bringt, außer vielleicht ein wenig Selbstbeweihräucherung und wie Alp letztens sagte, gegenseitiges auf die Schultern Klopfen, weil wir Webstandards benutzen.

So lange wir nicht dahinter kommen, warum sich Qualität, wie wir sie verstehen, nicht auch kommerziell durchsetzt, so lange bekämpfen wir nur die Symptome, anstatt das Problem an der Wurzel zu packen.

Genauere, konkete Vorschläge macht er zudem einem Weblog-Eintrag:

Ja, es ist einfach anderen zu Zeigen was sie so alles falsch machen […], schwieriger wird es aber vorzuleben wie es wirklich gehen kann und soll. Angefangen bei den konkreten Beispielen sollte man vielleicht daran denken die richtige Alternative dazuzuposten, über Vorleben in eigenen Projekten, was ja schon ziemlich viele machen, bis hin zur kommerziell erfolgreichen Seite, die auf Webstandards aufsetzt. Und genau da fehlt es meiner Meinung nach. Modernes Webdesign professionell an den Mann/Frau gebracht

Und recht hat er! Doch wer bitte setzt sich hin und schreibt den Code einer kommerziellen Seite um, verbessert ihn und postet dann noch eine Woche Details des Redesign-Prozesses, Tricks und Kniffe? Soviel Zeit hat doch niemand.

Naja, sagen wir fast niemand. Ich habe mir meinen freien Sonntag, die paar freie Stunden am Montag und Dienstag, die mir neben meinem Zivi-Job noch blieben, genommen und dieses Projekt nicht nur in Angriff genommen sondern auch vollendet. Dies soll keine Selbstbeweihräucherung sein, sondern zeigen, dass eine standardnahe Umsetzung eines solchen Layouts in zwei bis drei Arbeitstagen möglich ist.

Screenshot des Focus mit Webstandards

Noch ist nicht alles perfekt und der Code könnte noch ein wenig schlanker, das CSS besser dokumentiert sein. Aber genug der Vorrede, kommen wir zum Recoding der FOCUS-Startseite. Herausstechendstes Merkmal: Die Seite ist komplett skalierbar, inklusive Bilder und Flash(-Werbung). Einfach mal ausprobieren. Links funktionieren allerdings keine.

HINWEIS: Wie Jeena mir gerade per E-Mail mitteilt haben Firefox-Versionen unter Version 1.5 einen Fehler und zeigt unmengen von Scrollbalken an. Ich arbeite an einer Lösung für dieses Problem. OK, das hab ich geändert, es sollten keine Scrollbalken mehr da sein. Dafür zeigt der Internet-Explorer noch einen kleinen Fehler.

Update 19.01.2006, 21:11: Ich habe die Version 1.35 der Seite hochgeladen, die jetzt zumindest beim ersten Laden die Fehler in Opera und Safari ändern könnte. Beim Reload zeigt Opera 8.5 einen Fehler an (#content-Spalte rutscht nach unten). Weshalb auch immer. Hinweise zur Ergreifung des Täters lieferte im Übrigen Ingo.

Ach ja: Der gesamte Quelltext ist unter einer Creative Commons Lizenz veröffentlicht, die Namensnennung bei der Verwendung voraussetzt. Für eine angeregte Diskussion bin ich natürlich offen.

21 Gedanken zu „Der FOCUS im Fokus

  1. Grossartig! Einfach nur grossartig! Ich hatte das eigentlich selbst vor, aber man hat ja immer was zu tun. Darum bin ich dir umso dankbarer, dass du das gemacht hast – ich denke, wenn die Verantwortlichen bei FOCUS das sehen, werden sie sich sicher mal fragen, was denn daran so viel besser ist, und dann hoffentlich das ein oder andere (wenn nicht gar alles) auch übernehmen.

    Tolle Aktion! :-)

  2. Dein obiges Blogposting ist invalide.

    Mit Deiner Focus-Nachahmung begehst Du CSS-Verbrechen Nr. 1 und skalierst nicht mit der Schriftgröße.

    Bei meinen Firefox-Einstellungen (Minimum-Schriftgöße 15) sieht das Original heile aus, Dein Layout jedoch ist total zerschossen.

    fabiankeil.de/…screenshot-1024×768.png

    (145 KB)

    Der Wechsel auf valides CSS und (X-)HTML wäre sicher nicht verkehrt, sollte aber nicht auf Kosten der Benutzbarkeit gehen.

    Das wird oft vergessen.

  3. Ich bin auf deine Seite mit Opera 8 gekommen – und stellte fest, daß auch diese nicht ganz den Standards entsprechen kann. Da gehen irgendwo ein paar cite´s auf, die nicht geschlossen werden. Opera 8 interpretiert diesen Fehler anders – und folglich ist der gesamte restliche Text in KAPITAL-Buchstaben …

    ansonsten ein guter Versuch mit dem Focus!

    @Fabian: kannst du die Datei ggf. auch in eine Datei ohne Sonderzeichen hochladen?

  4. Ich muß leider auch eine traurige Nachricht übermitteln: Unter dem aktuellen Safari-Browser sieht die Seite nicht un ein bisschen Buggy aus, sondern total zerschraubt!

    Und Safari ist ja eigentlich auch nicht einer der »bösen« Browser…

  5. Auf meinem Safari ist gar nichts zerschossen, sondern sieht alles gut aus. Bdenkt mal bitte, dass dies ein einzelner CSS-Designer in seiner Freizeit gemacht hat. Wenn Eric noch zwei Tage zum Testen und Fixen dranhängt, geht das auch mit allen Browsern, die Euch so einfallen.

  6. @Fabian: Kann ich mit Firefox 1.5 auf Win nicht nachvollziehen. Der Screenshot bei Browsercam auch eine einwandfreie Version. Ob das an deiner ungewöhnlichen Schrifteinstellung liegt muss ich noch weiter untersuchen.

    @René: Textile hat mir da was zerhauen, war keine Absicht. Mit Fabians Dateiname ist ähnliches passiert, das x in 1024×768 muss als Buchstabe geschrieben werden. (Ich werde das ändern und verlinken.)

    @Timo: Auch hier zeigt mir Browsercam ein anderes Ergebnis an, nämlich eine einwandfreie Darstellung. Ich werds aber nochmal überprüfen lassen.

    Ach ja, der IE 5.2 unter MacOS fnktioniert auf gar keinen Fall… Der dürfte auf der Focus-Seite auch einen anteil von unter 0,1% haben.

  7. @Eric: Wenn Du in about:config font.minimum-size.x-western auf 15 setzt sollte es nachvollziehbar sein.

    Durch das Festsetzen der Mindest-Schriftgröße scheitern Deine Versuche, die Schriftgröße weit unter 100% zu drücken (font-size: 68.75%;). Meine Standard-Schriftgröße ist 16, selbst font-size: 20%; würde sie nur auf 15 verringern.

    Dadurch weicht 1em in meinem Browser stark von 1em in Deinem Browser ab und die Kalkulation geht nicht mehr auf.

  8. @Fabian: Aha. Deine Außenseiterkonfiguration macht irgendwas mit dem Hauptmenü, ansonsten ist die Seite aber komplett… Ich schau nochmal drüber, aber ich kann dir nicht versprechen, dass ich das gebacken bekomme, da müsste man ja alle Benutzerkonfigurationsmöglichkeiten berücksichtigen, was unmöglich ist.

  9. @gerrit: nee, nicht bei Focus, der Fehler war hier – und ist beseitigt! Nun sieht die (also yatil.de) auch im Opera dufte aus …

  10. Bei Hochskalierung der Schrift wächst der Inhalt vertikal über das Browserfenster hinaus (Opera 8.5). Das schränkt die Schriftvergrößerung leider unnötig ein, wobei mehr als 150 % über dem Durchschnitt liegen.

    Unter 800 Pixel Breite wird der Inhalt rechts abgeschnitten, das ist ein handfester Nachteil. Das Layout leidet aufgrund des konsequenten Nachbaus am Grundübel aller Tabellen-Designs, der Zementierung aller Elemente. Eine vollständige Anpassung an unterschiedliche Fenstergrößen ist so nicht möglich – und war offenbar auch nicht angedacht. Insofern handelt es sich um eine gute CSS-Umsetzung einer Tabelle, allerdings vermisse ich die Flexibilität eines reinrassigen CSS-Layouts.

    Screenshot Opera 9p1 (das mag allerdings am Beta-Status liegen).

    Interessant zu wissen wäre auch, wie der IE 7 auf die vielen MS-spezifischen Hacks reagiert.

  11. @gerrit: Vielleicht hast’ Du ne andere Version von Safari. Ich nutze grade 2.0.3 – Ich hab’s auch auf zwei Macs angeschaut und der Fehler ist immer identisch.
    Natürlich klar, daß das für einen allein schon eine großartige Arbeit ist – will hier auch nicht »rumpampen«.
    @Eric: Ich hab mal Screenshots online gestellt: siehe hier. Und ich bin auch froh, daß das unter IE 5.XYZ auf’m Mac nicht funktioniert. Das dürfte dann wohl auch ein echtes Wunder sein, und ich würde Angst bekommen daß die Internet-Welt aus den Fugen gerät…

  12. Hallo Eric,
    respekt vor der großen Leistung, war wohl an der einen oder anderen Stelle nicht ganz einfach… Aber das ganze auch nun in ein paar Tagen umzusetzen… Hut ab!!!

  13. Tolle Arbeit, war sicher nicht einfach. Solche Aktionen braucht die Webstandardsszene.

    Hast du Focus Online schon auf das Projekt hingewiesen? Mich würde die Reaktion interessieren.

  14. wow, echt genial. auch ich werde es mir sehr genau anschauen und in das redesign meiner website einfließen lassen.
    respekt!

  15. @Oliver: Die Skalierung ist ein großer Vorteil des Designs mit CSS. In einen Streit darum, ob fluide Layouts (das sind die, die sich an die Fensterbreite anpassen) möchte ich eigentlich nicht geraten, ich mag es so wie es ist eigentlich lieber. Der Fließtext wird mir sonst zu breit.

    @Timo: Ist mir ein Rätsel… Auch, warum dein Link nicht funktioniert. Kannst mir die Adresse ja mal per E-Mail schicken.

  16. Saubere Arbeit!

    Aber in den Kommentaren offenbart sich wieder mal der entscheidende Nachteil von relativen Größenangaben in em: Hat ein User in den Browser-Prefs etwas anderes als 16 Punkt Standardgröße eingetragen, hat man als Webdesigner keinerlei Kontrolle mehr über das Layout.

    Vor anderthalb Jahren habe ich sinngemäß mal geschrieben: Es wäre äußerst hilfreich, wenn die Betriebssysteme eine globale Variable mit der errechneten, tatsächlichen Bildschirmauflösung zur Verfügung stellten, die u.a. von Browsern zur korrekten Darstellung von relativen Größenangaben verwendet werden könnte.

    Erst wenn so etwas in dieser Art passiert, werde ich selbst auf relative Größenangaben umsteigen. Bisher überwiegen m. E. die Vorteile absoluter Werte.

  17. Wirklich sehr gute Arbeit. Genau einen solchen Ansatz an Flexibilität, wünsche ich öfter in Anwendung zu sehen, eben nicht nur auslaufende Textspalten, bei denen die Lesbarkeit hops geht. Ein Musterbeispiel für CSS.

    Eine Frage hätte ich da. Wie erklärt sich der font-size Wert, von 68.75% für das html-Tag?

  18. Geil, endlich wird gehandelt! Hatte schon bei Praegnanz.de für die Einführung eines Begriffes geworben. Zum Biespiel: HTML-Bashing usw. ;–)

    Gibt es schon Reaktionen der Focus-Leute?

  19. @chismue: Das erreichnet sich einfach aus der Quasi-Standard-Textgröße von 16 Pixeln. 68.75% davon sind 11 Pixel, die Schriftgröße des Focus. Weiteres in den Folgeartikeln…

Kommentare sind geschlossen.