Eine Website kann optisch und inhaltlich noch so gut sein, sie ist nur erfolgreich, wenn sie sich auf jede Situation einstellen kann – nur so erreichst du mit deinem Webauftritt ein größtmögliches Publikum. So wie sich ein Polizist zum Schutz eine kugelsichere Weste anlegt, können auch wir Webdesigner ebenfalls Maßnahmen zum Schutz unserer Webdesigns ergreifen. In diesem Artikel geht es um Strategien, die deine Website vor zerschossenen Designs schützen können. Ein kugelsicheres Webdesign erhöht die Flexibilität von Websites, sodass du gegen die schlimmstmöglichen Szenarien gewappnet bist.
Im Wahren leben garantiert eine kugelsichere Weste keinen hundertprozentigen Schutz, aber doch ist es erstrebenswert, sich vor kugeln zu schützen. Mit einer kugelsicheren Weste bist du im Zweifelsfall weitaus besser dran als ohne. Das gilt auch für das Webdesign und in diesem Artikel beschrieben Techniken. Wenn wir dafür sorgen, dass eine Seite flexibler ist und unter so vielen verschiedenen Umständen wie möglich lesbar ist, bringt das bei unserer Arbeit einen entschiedenen Vorteil. Der Einsatz von Webstandards wie semantisches XHTML und CSS erleichtert das Erstellen beeindruckender und anpassungsfähiger Webdesigns.
Sprungmarken:
- Schriftgrößenänderung über Schlüsselwörter, Prozentwerte und Em’s zur optimalen Steuerung
- Erstellung einer Seitennavigation, die sich jeder Textgröße oder Inhaltsmenge anpasst
- Horizontale Seitenkomponenten, die sich vertikal ausdehnen
- Floats für gitterähnliche Anordnungen
- Anpassung formatierter Boxen an unterschiedlich große Inhalte
- Lesbarkeit von Inhalten auch ohne Images oder CSS
- Trennung von Design und Daten in Tabellen
- Seitenlayouts, die sich der Fenster- oder Schriftgröße anpassen
Auf CSS basierende Layouts werden immer häufiger verwendet, und deswegen ist es wichtig zu wissen, wie man CSS richtig einsetzt. Durch CSS und XHTML werden die Dinge zwar nicht einfach automatisch besser, jedoch ermöglicht die Trennung von Design und Inhalt eine größere Flexibilität und ist somit ein großer Schritt in Richtung besseres Design für alle Anwender. Ein kugelsicheres Webdesign beschreibt also die Flexibilität einer Website, die abhängig von den darin platzierten Inhalten einen geräteübergreifenden- und Cross-Browser-kompatiblen Zugang ermöglicht.
Bulletproof Webdesign – Absolut flexibles Webdesign
Das Design einer Webseite umfasst drei große Bereiche:
1. Der erste ist die Erscheinung einer Seite, wie sie vom Nutzer wahrgenommen wird, also die optische Gestaltung.
2. Im Prinzip ist dies ein Teilbereich des zweiten Bereichs, nämlich des technischen Aufbaus einer Seite, also wie die Seite codiert wurde.
3. Der dritte Bereich umfasst die Optimierung der Seite, für beispielsweise Suchmaschinen, wobei dieser seinerseits wieder die beiden anderen Teilbereiche beeinflusst.
Selbstverständlich ist ansprechendes Design – neben den eigentlichen Inhalten der Webseite natürlich – dafür ausschlaggebend, ob ein Besucher auf einer Seite bleibt oder nicht. Doch ist es insbesondere die technische Darstellung einer Webseite, die hierfür den Weg ebnet.
Lädt eine Seite sehr langsam oder fehlerhaft, kann das am Hoster liegen – in diesem Fall sollte man als Betreiber zumindest einer kommerziell orientierten Webseite einen Wechsel in Erwägung ziehen – oder die technische Umsetzung wurde nicht gut gemacht – in diesem Fall liegt es im eigenen Möglichkeitsbereich das Problem auszuräumen. Braucht eine Webseite zu lange zum Laden, werden viele Benutzer abspringen, bevor sie den Inhalt überhaupt gesehen haben. In einem früheren Artikel gebe ich Tipps zur Optimierung von Website-Ladezeiten.
Aufgrund der heutigen Bandbreiten von Internetzugängen meist eigentlich kein Problem mehr, führt die immer komplexer werdende Technik von HTML, XHTML und CSS in Verbindung mit vielen Skripten, die im Hintergrund auf einer Seite laufen, immer noch dazu, dass viele Seiten nur schlecht laden oder sich immer wieder aufhängen. Denn kein Webdesigner kann und sollte davon ausgehen, dass alle User immer die optimalen Voraussetzungen haben, eine moderne Seite zügig und dauerhaft zu laden.
Schon der Unterschied zwischen einem Desktop-Browser und demjenigen, welches für moderne stylische Handys optimiert ist, verdeutlicht das. Außerdem sollte man auch heute nicht die, zwar kleiner werdende, aber immer noch vorhandene Gruppe an Internetnutzern vernachlässigen, die sich eben doch noch mit einer langsamen Verbindung herumschlagen (muss).
Der Webdesigner Dan Cederholm hat genau zu dieser Problematik einige Design-Konzepte auf den Weg gebracht, die diesen Problemen begegnen, und mittlerweile bekannt sind als Bulletproof Webdesign, also kugelsicheres Webdesign. Dabei werden technische Webdesign-Standards auf XHTML und CSS überarbeitet.
Cederholm verfolgt unter anderem die folgenden Ziele damit:
- höhere Erreichbarkeit des Internetauftritts,
- weniger Seitencodierung und
- einfachere Pflege, also Wartung der Seite.
Diese überarbeiteten Konzepte möchte ich euch hier vorstellen.
1. Schriftgrößenänderung über Schlüsselwörter, Prozentwerte und Em’s zur optimalen Steuerung durch die Benutzer
Webdesigner neigen dazu, ein „kontrolliertes“ Design zu erzeugen. Das schließt natürlich Schriftgrößen nicht aus. Schließlich sollen sich alle Elemente zu einem harmonischen Gesamtbild vereinen und in jedem Browser, den Nutzer verwenden, gleich aussehen. Folglich setzen Webdesigner die Schriftgröße im Body-Bereich einer Seite über die CSS-Daten grundsätzlich in Pixeln fest.
Doch hier ergibt sich auch das Problem:
- Browser verfügen über eine Zusatzfunktion, die es dem Benutzer erlaubt, die gewünschte Schriftgröße an seine Bedürfnisse anzupassen.
Allerdings ergeben sich hier bei einigen Browsern Kompatibilitätsprobleme, wenn der Quellcode bereits in Pixel definiert ist. In der Folge können die Nutzer die Seite nicht ihren Wünschen anpassen.
Alternativ kann die Schriftgröße auch anders definiert werden:
Über Längen(maß)einheiten wie EM’s, Keywords oder Schlüsselwörter und Prozentwerte. Dadurch kann der Benutzer unproblematisch die Schriftgröße seinen Vorstellungen anpassen. Bei der Anpassung mittels der relativen Größe von Schlüsselwörtern wird davon ausgegangen, dass diese immer größer oder kleiner als der durchgehende Text dargestellt werden.
Und so lassen sich Schriftgrößen nicht nur durch Pixel beeinflussen, das W3C (WWW-Konsortium für Webstandards) hat auch die Größen „klein“, „mittel“ (medium) und „groß“ festgelegt. Erstellst Du jetzt Deine Schlüsselwörter mit „groß“, kannst Du den Fließtext mit „medium“ definieren. Wie Du siehst, wird diese Methode über die Seite selbst definiert.
Die absolute Keyword-Größe hingegen setzt sich an den vom W3C festgelegten Schriftgrößenstandards fest, welche den Browserherstellern empfohlen werden. Bei den Prozentwerten wird ein Wert von 100 Prozent in Bezug auf eine bestimmte Größe (beispielsweise die Standardbreite von Webseiten) festgelegt. Ausgehend von diesem Wert lässt sich nun die Schriftgröße in Prozenten anpassen.
Flexibler Text mit ems
EM’s wiederum definieren den Abstand von einer kompletten Zeile zur nächsten. Da dieser Wert auch horizontal Gültigkeit hat, ergibt sich daraus ein Quadrat – die Einheit pro EM. Die zuvor festgelegte Standardgröße kann nun durch em=1,0 beeinflusst werden.
Zur Bedeutung von ems schreibt Robert Bringhurst, der Autor von „The Elements of Typographic Style“ folgendes:
„Em ist eine fließende Maßeinheit. Ein em ist die Breite, die der Schriftgröße entspricht. Bei einer 6pt Schrift ist ein eim 6 Punkte, in 12pt ist ein em 12 Punkte, und bei einem Webfont mit 60pt ist ein em 60 punkte. Von daher ist die Breite von einem em in jeder Größe proportional.“
Wenn man das nun auf das Webdesign überträgt, sind 1em gleich 16px, wenn die aktuelle font-size die Standardeinstellung medium hat (In den meisten Browsern sind das 16px). Wenn der Standard kleiner wäre, also 11px, dann wäre 1em gleich 11px. Wenn man em für die Schriftgröße, den Zeilenabstand und den Abstand zwischen den Elementen nimmt, hat man den Vorteil, dass diese Maßeinheiten sich proportional anpassen, wenn die Textgröße verändert wird.
In einen Artikel auf clagnut.com erklärt Richard Rutter eine sinnvolle Methode, um eine Basis-Schriftgröße über ems zu normalisieren, wodurch die Einheiten dann den Pixelgrößen entsprechen. Die Technik geht davon aus, dass die Standardtextgröße im Browser auf medium gesetzt ist.
Diese Methode setzt dabei an, die Basis der font-size der Seite beim <body>-Element auf 62.5% herabzusetzen:
body {font-size:62.5%}Dieser Prozentwert setzt den standard medium-Text von 16px auf 10px herunter. Der Hintergrund, ist, dass wenn man eine Basis von 10px hat, hat man eine schöne runde zahl, mit der man gut rechnen kann, und man kann in pixel denken, während man die Schrift tatsächlich in em einstellt.
Wenn du also beispielsweise 62.5% für den <body> einstellt, würde 1em als 10px erscheinen, 1.2em als 12px, 1.8em als 18px usw. Wenn du für verschiedene Elemmente auf der Seite unterschiedliche Werte angeben möchtest, kannst du das wie folgt tun:
body { font-size: 62.5% } /* damit hast du eine Basis von 10px */
h1 { font-size: 2em;} /* 20px */
h2 { font-size: 1.8em;} /* 18px */
p { font-size: 1.3em;} /* 13px */
#sidebar { font-size: 1.2em;} /* 12px */
Für Designer, die daran gewöhnt sind, Schrift in Pixel anzugeben, doch den Anwendern erlauben wollen, den Text größenmöglich zu ändern, kann sich diese auf em basierende Methode als sehr praktisch erweisen.
Jedoch können ems ein wenig heikel werden, wenn es eine Verschachtelung mit ins Spiel kommt. Nehmen wir beispielsweise an, dass alle <abbr>-Elemente innerhalb von Absätzen 24px sein sollen statt 12px, dann könntest du folgendes angeben:
p abbr { font-size: 2.4em; }
Dieser Code würde <abbr>-Elemente, die innerhalb eiens Absatzes erscheinen, mit 28.8px darstellen (weil <abbr> ein Nachkomme von <p> ist, und wir im wesentlichen sagen, dass es die 2,4-fache Größe des übergeordneten Elements haben soll, und das ist in diesem Fall 12px). <abbr>-Elemente in Absätzen erben die Schriftgröße des Absatzes als Basis.
Um das anzupassen, befolge eine einfache Formel:
Kind-Pixel : Eltern-Pixel = Kind-ems
In diesem Beispiel bedeutet dass, wo 24px das Ziel ist und 12px die Basis der Eltern in diesem Absatz, lautet die Formel wie folgt:
24 : 12 = 2
Um also zu erreichen, dass <abbr>-Element innerhalb eines Absatzes mit 24px dargestelltw erden, verwende folgende Syntax:
p { font-size: 1.2em; } /* 12px */
p abbr { font-size: 2em; } /* 24px */
Wie du siehst, steckt dahinter keine große Rechenkunst. Kompliziert wird es erst, wenn es noch weitere Verschachtelung-Ebenen tiefer geht. Meistens wird unter Umständen nur ein oder zwei Ebenen tief verschachtelt. Doch bedenke die größere Komplexität, wenn du dich für auf ems basierende oder Schlüsselwort/Prozentwert-Methoden entscheidest, dass es bei Schriftgrößenzuordnung innerhalb tief verschachtelter Elemente viel zu tun gibt.
All diese Methoden lassen sich nun kombinieren, um dadurch ein „bulletproof“ Design zu erstellen.
2. Erstellung einer Seitennavigation, die sich jeder Textgröße oder Inhaltsmenge anpasst
Seitennavigationen sind auch ein wesentliches, visuelles Element in jedem Seitendesign. Noch bis vor Kurzem waren hier viele Grafiken wie Buttons und Background-Images Standard. Sind dann noch zusätzliche Effekte wie „Hover“ – also Felder oder Schriften, die bei Cursor-Kontakt Größe oder Farbe verändern – implementiert, hat die Seite wieder wesentlich längere Ladezeiten. Außerdem kann jederzeit eine Erweiterung der Navigation oder Änderung notwendig werden, was dann mit einem nicht unerheblichen Zeitaufwand verbunden ist. Die CSS-Lösungen, wie sie von Dan Cederholm genannt werden, erfreuen sich daher immer größer werdender Beliebtheit.
So werden bei einer Lösung über das CSS keine einzelnen Images mehr für jeden einzelnen Navigationspunkt benötigt. Sämtliche Eigenschaften werden in der CSS-Datei abgelegt, zum Beispiel unter der Containerbezeichnung „nav“. Die Positionierung erfolgt über padding und floating Tags. Damit sich der richtige Navigationspunkt auch noch farblich hervorhebt, also entsprechend der Seite, auf der man sich gerade befindet, bekommt jede Seite zusätzlich noch eine „body id“ zugewiesen, beispielsweise die Indexseite „intro“. Der Vorteil liegt klar auf der Hand: Sämtliche Anforderungen an die Navigation werden zentral vom CSS ausgeführt. Navigationserweiterungen sind so denkbar einfach und in wenigen Minuten durchzuführen.
3. Horizontale Seitenkomponenten, die sich vertikal ausdehnen können
Eine Seite ist im klassischen Aufbau im Prinzip nichts anderes als eine Vielzahl von Tabellen und wiederum weiteren Tabellen in den Tabellen. An einem Beispiel lässt sich das wieder am besten illustrieren: Besucht man die entsprechende Seite könnte beispielsweise zuerst eine ganzseitig breite Komponente zum Einloggen erscheinen. Die nächsten Komponente, wieder über die ganze Breite der Seite, enthält nun abgerundete Ecken, ein Seitenlogo und unterschiedliche Infos nacheinander, bevor unten wieder die abschließenden, runden Ecken kommen. All diese einzelnen Bestandteile werden hier über Tabellen eingefügt.
So besteht die erste Komponente nur aus einer Tabelle plus den beiden spacer gif’s, während in der zweiten Komponente das Seitenlogo, die abgerundeten Ecken links und rechts (spacer), sowie die zusätzliche Info immer mindestens einer Tabelle entsprechen, die dann die komplette Seitenkomponente bilden. Die Markups werden dabei durch die Textlängen auf der Seite definiert.
Kommt jetzt ein Seitenbesucher und ändert über seinen Browser die Einstellungen, verändern sich auch die Größen der einzelnen Tabellen. Vergrößert jemand die Schrift, wird auch die Schrift in diesen Seitenkomponenten und somit die ganze Komponente größer. Das erste Problem: Die Abrundungen an den Enden sind auf eine bestimmte Größe fixiert, also ist die Abrundung jetzt nicht mehr eine Abrundung, sondern irgendwo, vor dem Ende, positioniert. Zusätzlich wird auch ein gewaltiger Code benötigt, um all diese Komponenten zu bilden.
Die Lösung hier ist im Prinzip ähnlich, wie bei der Navigation: auf dem CSS-Stylesheet werden alle Eigenschaften der einzelnen Komponenten bestimmt, beispielsweise #comp1, #comp2 etc., eine einfache HTML-Programmierung wird wieder in einen div-Container gepackt und die einzelnen Bereiche der Komponente bekommen wieder eine ID, welche ebenfalls (floating left zum Beispiel) über das CSS definiert wird. Unabhängig von der Browsereinstellung ist jetzt auch hier alles immer, wo es sein soll.
4. Floats für gitterähnliche Anordnungen
Auch hier ist es im Prinzip dasselbe. Ein Artikel soll mit Bildern links und rechts unterlegt werden oder eine Box gestaltet werden, die ebenfalls Bilder und Text enthält, beispielsweise einen Teaser. Immer noch arbeiten viele Webdesigner hier mit Tabellen. Zwischen Images und Texten müssen Zwischenräume in Tabellenform eingefügt werden, wodurch wieder eine extrem lange und unübersichtliche Codierung der Seite entsteht. Dan Cederholm benutzt hier die zu Unrecht relativ selten verwendeten Definitionslisten im HTML.
Diese enthalten dann Bildadressen und Text. Den Listen werden wieder Identifizierungen zugewiesen und über die Floating-Eigenschaften im CSS-Stylesheet wird ein Bild in einer Box so angepasst, wie es gewünscht ist. Der Vorteil, neben einer unproblematischen Einbindung, unabhängig von der Browser-Einstellung, ist hier wieder, dass auch für gleiche, zukünftige Boxen keine aufwendigen Tabellen mehr erstellt werden müssen. Wenn die Daten einmal im CSS sind, kannst Du sie mit der entsprechenden ID jeder gitterähnlichen Anwendung in Minuten zuzuordnen.
5. Anpassung formatierter Boxen an unterschiedlich große Inhalte
Wenn eine Seite entworfen wird, kommt es vor, dass die geplanten Inhalte später verworfen bzw. erweitert werden. Dann haben normale Boxen einen klaren Nachteil. Wenn außerdem, wieder bedingt durch die Einstellungen von einem Browser, die Schriftgröße verändert wird, stimmen weder Boxengröße noch Inhalte der Box überein. Deshalb liegt hier die Lösung wieder, wie bei allen vorangegangen Varianten, im CSS. Zusätzlich müssen hier jedoch auch die Background-Images über das CSS definiert werden. Der Vorteil ist wieder, dass sich Boxen an den Inhalt bzw. dessen Größe vertikal in Richtung Inhalt erweitern lassen.
6. Lesbarkeit von Inhalten auch ohne Images oder CSS
Bei den vorangegangenen Lösungen ging es darum, Seitenkomponenten mittels CSS-Lösungen flexibel in die Seite zu integrieren, sodass es auch bei unterschiedlichen Browsern und deren Einstellungen zu keinen Einbußen der optimalen Visibilität der Seiteninhalte kommt. Doch was ist nun, wenn aus irgendeinem Grund CSS nicht unterstützt wird, oder durch User-Einstellungen Bilder nicht oder sehr langsam laden? Dann kann es sein, dass die tatsächliche Hintergrundfarbe zu nah an der Font-Farbe liegt, und es somit sehr schwer ist, Texte zu lesen. Wenn die Hintergrundfarben nicht mehr über Images, sondern Hintergrundfarben im CSS definiert werden, ist die Lesbarkeit, auch wenn Images abgeschaltet sind, immer noch gegeben.
Ist eine Seite nach diesen CSS-Schemata aufgebaut, werden Hintergründe etc. nicht mit Bildern, sondern mit Hilfe von Hintergrundfarben gesetzt. Gleichzeitig sorgt die fehlende Tabellenstruktur dafür, dass alles trotzdem fein säuberlich untereinander steht, und auch nach wie vor erkannt wird. Denn Text-Differenzierungen wie Überschriften („H“-Tag) usw. funktionieren nach wie vor. Die Schriftfarbe ist also immer auf einem weißen Hintergrund und gut lesbar. Folglich bleibt eine Seite auch lesbar, wenn das CSS aus irgendeinem Grund ausfällt.
7. Trennung von Design und Daten in Tabellen
Tabellen sind in ihrer Struktur ja ziemlich fest. Außerdem werden bei Tabellen oft auch Spalten benötigt, deren Aufgabe es nur ist, die Inhalte der beiden Spalten links und rechts davon in einem definierten Abstand zu halten. Zusätzlich kommen hier – nach klassischem HTML-Aufbau – im Design wieder eine Vielzahl von Bildern (Hintergrund-Gif’s) zum Einsatz. So entstehen selbst für kleinste Tabellen wahre HTML-Strecken. Muss in solchen Tabellen dann später ein Update durchgeführt werden, ist das mit einem enormen zeitlichen Aufwand verbunden.
Werden nun aber das Design und die Daten voneinander getrennt, sind auch spätere Bearbeitungen schnell und einfach durchzuführen. Dan Cederholm benutzt dazu vornehmlich die HTML-Befehle „th“, „scope“ und „caption“. Diese ordnen bestimmte Bereiche wie den Header einer Tabelle zu. Durch geschickten Einsatz lässt sich hier wieder ein punktgenaues CSS entwickeln, welches in den einzelnen Bereichen greift. Außerdem lassen sich dann über die Eigenschaften vom CSS die einzelnen Teile beliebig positionieren. Das reduziert den Umfang der eigentlichen HTML-Codierung um ein großes Stück. Nicht nur die Seitenladezeiten verbessern sich dadurch, auch spätere Seitenupdates sind wieder wesentlich schneller durchzuführen.
8. Seitenlayouts, die sich der Fenster- oder Schriftgröße anpassen
Wie bei allen vorgenannten Methoden löst das Dan Cederholm wieder über das CSS-Stylesheet mithilfe diverser div-Container und floating Tags. Dabei ist der Vorteil nicht außer Acht zu lassen, dass textbasierte und technisch zu Desktop-Browsern unterschiedliche Browser, wie beispielsweise bei Smartphones, den Content dann auch besser darstellen können. Somit wird das gesamte Layout einer viel größeren Zahl von unterschiedlichen Browsern gerecht. Selbstverständlich ist auch der Code selbst wieder erheblich abgespeckt, da all die HTML-Tabellen zum Kreieren von Kolumnen und Navigationsbars völlig entfallen.
Lediglich auf eine der meist diskutierten Fragen kann auch hier keine Antwort gefunden werden:
- sollte nun besser ein statisches, dynamisches oder ein sich flüssig anpassendes Design gewählt werden?
Denn selbst ein Seitenlayout über CSS lässt sich nach allen drei Varianten installieren. Eine Frage, die in der Vergangenheit schon wirklich vielen Designern Kopfschmerzen bereitet hat und immer noch für ratloses Stirnrunzeln sorgt. An dieser Stelle muss jeder Webdesigner, die für seine speziellen Bedürfnisse passendste Methode finden.
Schreibe einen Kommentar