Читать книгу Texten fürs Web: Planen, schreiben, multimedial erzählen - Stefan Heijnk - Страница 22

Die Seitenbeschreibungssprache HTML (Hypertext Markup Language) von Tim Berners-Lee war ursprünglich allein dazu gedacht, Dokumente für das Lesen am Computermonitor einigermaßen leserlich aufzubereiten – und zwar unabhängig von den technischen Eigenheiten des genutzten Rechners. Webseiten sahen in den Anfangsjahren des WWW entsprechend eher wie Fachzeitschriften-Artikel aus: viel Text, klitzekleine Bilder (wenn überhaupt), hier und da eine Überschrift, ein paar Leerzeilen zur Auflockerung und natürlich jede Menge blau gefärbte Hyperlinks. Das war’s. An Bandbreitenfresser wie Großformatfotos, Audios oder gar Videos war Mitte der 90er-Jahre zu Zeiten der 28-KB-Einwahlmodems nicht zu denken. Für Webdesigner in den damals jungen Online-Redaktionen war das alles schlicht nervig.

Zum Glück ist das lange her. HTML stellt längst ein breites Spektrum gestalterischer Optionen bereit. Vor allem die Trennung von Form und Inhalt per Cascading Style Sheets hat die Situation deutlich verbessert. Zwei Grundherausforderungen an das Webdesign allerdings sind geblieben und werden auf absehbare Zeit auch weiterhin Bestand haben:

1 Anders als im Printdesign gibt es im Webdesign kein fixes, für alle Rezipienten verlässlich gleich aussehendes Layout einzelner Seiten.

2 Die Vielfalt der Bildschirmgrößen und der Display-Auflösungen wächst beständig.

Die technische Antwort auf die wachsende Endgerätevielfalt ist das Responsive Webdesign, entworfen von Ethan Marcotte in einem Aufsatz für A List Apart in 2010. Er diagnostizierte schon damals mit einiger Weitsicht: »Mobile browsing is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (…). We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.« Und entwickelte dazu auch gleich die passende Therapie: Seitenlayouts, die sich automatisiert an die jeweiligen Monitorabmessungen beziehungsweise an die jeweilige Display-Auflösung anpassen. Vereinfacht gesagt werden dazu in der Website-Programmierung typische Schwellenwerte (Breakpoints) für gängige Monitorbreiten beziehungsweise -höhen festgelegt, an denen ein Seitenlayout – abhängig vom Display des Endgeräts – dann jeweils neu umbricht: Hat ein Seitenlayout in der Desktop-Version beispielsweise ein vierspaltiges Seitenraster (für Monitore mit mindestens 1.024 Pixeln in der Breite), dann wird es für ein Tabletdisplay an einem definierten Breakpoint (beispielsweise ab einer Monitorbreite von 768 Pixeln) zweispaltig umbrochen. Bei noch kleinerem Bildschirm, etwa auf einem Smartphone (mit 320 Pixeln in der Breite), wird die Seite als Einspalter angezeigt.

Abb. 16:Die Content-Komponenten einer Desktopseite werden auf mobilen Endgeräten in strikt vertikaler Folge angeordnet. Quelle: Google, deutschlandfunk.de, eigene Screenshots.

Rechtsbündige Spalten rutschen dabei in der schmaleren Version in der Regel unter die linksbündigen Spalten; je kleiner der Bildschirm, desto länger also die umbrochene Seite. Wie das praktisch aussieht, kann sich jeder am Desktop-Rechner anschauen: Man ruft eine Website auf, etwa www.hannover.de, verschmälert dann das Browserfenster und der Umbruch passt sich an die veränderte Fensterbreite an. Vorausgesetzt, die betrachtete Website ist »responsive« programmiert, was für die hannoversche Stadt-Website der Fall ist.