Case studies: von Fall zu Fall
Unsere kleine Demosite
Unsere Demosite, eine mögliche Website des "Marzipanvereins Lübeck" zeigt in zwei Versionen die bisherige Tabellenbasierte Gestaltung einer Internetseite und die behindertengerechte Gestaltung via XHTML 1.1 und CSS.
Ganz wichtig für Designer ist, dass dessen Website auch nach der Anpassung genauso aussehen sollte, wie mit tabellenbasiertem Design. Nichts einfacher als das:
HTML-Basierte Site (links) und barrierefrei (rechts)
» HTML-Basierte Site anzeigen
» Barrierefreie Variante anzeigen
Der Quelltext (in Kurzform) zeigt die technischen Unterschiede.
<tr>
<td colspan="2" height="270">[Grafischer Kopf]</td>
</tr>
<tr>
<td width="248" align="center">[Menü]</td>
<td width="523">[Inhalt]y/td>
</tr>
</table>
HTML-Version mit Tabellen zur visuellen Gestaltung
<div id="content">
<ul id="menu">[Menü]</ul>
<div id="incontent">[Inhalt]</div>
</div>
</div>
Barrierefreie Gestaltung mit weniger Quelltext
Wie man sieht, können wir den Quelltext bei der Entrümpelung sogar noch verkleinern. Die visuelle Gestaltung übernimmt hier direkt CSS. So kann man unterschiedliche Websites mit einem und dem gleichen Inhalt online stellen, in dem man ganz einfach die Stylesheets austauscht.
Unsere Beispielsite würde in der Druckversion, bei der wir via media-Argument unterschiedliche Stylesheets einbinden, so aussehen: