Chamäleonlayout dank Responsive Design

Moderne Benutzeroberflächen mit Media Queries und CSS3
Kommentare

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.

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).

Abb. 1: Struktur einer Anwendung für die Anzeige auf dem Bildschirm

Abb. 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. Ü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 Bildschirmbreite als Standard haben.

<head>
  <link rel="stylesheet" type="text/css" href="global.css" />
  <link rel="stylesheet" type="text/css" media="all and (max-device-width: 640px)"
  href="smartphone.css" />
</head>

Zum Schluss sei noch erwähnt, dass man auch innerhalb einer Style-Sheet-Datei Unterscheidungen bzw. nur für bestimmte Endgeräte gültige Styles definieren kann. Listing 2 hält hierzu ein Beispiel bereit.

#content {
  width: 960px;
}
@media all and (max-device-width: 640px) {
  #content {
    width: 610px;
  }
  #advertising {
    display: none;
  }
}

Aufmacherbild: Common Chameleon on a branch in the shadow von Shutterstock / Urheberrecht: Tom linster

[ header = Seite 2: Tableless Layout ]

Tableless Layout

Um ein nachhaltiges Responsive Design zu kreieren, ist es essenziell, das Handwerk des Tableless Layouts zu beherrschen. Nur dann kann gewährleistet werden, dass ein Layout auf verschiedenen Endgeräten auch barrierefrei und ohne hässliche Verschiebungen dargestellt werden kann.
Ein Layout ohne Zuhilfenahme von Tabellen zu entwickeln, ist schwerer, als es auf den ersten Blick den Anschein hat. Die Voraussetzungen hierfür sind ein grundlegendes CSS-Verständnis, aber vor allem der Wille, sich von alter Gewohnheit zu lösen und empfänglich für etwas Neues zu sein. Abbildung 3 zeigt eine Layoutaufteilung, wie sie häufig in einer Webanwendung gewählt wird.

Abb. 3: Struktur einer herkömmlichen Standardwebanwendung

Einige Webentwickler erkennen hier direkt ein Tabellenmuster: Eine Tabelle mit drei Spalten und vier Zeilen. Die ersten beiden Zeilen und die letzte Zeile einfach über drei Spalten strecken, und fertig ist das Layout. Das ist auch korrekt, von einem Responsive Design sind wir hier allerdings weit entfernt. Developer mit Weitblick sehen in dieser Abbildung sechs Container, die mittels CSS in einen Fluss gesetzt wurden. Ergebnis: ein Responsive Design. In HTML5 gibt es eigene Elemente für die jeweiligen Bereiche einer Webseite (Tabelle 2).

Element Beschreibung
<header> Definiert den Kopfbereich einer Seite oder einer Sektion
<nav> Bereich für eine Navigation
<aside> Definiert einen Bereich neben dem eigentlichen Seiteninhalt
<section> Definiert eine Sektion in einer Webseite
<article> Definiert einen Artikel
<footer> Definiert den Fußbereich einer Seite oder einer Sektion

Tabelle 2: Mögliche Layoutbereiche einer HTML5-Webanwendung

Gießen wir das Layout nun in HTML, sollte ein Ergebnis ähnlich wie in Listing 3 entstehen. Abbildung 4 stellt dar, welche HTML-Elemente für welchen Bereich der Webanwendung verwendet werden.

<!DOCTYPE HTML>
  <html>
    <head>
      <title>Responsive Design: Web für alle</title>
    </head>
    <body>
      <header id="header">
        <div id="logo">Logo</div>
        <div id="search">Suche</div>
        <nav id="navigation">Navigation</nav>
      </header>
      <aside id="left">Links</aside>
      <aside id="right">Rechts</aside>
      <section id="main">
        <nav id="breadcrumb">Navigationspfad</nav>
        <article id="content">Inhalt</article>
      </section>
      <footer id="footer">Fußzeile</footer>
    </body>
  </html>

Abb. 4: Transfer des Designkonzepts in HTML-Containern

Kommen wir nun zum eigentlich spannenden Teil der Umsetzung: der Implementierung des CSS. Im Detail geht es nun darum, die Container so anzuordnen, dass sie unserem Entwurf aus der Konzeptionsphase entsprechen. Sie werden überrascht sein, wie wenig CSS-Code hierfür nötig ist (Listing 4).

<style type="text/css">
  #logo { float: left; width: 200px; }
  #search { float: right; width: 200px; }
  #navigation { clear: both; }
  #left { float: left; width: 200px; }
  #right { float: right; width: 200px; }
  #main { margin: 0 200px; }
</style>

Der Schlüssel zum Erfolg und der wohl wichtigste Befehl hier ist float. Damit werden Container mittels CSS in einen Fluss gesetzt. Genau das Richtige also, um unsere Block-Level-Container nebeneinander platzieren zu können. Näher eingehen möchte ich an dieser Stelle auf die Umsetzung des eigentlichen Inhaltsbereichs, der aus einer linken und rechten Spalte sowie einem zentralen Bereich für den Inhalt besteht. Die linke und die rechte Spalte werden mittels float in den linken bzw. in den rechten Fluss gesetzt und somit an den Rändern des Anzeigebereichs positioniert. Zum Schluss setzen wir noch ein margin von 200px auf den linken und rechten Rand des Inhalts-Containers <section>, damit er sich nicht mit den beiden äußeren <aside>-Containern überlagert. Die Voraussetzungen für ein Responsive Design sind nun geschaffen, ohne dass wir eine einzige Tabelle verwendet haben. War doch gar nicht so schwer, oder?
An dieser Stelle, an der Sie nun gesehen und verstanden haben, wie leicht es ist, mit einigen wenigen Handgriffen eine anpassungsfähige und zudem noch barrierefreie Webanwendung zu strukturieren, kann ich Ihnen ja verraten, dass Sie sich noch etwas Arbeit sparen können – mit einem CSS Framework. Es existiert im Netz bereits eine Vielzahl von kostenlosen und frei verwendbaren CSS Frameworks. YAML und Blueprint sind hier wohl die bekanntesten und kommen bereits in vielen großen und bekannten Internetangeboten zum Einsatz. Der wohl größte Vorteil neben der Zeitersparnis, den Sie vom Einsatz eines CSS Frameworks haben, ist, dass diese Hilfsmittel für alle marktführenden Browser optimiert und getestet sind. Will heißen, dass eine Webanwendung in allen wichtigen Browsern gleich dargestellt und gerendert wird und Sie sich an dieser Stelle eine Cross-Browser-Optimierung sparen können.

[ header = Seite 3: YAML CSS Framework ]

YAML CSS Framework

Ich möchte zuerst das YAML CSS Framework vorstellen, das unter Berücksichtigung der Creative Commons Attribution 2.0 License (CC-BY 2.0) verwendet werden darf. Zusammengefasst bedeutet das, dass Sie das Framework sowohl in privaten als auch in kommerziellen Anwendungen frei verwenden können, Anpassungen und Erweiterungen des Frameworks allerdings ebenfalls unter dem gleichen Lizenzmodell kostenfrei veröffentlichen müssen. Möchten Sie also ein Layout mit dem YAML CSS Framework realisieren, laden Sie sich die Sourcen von der Webseite des Betreibers herunter und binden sie in Ihre Webanwendung ein. Listing 5 zeigt die grundlegende HTML-Struktur einer Webanwendung, die mit YAML umgesetzt werden soll.

<!DOCTYPE HTML>
  <html>
    <head>
      <title>Barrierefreiheit: Web für alle</title>
      <!-- mobile viewport optimisation -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- stylesheets -->
      <link rel="stylesheet" href="base.min.css" type="text/css"/>
      <!--[if lte IE 7]>
      <link rel="stylesheet" href="iehacks.min.css" type="text/css"/>
       <![endif]-->
      <style type="text/css">
        .ym-wrapper { min-width: 760px; max-width: 1000px; margin-left: auto;
        margin-right: auto; }
        .ym-wbox { padding: 10px; }
      </style>
    </head>
    <body>
      <div class="ym-wrapper">
        <div class="ym-wbox">
          <header>Kopfzeile</header>
          <div>Inhalt</div>
          <footer>Fußzeile</footer>
        </div>
      </div>
    </body>
  </html>

YAML besteht aus einer Vielzahl von Style-Sheet-Dateien, die bei Bedarf eingebunden werden können. In jedem Fall erforderlich sind allerdings die core.min.css und die iehacks.min.css, die sämtliche Kernklassen zur Verfügung stellen. Es empfiehlt sich, an dieser Stelle die minimierten Versionen der Style-Sheet-Dateien einzubinden, da sie vom Datenvolumen kleiner sind und weniger Ladezeit in Anspruch nehmen. Auch das ist ein wichtiger Punkt für ein Responsive Design und die Barrierefreiheit einer Websoftware: Ladezeiten so gering und kurz wie möglich zu halten, um die Anwendung auch auf einem Smartphone effizient laden und ausführen zu können. Im nächsten Schritt wollen wir nun unser Layout, wie wir es im Konzept spezifiziert haben, mit YAML umsetzen. Hierzu erweitern wir unser HTML-Konstrukt um die noch fehlenden Container (Listing 6). Weiteren CSS-Code müssen wir nicht produzieren; er wird uns bereits von YAML zur Verfügung gestellt.

<div class="ym-wrapper">
  <div class="ym-wbox">
    <header id="header">
      <div class="ym-grid">
        <div id="logo" class="ym-g50 ym-gl">Logo</div>
        <div id="search" class="ym-g50 ym-gr">Suche</div>
      </div>
      <nav id="navigation">Navigation</nav>
    </header>
    <div class="ym-grid ym-equalize">
      <aside id="left" class="ym-g25 ym-gl">Links</aside>
      <section id="main" class="ym-g50 ym-gl">
        <nav id="breadcrumb">Navigationspfad</nav>
        <article id="content">Inhalt</article>
      </section>
      <aside id="right" class="ym-g25 ym-gr">Rechts</aside>
    </div>
    <footer id="footer">Fußzeile</footer>
  </div>
</div>

Sie sehen, wir können mittels des YAML CSS Frameworks beim Erzeugen eines Layouts für eine Webanwendung noch einmal viel Zeit einsparen. Und der Einarbeitungsaufwand hält sich dabei in Grenzen. Selbstverständlich bietet YAML noch viele weitere Hilfsklassen für Formulare, Navigation und auch für Barrierefreiheit. Interessant dürften hier die Klassen zum Verbergen von Inhalten sein. Einen Blick in die Dokumentation zu riskieren, lohnt sich auf jeden Fall.

Blueprint CSS Framework

Der wohl schärfste Konkurrent von YAML ist das Blueprint CSS Framework, auf dessen Grundlage auch bereits große und namhafte Anwendungen umgesetzt worden sind. Auch dieses Framework möchte ich kurz vorstellen und zeigen, wie damit unser Konzept der Webanwendung umgesetzt werden kann.
Blueprint ist unter einer modifizierten Form der MIT-Lizenz veröffentlicht und somit kostenlos und frei verfügbar. Das Framework kann in privaten wie auch in kommerziellen Anwendungen eingesetzt, modifiziert und erweitert werden, solange Sie immer auf die Quelle Ihrer Codebasis verweisen und Ihre Erweiterung unter der gleichen Lizenz kostenfrei veröffentlichen.
Starten wir nun mit der Umsetzung. Der erste Schritt besteht darin, sich das Framework von der Webseite des Betreibers herunterzuladen und in die eigene Webanwendung einzubinden. Das Framework besteht im Kern aus drei Style-Sheet-Dateien:

1. screen.css – Beinhaltet CSS-Klassen zur Darstellung der Anwendung auf einem Bildschirm oder Beamer
2. print.css – Kümmert sich um die Optik einer ausgedruckten Webseite
3. ie.css – Behandelt den Internet Explorer gesondert und weist ihn an, die Webanwendung so darzustellen wie andere marktführende Browser.

Der Kopfbereich einer mit Blueprint umgesetzten Webanwendung wird dann wie in Listing 7 implementiert.

<link rel="stylesheet" href="blueprint/screen.css" type="text/css"
    media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css"
    media="print" />
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
    media="screen, projection" />
<![endif]-->

Weitere Style-Definitionen und Style-Sheet-Dateien sind für die grundlegenden Funktionen von Blueprint nicht nötig. Leider stehen für das Framework keine minimierten Ausführungen der Dateien zur Verfügung. Das kann allerdings durch den Entwickler selbst mittels der vielen im Netz frei verfügbaren Komprimierungstools durchgeführt werden.
Im letzten Schritt gilt es nun, das HTML-Markup zu Schreiben und die Webanwendung so zu strukturieren, wie es unser Konzept vorgibt. Es ist wichtig zu wissen, dass Blueprint standardmäßig auf dem Konzept des 950-Pixel-Grids aufbaut und dieses in 24 Spalten unterteilt ist. Das bedeutet, dass Ihrer Webanwendung insgesamt eine Breite von 950 Pixeln zur Verfügung steht und diese in maximal 24 Spalten aufgeteilt werden können. Eine Spalte hat dabei eine Breite von 30 Pixeln und ein Margin von zehn Pixeln. Das bedeutet, dass zwischen jeder Spalte ein Abstand von zehn Pixeln eingefügt wird. In der Summe kommt man dann auf eine Gesamtbreite von 950 Pixeln. Möchte man nun mehrere Container nebeneinander platzieren, so müssen sie mit einem Container, dem die Klasse container zugewiesen wird, umschlossen werden (Listing 8).

<header id="header">
  <div class="container">
    <div id="logo" class="span-12">Logo</div>
    <div id="search" class="span-12 last">Suche</div>
  </div>
  <nav id="navigation">Navigation</nav>
</header>
<div class="container">
  <aside id="left" class="span-6">Links</aside>
  <section class="span-12">
    <nav id="breadcrumb">Navigationspfad</nav>
    <article id="content">Inhalt</article>
  </section>
  <aside id="right" class="span-6 last">Rechts</aside>
</div>
<footer id="footer">Fußzeile</footer>

Schauen wir uns im Detail den Container an, der den linken und rechten sowie den eigentlichen Inhaltsbereich ausrichtet. Den beiden Außenbereichen wurde die Klasse span-6 zugewiesen. Das bedeutet, die Container nehmen jeweils eine Breite von sechs der insgesamt 24 Spalten in Anspruch. An den Inhaltsbereich wurde die Klasse span-12 vergeben, der somit eine Breite von 12 Spalten beansprucht. Zuletzt wurde der rechten und somit der letzten Spalte des Grids die Klasse last zugewiesen, die diesen Container als den letzten in der Ausrichtung kennzeichnet. Kein Hexenwerk also, das man mit Blueprint vollbringen muss, um Container auf dem Bildschirm auszurichten.
Natürlich stellt auch dieses Framework weitaus mehr Funktionalität zur Verfügung als die hier vorgestellten Grid-Klassen. Die Dokumentation ist leider nicht so gut wie die des Konkurrenten YAML, trotzdem sollte man auch hier einen Blick riskieren, um sich einen Überblick über den Umfang des Frameworks zu verschaffen.

Fazit

Hartnäckig hält sich der Gedanke in den Köpfen der Entwickler, dass das Erstellen eines anpassungsfähigen Designs aufwändig und zeitraubend ist und deshalb auf wenig Begeisterung stößt. Dieser Artikel hat gezeigt, dass ein Vorstoß in eine vielleicht neue Welt der Layoutentwicklung und ein Umdenken lohnenswert und sinnvoll sind. Angst muss man auch nicht vor der Umsetzung eines Tableless Layouts haben, denn die Handgriffe sind, gerade wenn man ein CSS-Framework einsetzt, überschaubar. Nicht zuletzt ersparen Sie sich das entwickeln mehrerer Layouts für verschiedene Endgeräte und können stattdessen ein Layout für alle Geräte bereitstellen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -