Byteshift: Webdesign aus Berlin


was| wer| wo| details| english

Slashdot: Standardkonform umgearbeitet, Teil II
Autor: Daniel M. Frommelt
Alistapart Ausgabe: 165

{Teil II einer zweiteiligen Folge}

In Teil I haben wir gezeigt, wie Slashdot durch den Umbau zu semantischem XHTML und CSS-basiertem Layout Geld und Bandbreite sparen könnte. In Teil II werden wir die Möglichkeiten ausloten, wie standardkonformer Quelltext und intelligenter Einsatz von CSS Slashdot (oder ihre Site) auch im Druck oder auf Handheld-Geräten gut aussehen ließe.

Druckfreundliches Slashdot

Die Datei print.css fügt eine Eigenschaft hinzu, die Slashdot bisher nicht aufwies - und das mit nur 10 Zeilen CSS Quelltext. Wir deaktivieren einfach auf das floating eines jeden <div>s und verbergen jeden <div> mit display:none, der Informationen enthält, die für ein gedrucktes Dokument unnütz sind, wie z.B. search, Werbung etc. {das ALA 3.0 Print Style Sheet verfolgt einen vergleichbaren Ansatz - d. Hrsg.}

Zum Schluß wird die Datei mit dem passenden Medientyp verlinkt, so daß das CSS nur aktiv ist, wenn der Browser einen Druckbefehl ausgibt:

<link rel="stylesheet" type="text/css" href="styles/print.css" media='print' />

Die Slashdot Site hat jetzt eine druckfreundliche Version ohne besonders gestaltete Webseiten oder serverseitige Skripten.

Slashdot: Handheld-freundlich

Internetfähige Handheld-Geräte werden immer populärer. Warum sollte man also die Website nicht auch für diese Geräte ausrichten? Das Problem, daß die meisten Webdesigner damit haben, läßt sich hierauf reduzieren: "Ich habe kein Riesen-Sortiment an Handheld-Geräten zum Testen!" Emulatoren sind eine einfache Lösung. Hier sind einige Links zu denen, die ich benutze:

So sah Slashdots Website auf dem Openware Phone Simulator aus (Abb. 1)

Abbildung 1

[Die Abbildung zeigt das Original der Slashdot Site, wie es im Openwave Phone Simulator angezeigt wird. Das layout ist fragmentiert und der Größteiel des Texts nicht sichtbar]

Bemerken sie das Hauptproblem? Es gibt schwarzen Text vor einem schwarzen Hintergrund ohne die Möglichkeit, Text auszuwählen um ihn sichtbar zu machen! Die einzigen sichtbaren Worte sind Links. Die ist so, weil im HTML 3.2 Document dies im Quelltext steht: <body BGCOLOR="#000000">

Das ist in Ordnung für die meisten Browser da später im Dokument der Hintergrund über Tabellen gewechselt wird, aber die Tabellenstruktur wurde vollständig aufgebrochen, um dem Handy-Display gerecht zu werden. Wenn sie sich z.B. den oberen Bereich derselben Webseite ansehen, werden sie bemerken, wo genau die Tabellen aufgebrochen wurden, um das Dokument passend zu machen. (Abb. 2)

Abbildung 2

[Die Abbildung zeigt eine Detail des Originals der Slashdot Site, wie es im Openwave Phone Simulator angezeigt wird. Das Tabellenbasierte Layout zeigt Text jeweils in zwei-Zeichen Schritten an, einer über dem anderen.]

Sie können die Seite fast lesen: "Lo...gi...n W...hy Lo...gin...?" Lassen sie uns jetzt die standardkonforme Version ansehen, die auf der Basis von XHTML und CSS geschaffen wurde.(Abb. 3)

Abbildung 3

[Die Abbildung zeigt das Original der Slashdot Site, wie es im Openwave Phone Simulator angezeigt wird. Der Titel und die Autoren Informationen des Artikels werden vollständig dargestellt]

Hier wird der gleiche Bereich der Seite dargestellt wie aif Abb. 1. Der einzige Unterschied besteht darin, daß der Quelltext jetzt standardkonform ist. Keine zusätzlichen Quelltextänderungen waren notwendig. Lassen sie uns schnell noch den Palm Emulator bei der Darstellung des alten Slashdot Quelltexts ansehen. (Abb. 4)

Abbildung 4

[Die Abbildung zeigt das Original der Slashdot Site, wie es im Palm Emulator angezeigt wird. Das Layout ist viel zu breit, um auf den Bildschirm zu passen und würde ausgiebiges Scrollen erfordern, um auch nur den Titel des Artikels zu sehen.]

Es fällt direkt auf, daß ein horizontaler Scrollbar im Display erscheint. Es sieht beinahe so aus, als blickten wir durch ein Mikroskop auf die Seite. Sie können die Informationen ansehen, wenn sie das Scrollen nicht stört. Die Seite wurde für einen Computer-Bildschirm entworfen, nicht für ein Handheld-Display. Lassen sie uns das mit der standardkonformen Slashdot-Version vergleichen. (Abb. 5)

Abbildung 5

[Die Abbildung zeigt die umgearbeitete Slashdot Site, wie sie im Palm Emulator angezeigt wird. Der Titel, die Autoreninformationen und die Kategorieinformationen werden vollständig angezeigt]

Eine saubere Darstellung durch standardkonformen Entwurf!

Aber ich höre sie schon sagen: "Hey, da ist doch ein horizontaler Scrollbar!" Ja, ich weiß. Wenn sie sich den "Adopting Open Source" Artikel auf der Seite ansehen, werden sie bemerken, das der Name des Departments "the don't-worry-they'll-print-more-money dept." lautet. Das ist ein Wort mit 36 Zeichen, das für das Display zu lang ist. Es handelt sich also um ein Problem des Inhalts, den ich natürlich nicht geändert habe!

Wie schon in Teil I erwähnt, ist alles, was bisher erklärt wurde, wesentlich detaillierter auf der University of Wisconsin - Platteville's Slashdot web standards example site geschildert.


Daniel M. Frommelt ist der "University World Wide Web Coordinator" der University of Wisconsin - Platteville, ein leitendes Mitglied des Campus Web Council of Wisconsin und ein Verfechter von standardkonformen Webdesign. Daniel verbringt seine Freizeit mit der Bierbrauerei.

Originaladresse: www.alistapart.com/articles/slashdot2/
Alistapart Diskussionsforum (englisch): www.alistapart.com/discuss/slashdot2/

Translated with the permission of A List Apart Magazine and the author[s].

Wichtige Links zum Thema Web Design und Typographie

Valid XHTML 1.0! Valid CSS!