© prettyboy80/Shutterstock.com
Moderne Benutzeroberflächen im Web 2.0

Moderne Benutzeroberflächen im Web 2.0


Der Schrei nach anpassungsfähigen Layouts in Webanwendungen wird von Jahr zu Jahr lauter. Eine Webanwendung soll nunmehr nicht nur mit dem herkömmlichen PC oder Notebook aufgerufen werden können, sondern sich auch mit einem Smartphone oder Tablet ohne Einschränkungen bedienen lassen. Eine Darstellungstechnik, die genau diesen Kriterien gerecht wird, nennt man Responsive Design.

Resonsive … und zusätzlich mobil

Prinzipiell gilt die Regel, je mehr mobile Endgeräte am Markt an den Verbraucher gebracht werden, desto weiter steigt der Bedarf an Webanwendungen, die die Kriterien eines Responsive Designs erfüllen. Eine Anwendung, die sich mit dem Smartphone oder dem Tablet nicht barrierefrei bedienen lässt, wird von den Nutzern nicht akzeptiert und gemieden. Das war den Betreibern von Webanwendungen bis vor wenigen Jahren noch egal, heute kann es verheerende Auswirkungen auf das Geschäft haben, wenn man sein Angebot nicht direkt auch für mobile Endgeräte verfügbar macht.

Grundlage und Begriff

Bei Responsive Webdesign handelt es sich um eine technische Umsetzung eines anpassungsfähigen Weblayouts. Das bedeutet, dass das Layout automatisch an die Bedürfnisse des jeweiligen Geräts, mit dem die Webanwendung gestartet wurde, angepasst wird. Im Detail betrifft das die einzelnen Module einer Webanwendung, wie beispielsweise die Navigation, die Suche oder den Inhaltsbereich. Technisch möglich macht dies die Einführung von HTML5 und CSS3. Früher wurden mehrere Layouts für ein und dieselbe Webanwendung erstellt. So gab es ein Layout für den herkömmlichen PC und beispielsweise ein angepasstes Layout für ein Smartphone. Je nachdem, mit welchem Endgerät der Anwender die Seite öffnete, wurde das entsprechende Layout herangezogen. Heute werden in einem Layout möglichst viele Endgeräte berücksichtigt und deren Darstellungseigenheiten integriert.

Geräteabhängige Darstellungen

Eine Webanwendung, die beispielsweise auf einem herkömmlichen PC in drei Spalten aufgeteilt ist, wird beim Aufruf mit einem Smartphone lediglich in einer Spalte gerendert und enthält weniger Bereiche und Funktionen als auf dem PC. Somit passt sich die Webanwendung nicht nur an das Display des jeweiligen Geräts an, sondern auch an die zur Verfügung stehenden Ressourcen des jeweiligen Endgeräts. Da einem Smartphone deutlich weniger Rechenleistung und eine schmalere Bandbreite zur Verfügung stehen, ist hier die Funktionalität auf ein erforderliches Minimum begrenzt (Abb. 1 und 2).

bremus_responsive_1.tif_fmt1.jpgAbb. 1: Struktur einer Anwendung für die Anzeige auf dem Bildschirm
bremus_responsive_2.tif_fmt1.jpgAbb. 2: Struktur einer Anwendung für die Anzeige auf dem Smartphone

Ziel dieser Methodik ist es, dass sich die Darstellung einer Webseite so anpasst, dass sie sich jedem Betrachter so übersichtlich, benutzerfreundlich und barrierefrei wie möglich präsentiert.

Technik

Zur Umsetzung eines Responsive Webdesigns sind Media Queries erforderlich. Hierbei handelt es sich um ein CSS3-Konzept, das es erlaubt, anhängig von einem bestimmten Endgerät ein passendes Layout zu laden und die Webanwendung damit zu rendern. Mit dem media-Attribut kann die Anwendung der Styles auf unterschiedliche Medien begrenzt werden (Tabelle 1).

Der folgende Quellcode wird jetzt bei einigen Entwicklern, die schon Jahre im Geschäft sind und schon unzählige CSS-Dateien in eine Webseite eingebunden haben, ein wenig Verwirrung auslösen:

<head> <link rel="stylesheet" href="style.css" media="all and (min-width:500px)" > </head>

Seit der Einführung von HTML5 entfällt die Angabe eines type-Attributs. Zudem ist das media-Attribut deutlich mächtiger geworden als das noch in den Vorgängerversionen der Fall war. Als Wert kann nunmehr nicht nur ein einzelner Medientyp angegeben werden, sondern eine umfangreiche Media Query. Dass eine Layoutdatei nun sowohl für den Bildschirm (screen) als auch für den Druck (print) gültig gemacht werden kann, ist nur ein einfaches Beispiel. Detaillierte Informationen zu Media Queries finden sich auf den Seiten der W3C [1]. Über eine Media Query können folgende Kriterien definiert werden:

  • Bildschirmauflösung des Geräts

  • Orientierung (Quer- oder Hochformat)

  • Eingabemöglichkeiten (Tastatur, Touch, Sprache)

  • Breite und Höhe des Browserfensters

Medientyp

Beschreibung

all

Gültig für alle interpretierenden Endgeräte

aural

Sprachausgaben

braille

Braille-Zeile

handheld

Handheld-Geräte (Kleinstcomputer, wenig Bandbreite)

projection

Projektoren und Beamer

print

Druckvorschau und ausgedruckte Dokumente

Tabelle 1: Mögliche Medientypen für Layoutsteuerung

Listing 1 zeigt den Kopfbereich (<head>-Element) einer Webseite, in dem zwei Style-Sheet-Dateien geladen werden. Die global.css ist für jedes Endgerät gültig und wird unabhängig davon zum Rendern der Seite verwendet. Die smartphone.css wird nur geladen, wenn die Breite des Displays nicht größer ist als 640 Pixel. Das entspricht den marktgängigen Smartphones, die eine solche...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang