Lade...

Themen

& Hintergrundinfos

Immer in passender Form:
Responsive Webdesign

Die Terminologie im Umfeld von Webkommunikation und Internettechnologie ist häufig von englischsprachigen Bezeichnungen geprägt. So verwundert es nicht, dass sich für eine derzeit unter Programmierern und Kreativen umfassend diskutierte Darstellungsform wieder einmal ein englischer Begriff durchgesetzt hat. „Responsive Webdesign“ klingt im ersten Moment ungewohnt und auch irritierend, verwechselt man das enthaltene Attribut doch allzu schnell mit „responsible“. Tatsächlich geht es aber nicht um Verantwortung, sondern um eine flexible Reaktion, nämlich der Bildschirmdarstellung einer Website auf die Bildschirmdimensionen des jeweiligen Anzeigegeräts. Damit wird Responsive Webdesign zur Sammelbezeichnung für alle Anstrengungen und Herausforderungen von Gestaltern und Entwicklern, die sich aus der zunehmenden Nutzung mobiler Endgeräte und dem drahtlosen Surfen im Internet ergeben. Missverständlich kann auch das zweite Wort des zusammengesetzten Begriffs sein. Denn es geht dabei nicht nur um die Arbeit des Designers, sondern auch und in wesentlichen Teilen um neue Programmiertechniken, welche die genannte Anpassung erst möglich machen. Dabei gilt es, alte Gewohnheiten bei der Formgebung von Webseiten zu Gunsten einer im Durchschnitt erhöhten Benutzerfreundlichkeit aufzugeben, um mit neuer Darstellungstechnik den neuen Endgeräten gerecht zu werden.

Worum geht es eigentlich?

Das große Interesse am Thema geht darauf zurück, dass die Anzahl und Variationsbreite internetfähiger Endgeräte ständig zunimmt. Dabei sind Zweit- und Drittgeräte für nicht wenige Nutzer zur Normalität geworden. Je nach Verwendungssituation kommen unterschiedliche Bildschirmgrößen zum Einsatz: Größere Flachbildschirme am Desktop-PC, kleinere Displays an Laptops und Netbooks, noch kleinere Touchscreens bei Tablet-PCs, die ebenso wie die noch handlicher gebauten Smartphone-Displays sowohl hoch- als auch querformatig genutzt werden können. Aus einer solch großen Bandbreite leitet sich das eine große Problem ab: Wie können Internetseiten so dargestellt werden, dass sie auf möglichst allen Geräten noch lesbar bleiben und damit ihre ganze intendierte Wirkung entfalten? Ganz klar, mit den noch weitgehend praktizierten Mitteln fest definierter Seitenbreiten kann das nicht funktionieren. Denn je weniger Bildschirmfläche zur Verfügung steht, desto mehr muss der Leser scrollen, und zwar nicht nur in der Vertikalen, was bei umfangreicheren Seiten ohnehin unerlässlich und auch akzeptiert ist. Unangenehm ist es, wenn die Scrollbewegung auch noch in der Horizontalen notwendig ist. Die Website ist dann immer nur in Form eines kleinen Ausschnitts sichtbar. Die Orientierung und das Aufnehmen von Informationen werden dann u. U. zu einem Abenteuer und reduzieren die Bereitschaft, sich länger auf der Seite aufzuhalten. Wer als Seitenbetreiber dem Besucher entgegenkommen will, gerade den Nutzern kleiner mobiler Geräte, der muss zu den Mitteln des Responsive Webdesign greifen.

Und wie funktioniert das?

Wesentliches Element einer „reagierenden“ Seitendarstellung ist ein flexibles Layout. Das ist nun zwar keine Erfindung, die mit der Entwicklung des Responsive Webdesigns in Verbindung steht. Zuvor waren flexible Weblayouts aber nur recht selten anzutreffen, häufig bei Weblogs, Diskussionsforen oder anderen textlastigen Webformen. Der Grund: Die Ausdehnung der Seitenanzeige bis zum linken und rechten Rand des Bildschirms konnte bei breiten Displays zu anstrengenden Ergebnissen führen, da der Kopf sich beim zeilenweisen Lesen immer mitdrehen muss. Auch war der Umgang mit Grafiken dabei ein Problem, da Grafiken nicht im gleichen Maße flexibel sind wie Textzeilen und sich zudem kaum kontrollierbare Proportionsverlagerungen zwischen Text und Bild ergeben können. Wenn das Konzept des flexiblen Layouts im Responsive Webdesign eine Renaissance erlebt, dann ist das zunächst aus der Not geboren. Schließlich sind die damit verbundenen Schwierigkeiten grundsätzlich nicht zu leugnen. Mit zunehmender Diskussion des Themas sind aber auch die Lösungsstrategien zahlreicher und ausgefeilter geworden. Im Grunde bereits bekannte Techniken können jetzt gezielt eingesetzt und miteinander kombiniert werden, um ansprechende Ergebnisse zu erreichen. Dazu gehören u. a.:
— Definition einer maximalen Anzeigenbreite, die als noch angenehm empfunden wird. Damit ist die Breitenflexibilität zwar in einer Richtung begrenzt. Der Kompromiss sorgt aber für akzeptable Ergebnisse auch bei besonders breiten Bildschirmen, auf denen dann eine entsprechend ausgedehnte Hintergrundfläche erscheint.
— Nutzung des Prinzips relativer Dimensionsangaben für alle Layoutelemente. „Spalten“, Menüpunkte und andere Containerelemente werden deshalb nicht mit absoluten Pixelwerten, sondern in Form eines prozentualen Anteils eines übergeordneten Layoutelements definiert.
— Auch Abbildungen werden statt mit absoluter Größe mit relativen Prozentwerten definiert. So können sie flexibel auf die Dimensionen umgebender Layoutelemente bezogen und je nach Bildschirm ausgegeben werden. Voraussetzung ist, dass die Bilder in ausreichender Größe zur Verfügung stehen, so dass sie skalierbar sind, nach oben hin aber kein Qualitätsverlust zu befürchten ist. Ein Nachteil: Mit Hintergrundbildern funktioniert dieses Konzept nach wie vor nur eingeschränkt und die Ladezeiten können sich wegen der Bildgröße erhöhen.

Neue Techniken: CSS3 und Media Queries

In der Regel sind diese Techniken über die Stylesheets der Website steuerbar. Für bestimmte Zwecke sind alternativ spezielle JavaScripts verwendbar. Was den Ansatz eines responsiven Webdesigns aber im Vergleich zu den früher bekannten Methoden wirklich attraktiv macht, ist die Einführung des CSS3-Konzepts der Media Queries. Eine andere Form gerätespezifischer Formgebung war bereits unter CSS2 im Einsatz, nämlich die Unterscheidung von Bildschirm- und Druckausgabe. So war es schon länger möglich, spezielle Stylesheets für den benutzerfreundlichen Ausdruck von Webseiten bereit zu stellen, die dann z. B. hinderliche Hintergrundbilder und Navigationselemente ausblenden und Text kontrastreich darstellen konnten. Mit den neuen Media Queries unter CSS3, meist in Verbindung mit der aktuellen Seitenbeschreibungssprache HTML5 gebraucht, sind aber auch weitere Geräteeigenschaften ansprechbar, z. B. die Browserbreite der Darstellung, die Gerätebreite, die Orientierung der Anzeige, ob Farb- oder Schwarzweißdisplay u. ä.. Besonders zentral ist hier die Möglichkeit, spezielle Stylesheets für bestimmte Bildschirmbreiten zu erstellen, mit solchen Auszeichnungen zu versehen, die eine optimale Anzeige im jeweiligen Gerät ermöglichen und damit nahezu allen Nutzern eine verbesserte Rezeptionsmöglichkeit zur Verfügung zu stellen. Welches Stylesheet „greift“ wird, wie zuvor schon für die Screen- und Print-Ausgabe in speziellen Anweisungen im Kopf des Seitenquelltextes definiert. So gestaltete Websites werden ohne jedes Zutun des Nutzers stets geräteoptimiert ausgegeben. Es liegt dann am Geschick und Ehrgeiz des Entwicklers, wie engmaschig er die Bandbreite anlegt.

Herausforderungen flexibler Designs

Während HTML5 und CSS3 die programmiertechnische Basis von Responsive Webdesign darstellen, ist auch die Oberflächengestaltung der Seiten so anzupassen, dass das Konzept seine Vorzüge entfalten kann. Wird eine Website responsiv angelegt, muss das Design dem Rechnung tragen. Das gilt im Besonderen für den Umgang mit solchen grafischen Elementen, die bei festen Seitenbreiten noch bequem als Hintergrundbilder implementiert werden konnten. Wegen der begrenzten Flexibilität solcher Bilder wird man im flexiblen Design tendenziell darauf verzichten und alternative Lösungen finden. Auch die Gestaltung von Navigationsmenüs kann von vorneherein für die Ausgabe in verschiedenen Bildschirmbreiten optimiert oder in gerätespezifischen Varianten konzipiert werden. Ein weiteres Beispiel ist die Dimensionierung der Headlines, welche die Gesamterscheinung einer Seite erheblich beeinflussen können, wenn bei schmalen Breiten z. B. mehrere Umbrüche entstehen. Dies sind nur drei Beispiele für die Notwendigkeit, beim Responsive Webdesign besondere Sorgfalt auf die stimmige Ausarbeitung des flexiblen Layouts zu legen. Wer sich darauf einlässt, wird mit einer Benutzerfreundlichkeit belohnt, welche die Zahl aufmerksamer Nutzer und damit die Kommunikationschancen gerade für den Bereich der mobilen Internetnutzung erheblich ausweitet.

© Bernhard Lux / LinieLux – Kommunikation
Downloaden