Drücke die Tasten ◄ ► für weitere Artikel  

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

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

Das Web ist mobil und Trends wie Responsive Webdesign 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. heißt soviel wie ansprechbares oder reaktionsfähiges 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 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 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.

Autor:
201 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
7 Antworten
  1. von “Fit fürs Mobile Web” ̵… am 25.05.2012 (16:46Uhr)

    [...] Weitere Informationen zum Artikel, sowie die Möglichkeit das Magazin online zu kaufen findet ihr hier: http://t3n.de/magazin/praxis-guide-mobile-websites-fit-furs-mobile-web [...]

  2. von RICANDVIER Network Group via facebook am 02.11.2012 (23:50Uhr)

    danke - shared

  3. von andreas am 04.11.2012 (17:47Uhr)

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

  4. von Kevin am 05.11.2012 (09:05Uhr)

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

  5. von Malte am 06.11.2012 (15:08Uhr)

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

  6. von r.o.b.'s Kellerclub » Neues J… am 17.01.2013 (18:34Uhr)

    [...] Ich möchte, dass das neue Design HTML5 (und soweit es geht auch CSS3) unterstützt und “responsive” ist. Basieren soll das ganze auf der JavaScript-Bibliothek jQuery. Das neue Design soll auf [...]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Tweet
  • Silver Schlittler (@Schlittler): Praxis-Guide: Webdesign-Grundlagen für mobile Websites http://t.co/n9MMmWSMFi via @t3n
  • um auch hier zu erscheinen!
Aktuelles aus dem Bereich Mobile
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

Webdesign-Trends 2014: Das erwartet Webworker im neuen Jahr
Webdesign-Trends 2014: Das erwartet Webworker im neuen Jahr

Nur noch wenige Tage, dann ist es da – das neue Jahr. Wir lassen die Trends dieses Jahres Revue passieren und zeigen, welche Trends uns Webworker im Jahr 2014 erwarten. » weiterlesen

Responsive Webdesign: Einstieg in „Mobile First“ [t3n-Video-Workshop]
Responsive Webdesign: Einstieg in „Mobile First“ [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen