Handbuch Webdesign: Gestalterische Herausforderungen

Das Medium Web verhält sich ganz anders als beispielsweise Papier oder Film. Es funktioniert rahmenlos, es passt sich an. Es ist im Prinzip auf jedem Gerät und in jedem Betriebssystem verfügbar. Es ist neutral, will nichts, gibt nichts vor. Die Struktur, die Sie Ihrer Website und Ihrem Code geben müssen, ist nur für die Darstellungssoftware, den Browser, gedacht. Der Browser ist auf allen Geräten und Systemen mittlerweile die wichtigste und am meisten verwendete Software überhaupt geworden. Aus diesem Grund bietet er seinem Benutzer auch eine Unzahl an Erweiterungsmodulen, die alle in der Lage sind, die Darstellung Ihrer Website an die Bedürfnisse des Nutzers anzupassen. Das Web ist ein äußerst flexibles Medium.

Wer das Web findet, findet auch

verschiedenartige Ausgabegeräte
verschiedene Browser mit verschiedener Darstellung der gleichen Websites
verschiedene Bildschirmgrößen und Auflösungen
schwer kontrollierbare Schriftgröße
verschiedene Zusatzprogramme und Plugins

Verschiedenartige Ausgabegeräte

Ausgabegerät für das Web ist jedes Gerät, welches über einen Internetanschluss verfügt. Das sind nicht mehr nur Computer und Notebooks, sondern auch Smartphones, Tablets und sogar Fernseher und Spielkonsolen. Für jedes dieser Geräte funktioniert ein und die gleiche Website. Da der Anteil der mobilen Geräte bei den Abrufzahlen für Websites ganz allgemein stetig ansteigt, liegt heute der Fokus auf Responsive Design, eine Form des Webdesigns, das sich an das Gerät der Nutzer anpasst.

Verschiedene Browser

Verschiedene Browser und Versionen stellen die gleiche Webseite oft leicht unterschiedlich dar. Denn diese Browser werden von unterschiedlichen Programmiererteams geschrieben. Die meisten Browser sind heute Open Source und werden von einer großen Community entwickelt. So genannte Bug Bountys, die Kopfgeldjagd nach Programmfehlern, die von namhaften und großen Unternehmen wie Google gesponsert wird, machen die Browser für den Endbenutzer sicherer. Nicht besonders beliebt ist der Internet Explorer, der auch in seiner neuesten Version geflissentlich Standards ignoriert und jedem Webdesigner ein Dorn im Auge ist. Während alle beliebten Browser für jedes populäre Betriebssystem zur Verfügung stehen, gibt es den Internet Explorer bis heute nur für Windows. Es gibt nicht viele Nutzer, die das bedauern, aber für Webdesigner bedeutet das, dass sie zum Testen einer Website an eine Windows-Lizenz oder an einen PC mit Windows gelangen müssen.

Bildschirmgrößen und Auflösungen

Unterschiedliche Geräte bieten unterschiedliche Auflösungen

Messen von Bildschirmgrößen

Dem Webdesigner sind die Bildschirmgrößen, mit denen die Nutzer die Seite besuchen werden, für gewöhnlich nicht bekannt. Durch das so genannte Device Tracking, der diskreten Rückverfolgung, kann er herausfinden, mit welchen Geräten die Benutzer die Seite besucht haben. Da die Bildschirmgrößen stark variieren, ist heute Responsive Design für Webseiten populär, die eine Breite an Computern und Smartphones gleichzeitig unterstützen. Die Messung eines Bildschirms kann mit CSS Media Queries, oder seltener mit JavaScript erfolgen.

Abbildung 13: Verbreitete Bildschirmauflösungen auf dem Desktop

In Abbildung 13 sehen Sie die verbreiteten Bildschirmauflösungen des Internets im Jahr 2014. Responsive Design kann für ein und die gleiche Website die meisten dieser Auflösungen abdecken.

Von diesen als Bruttoauflösung zu betrachtenden Angaben über die Auflösung und der Größe der zur Verfügung stehenden Fläche, sind nun noch der Platz für den Fensterrahmen des Browsers, für Scrollbalken, Symbolleisten, und eventuell eingeblendete Favoritenleisten abzuziehen, um zum verbleibenden Raum für die Gestaltung zu kommen. Moderne Browser reduzieren die von ihnen benötigte Flächen zunehmend, um mehr Platz für Websites zu haben. Doch demgegenüber stehen Erweiterungen der Browser, die den geschaffenen Raum wieder einnehmen können.

Schriftarten

Auf den verschiedenen Geräten stehen nicht überall die selben Schriftarten zur Verfügung. Die Schriftarten hängen einerseits vom Betriebssystem (Windows, Apple, Linux), andererseits von den installierten Programmen ab. Als DesignerIn haben Sie vielleicht noch extra Schriftpakete installiert. Falls ja, dann haben Sie einen im buchstäblichen Sinne ganz untypischen Computer. Die meisten anderen Benutzer haben nur Standard-Schriften auf ihrem Computer.

Wenn Sie DejaVu Sans Serif als Schriftart vorgeben, und dann Ihre Seite auf einem Computer betrachten, auf dem es diese Schriftart nicht gibt, wird stattdessen die Schrift verwendet, die Entwickler und Benutzer als Standardschriftart für den Browser definiert haben. Unter Windows ist es traditionell die Serifenschrift Times, auf Linux und in exotischen Browsern sind standardmäßig eventuell andere Schriften eingestellt.

Es ist deswegen sinnvoll, nicht eine bestimmte Schriftart zu verlangen, sondern eine Liste von Schriftarten vorzugeben: wenn die erste Schriftart auf der Liste nicht installiert ist wird die zweite verwendet, dann die dritte, … Abbildung 19 zeigt drei typische Beispiele für solche Listen.

 Verdana, Tahoma, Arial, Helvetica, sans-serif;
 "Times New Roman", Georgia, Times, serif;
 "Courier New", Courier, monospace;

Abbildung 19: Beispiele für Schriftarten-Listen

Es gibt jedoch Methoden, um eigene Schriftarten in Webseiten zu verwenden, auch wenn der Benutzer sie nicht installiert hat. Um eine Schriftart in dieser Weise zu verwenden, brauchen Sie eine, gelegentlich kostenpflichtige, Lizenz, denn Schriftarten sind urheberrechtlich geschützt. Das ist kein Scherz - auch wenn es nur das Alphabet ist, ist es dennoch auf eine bestimmte, ansprechende Weise von einem Grafiker gestaltet worden. Schriftgestalter, oder in der Sprache des Internets Font Designer, verbringen viele Stunden voller Kleinarbeit an der Gestaltung einer Schriftart, denn Fehler in der Gestaltung sind im Schriftbild zu sehen. Die Preise für eine Schriftart reichen von kostenlos bis an die 10.000 €. Kostenlose Fonts finden Sie zum Beispiel auf Fontsquirrel.com oder in den Google Web Fonts, wo Sie die Fonts ausprobieren und auch gleich erfahren, wie Sie diese auf Ihrer Website verwenden können.

Schriftgrößen und Zeilenumbruch

Auch wenn Sie durch CSS die Größen und Verhältnisse von Schriften und anderen Elementen bestimmen können, entscheidet letztendlich der Nutzer, wie groß die Darstellung der Website ausfällt. Personen mit Sehschwäche können die Schriftart größer stellen, oder die Website heranzoomen, um die Website betrachten zu können. Den Zeilenumbruch überlassen Sie aus diesem Grund besser dem Browser. Je nach Schriftgröße und zur Verfügung stehendem Platz im Browser-Fenster wird der Browser die Absätze geeignet in Zeilen umbrechen, wie Abbildung 20 zeigt.

Datei:Handbuch Webdesign-Zeilenumbruch im Browser.jpg

Abbildung 20: Der Browser erledigt den Zeilenumbruch

Unbekannte Lesereihenfolge

Wenn Ihre Website aus mehreren Webseiten besteht, haben Sie keine Kontrolle darüber, in welcher Reihenfolge diese Seiten gelesen werden. Nur die wenigsten Websites können dem Leser die Richtung vorgeben. Durch Hyperlinks und Benutzer, die ihnen folgen, wird dieser Fluss ohnehin unterbrochen. Die Verknüpfungen von Websites untereinander unterscheiden das Web von Büchern und sind Teil des Erfolgs.

Keine eindeutiger Eintrittspunkt

Die LeserInnen "betreten" Ihre Seite auch nicht durch die von Ihnen definierte Hauptseite. In Abbildung 21 sehen Sie ein Beispiel.

Abbildung 21: Navigationsstruktur und Reales Navigationsverhalten

Links und Lesereihenfolge

Die großen Pfeile zeigen die Verlinkungen, die zwischen den Seiten existieren. Die dünnen Pfeile sind das eigentliche Nutzerverhalten. Diesen Weg kann man aus dem Logfile des Servers rekonstruieren: Der Benutzer kommt von Google, wo er die "Seite 1" gefunden hat. Von dort navigiert er zur "Hauptseite", und von dort weiter zu "Seite 5". Hier verlässt er die Site wieder. Die Hauptseite ist jedoch in der Regel der erste Eindruck, den ein Benutzer bekommt, wenn er Ihre Domain eingibt. Die beliebte "Intro-Seite", möglicherweise noch mit einer Adobe Flash-Präsentation braucht eine Website hingegen nicht. Langweilen Sie Ihre Benutzer nicht mit PowerPoint-Imitationen und Daumenkinos.

Zusatzprogramme, Fremdformate und Plugins

Jeder Browser kann HTML und „reinen Text“ darstellen. Falls der Browser Bilder darstellen kann, dann Bilder in den Formaten GIF und JPEG, einige auch PNG. Der HTML5-Standard erlaubt außerdem die Anzeige von SVG, einem Vektorgrafik-Format. SVG ist ein Beispiel für ein Dateiformat, für das ursprünglich ein Plugin geladen werden musste, um es darzustellen. Mit der Zeit haben alle populären Browser eine SVG-Unterstützung bekommen und das Plugin wurde obsolet.

Andere Formate (Microsoft Word, OpenOffice, CAD, 3D-Grafiken, Audio und Video-Dateien, Flash, PDF, ...) können auch in eine Webseite eingebunden werden. Der Browser kann Zusatzprogramme starten, um diese Formate darzustellen oder hat die Unterstützung dieser Formate schon integriert. Das ist technisch möglich, wenngleich es viele Argumente gegen die Einbettung von Dateien gibt.

Für die Darstellung von Dateiformaten, die der Browser selbst nicht unterstützt, muss eine Software auf dem Computer installiert sein, die das Format verarbeiten kann. Eventuell muss diese Software ein Plugin für den Browser installiert haben. Beides liefert eine Website für gewöhnlich nicht aus. OpenOffice ist beispielsweise über 200 MB groß, was auch bei Breitband-DSL eine Menge ist und in keinem Verhältnis zur Darstellung eines Dokuments steht. Außerdem sind Plugins dafür berüchtigt, Sicherheitslücken zu haben, die zusammen mit einer manipulierten Datei von böswilligen Betreibern angeboten werden. Mittlerweile verlieren Plugins für das Internet an Bedeutung. Google hat die Schnittstelle Netscape Plugin API, die für den Betrieb von Plugins im Browser Chrome verwendet wird, vor einiger Zeit aus dem Browser entfernt. Eine schwerwiegende Sicherheitslücke, die es erlaubt, die Kontrolle über den Computer des Nutzers zu übernehmen, hat Adobe in ihrem Plugin Adobe Flash erst nach einigen Wochen geschlossen. Für Smartphones und Mobilgeräte wird das populärste aller Plugins gar nicht mehr unterstützt.

Wenn Sie das alles bedenken, und dann zu dem Schluss kommen, dass es im konkreten Fall sinnvoll ist, z.B. ein Excel-Dokument in Ihre Website einzubauen, dann ist das technisch ganz einfach: Sie setzen einen Link zur Excel-Datei. Ist Excel installiert, wird dem Nutzer unter Umständen angeboten, die Datei zu öffnen. Ansonsten unterscheidet sich das, was passieren wird, nicht von einem einfachen Download.

Plugins

Ein Spezialfall von Zusatzprogrammen für Webbrowser sind Plugins. Diese übernehmen die Darstellung eines rechteckigen Bereiches innerhalb einer Webseite. Das populärste Beispiel ist das oben erwähnte Adobe Flash.

Abbildung 22: Plugin im Webbrowser und das Kontextmenü (beim Rechtsklick)

In Abbildung 22 wird das Rechteck am rechten Rand der Webseite nicht vom Webbrowser selbst, sondern vom Flash-Plugin dargestellt. Für den Besucher ist der Unterschied nicht zu merken. Welche Verbreitung die verschiedenen Plugins haben, war häufig Gegenstand zahlreicher Statistiken. Als Macromedia noch Flash entwickelte, publizierte das Unternehmen auf seiner Website eine Statistik laut der 97% aller Browser das Flash-Plugin benutzen. Mittlerweile ist dieser Anteil stark gesunken, da die Möglichkeiten, für die Flash früher einzigartig war, mittlerweile Teil des Browsers geworden sind. Das betrifft Animationen sowie Audio- und Video-Dateien. Mit WebGL kommt die Darstellung von 3D-Inhalten hinzu, darüber hinaus hat sich die Unterstützung von JavaScript als Programmiersprache des Webs enorm verbessert.

Zusammenfassung

Das Ausgabemedium für eine Website kann nicht verallgemeinert, fixiert oder kontrolliert werden. Ein paar mögliche Szenarien:

Privatnutzer in der Ersten Welt, die viel Geld haben und sich aus Spaß am Computer immer die neueste Hardware leisten, immer die bestmögliche Internetanbindung haben, immer die neueste Software benutzen.
Trendbewusste Großstadtbewohner, die mit Notebooks und Smartphones unterwegs sind und surfen.
Heimkinobesitzer mit einem Smart-TV, der mit einer Fernbedienung oder dem Finger bedient wird.
Firmennutzer, die mit dem vorlieb nehmen müssen, was ihnen die IT-Abteilung nach Firewalls und Sicherheitsbeschränkungen übrig lässt.
Kunden von Internet-Cafés irgendwo auf dieser Erde, denen weder Software noch Hardware gehört. Was sie vorfinden, ist vielleicht ein sieben Jahre alter Computer mit ebenso alter Software und einem Röhrenbildschirm.
Blinde, die mit einem Text-zu-Sprache-Programm oder einer Braille-Ausgabezeile im Web surfen.
Menschen mit Rot-Grün-Sehschwäche, die zwar den Text und die Bilder sehen, aber nicht zwischen bestimmten Farben unterscheiden können.
Menschen mit eingeschränkter Feinmotorik, die nur schwer mit einer Maus umgehen können oder Menschen, die allgemein die Vorzüge von Tastatur und Shortcuts zu schätzen wissen.

Als Webdesigner kann nicht auf jede Gruppe Rücksicht genommen werden. Wohl aber ist es die Pflicht eines Webdesigners, sich mit der technologischen Basis der Zielgruppe vertraut zu machen.