Vorheriger Artikel Nächster Artikel

Praxis-Guide: Webdesign-Grundlagen für mobile Websites

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

Das Web ist mobil und wie sind in aller Munde. Doch es gibt auch andere mobile Ansätze und der Weg zur perfekten mobilen Website ist steinig. Wir zeigen, welche konzeptionellen und gestalterischen Aspekte wichtig sind, um mobil fit zu sein.

Praxis-Guide: Webdesign-Grundlagen für mobile Websites

Wenn heutzutage vom „mobilen Web“ gesprochen wird, ist damit meistens das so genannte „Responsive Webdesign“ (kurz: RWD) gemeint. Responsive heißt soviel wie ansprechbares oder reaktionsfähiges Webdesign und bedeutet, dass eine Website so umgesetzt wird, dass sich das Design sowie alle Inhalte automatisch dem zur Verfügung stehenden Platz im Browser anpassen. Die Darstellung wird dabei mit der CSS3-Technologie „Media Queries“ entsprechend der verschiedenen Display-Größen angepasst.

Der Besucher kann bei einer RWD-Site also alle Inhalte konsumieren, unabhängig davon, ob die Website auf einem 27-Zoll-Display, auf einem Tablet oder mittels Smartphone dargestellt wird. Er sieht immer dieselben Inhalte, lediglich visuell für seine momentanen Bedürfnisse optimiert.

dms 941d0d88ecdc7d5c25c96b3275e3d5a1
Das Responsive Design der Website orestis.nl mit drei Breakpoints: Smartphone-Version, Tablet-Variante und Desktop-Ansicht.

Doch RWD ist nicht immer das Maß der Dinge. Bereits vor der Umsetzung eines Web-Projekts sollte die Frage stehen, ob die angebotenen Informationen überhaupt dafür geeignet sind. So muss geklärt werden, ob die Benutzer identische oder abweichende Informationen erwarten, wenn sie die Website von unterwegs aufrufen. Besucht ein User beispielsweise ein News-Portal, möchte er Nachrichten lesen. Dabei ist es irrelevant, von welchem Gerät aus er die Website besucht. Doch manchmal haben Nutzer spezielle Erwartungen.

Mobile-only

Bei dieser Art mobiler Site handelt es sich um eine unabhängig konzipierte und programmierte Website. Diese soll nicht auf jedem Gerät eine gute Figur machen – sie wurde ausschließlich für die mobile Nutzung entwickelt und muss entsprechend auch separat gepflegt werden.

Ein solches Konzept ist vor allem dann sinnvoll, wenn der Besucher unterwegs andere Informationen als von einem stationären Computer aus sucht. Ein Beispiel ist die Website der Deutschen Bahn: Werden am PC in erster Linie Tickets gekauft und allgemeine Informationen gelesen, so stehen in der mobilen Version die Fahrplanauskunft und Hinweise zu Verspätungen im Fokus. Ein RWD würde dem mobilen Nutzer in diesem Fall viele überflüssige Informationen anbieten.

Apps

Der Vollständigkeit halber seien auch die Apps kurz erwähnt. Hierbei steht meist eine spezielle Funktion im Vordergrund. Der Benutzer muss sich zudem bewusst für die Nutzung der App entscheiden.

dms 32b342adb2f764392751465d5b1ab9c4
Die unabhängige mobile Webseite der Deutschen Bahn bietet speziell aufbereitete Inhalte; die Umleitung vom Handy geschieht automatisch.

Bei Apps wird zwischen nativen Apps und Web-Apps unterschieden. Native Apps werden speziell für einen Gerätetyp programmiert und müssen heruntergeladen und installiert werden. Web-Apps hingegen basieren auf Webstandards wie HTML5 und CSS3, sind gegenüber nativen Apps im Funktionsumfang eingeschränkt und können ohne Installation verwendet werden. Web-Apps sind auch nicht auf ein spezielles Gerät beschränkt; stattdessen werden sie über den Browser genutzt. Entsprechend groß sind die konzeptionellen Überschneidungen mit „echten“ mobilen Websites.

Abspecken vs. Aufblasen

Bei der Planung einer RWD-Site existieren im Wesentlichen zwei Prinzipien: „Graceful Degradation“ und „Progressive Enhancement“ (auch „Mobile First“). Keine der beiden Vorgehensweisen ist immer die richtige; die Frage ist, ob eine Website vorrangig für große Monitore oder eher für die mobile Nutzung konzipiert wird.

Wer in erster Linie große Monitore bedienen möchte, arbeitet nach dem Prinzip „Graceful Degradation“. Dabei wird die Site zunächst für die große Ansicht konzipiert, gestaltet und programmiert sowie mit allen visuellen Feinheiten, technischen Spielereien und Skripten ausgestattet. Anschließend optimiert man diese Site für die mobile Ansicht. Die Site wird, so gut es geht, „abgespeckt“.

Steht die mobile Nutzung im Vordergrund, ist der Weg genau umgekehrt. Zunächst wird die Website für mobile Endgeräte erstellt. Dabei stehen geringe Dateigrößen, vereinfachte Navigationskonzepte und reduzierte Inhalte im Vordergrund. Anschließend wird die Site für die Desktop-Ansicht optimiert, mithin also „aufgeblasen“.

Design für mehrere Displays

Bei einer „mobile-only“-Website oder einer Web-App lässt sich das Design gut auf die Zielgruppe und das jeweilige Ausgabegerät zuschneiden. Bei der Gestaltung des Layouts wird meist mit festen Abmessungen gearbeitet, da das Design nur geringe Unterschiede zwischen den verschiedenen Display-Größen ausgleichen muss. Der Workflow ähnelt daher stark der Umsetzung einer klassischen Website: Zunächst wird das Layout erstellt, anschließend das Design technisch mit HTML, CSS & Co umgesetzt.

Beim Responsive Webdesign sieht es etwas anders aus, denn das Design muss enorme Größenunterschiede ausgleichen können. Ein Bestandteil des RWD sind deshalb sogenannte Breakpoints. Ein Breakpoint wird im CSS-Code durch ein Media Query definiert, das es erlaubt, ausgewählten HTML-Elementen neue CSS-Eigenschaften zuzuweisen, sobald bestimmte Bedingungen erfüllt sind. Beispielsweise rutscht das Logo über die Navigation, wenn das Display eine bestimmte Breite in Pixeln unterschreitet, oder die Schriftgröße verkleinert sich, wenn das Gerät im Querformat gehalten wird. Media Queries bieten vielfältige Möglichkeiten [1].

Woran sich Breakpoints orientieren, ist grundsätzlich egal. Häufig orientieren sich Media Queries jedoch an gängigen Display-Größen wie denen von iPad und iPhone. Im Listing wird der standardmäßig rote Hintergrund in der iPad-Ansicht gelb, am iPhone hingegen grün.

Breakpoints

body { background: red; }
@media only screen and (max-width: 1024px) {
 body { background: yellow; }
}
@media only screen and (max-width: 480px) {
 body { background: green; }
}

Die Bereiche zwischen den Breakpoints werden flexibel gefüllt. Viele Webdesigner arbeiten daher mit einem flexiblen Gestaltungsraster [2], das auf Prozentwerten anstelle von Pixeln basiert. Bereits bei der Gestaltung des Layouts ergeben sich so allerdings Schwierigkeiten, denn flexible Elemente des Designs lassen sich in Photoshop & Co nicht darstellen.

dms dee30fdb124a1e0dc473ef93b1e3d13f
Mit Gridpak lassen sich Raster auf Basis von Prozentwerten erstellen. Auch Breakpoints können im Raster definiert werden [2].

Da sich das Design an einem Breakpoint deutlich verändert, lohnt es sich, für die verschiedenen Breakpoint-Ansichten separate Layout-Dateien zu verwenden. Responsive Webdesign komplett in Photoshop umzusetzen, ist entsprechend zeitaufwändig und komplex. Viele Webdesigner erstellen daher nur eine Layoutdatei und gestalten anschließend die optimierten Versionen per Code im Browser.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von andreas am 04.11.2012 (17:47 Uhr)

    hi, netter artikel, aber warum basieren media-queries immer noch auf pixel und die schrift dann in em? das passt doch nicht.

    Antworten Teilen
  2. von Kevin am 05.11.2012 (09:05 Uhr)

    @andreas
    worauf sollen Media-Queries denn sonst basieren? Bildschirme stellen nunmal Pixel dar.

    Antworten Teilen
  3. von Malte am 06.11.2012 (15:08 Uhr)

    @andreas
    Warum passt das nicht? Ich finde, das passt sehr gut

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » weiterlesen

Responsive Webdesign verkaufen: So sieht der optimale Workflow aus
Responsive Webdesign verkaufen: So sieht der optimale Workflow aus

Mit „Responsive Webdesign“ werden oft nur die technischen Komponenten in Verbindung gebracht – wie Breakpoints, Responsive Images und progressive Enhancement. Kein Wunder, dass RWD-Projekte zum … » weiterlesen

t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen