Responsive Webdesign ist heute State of the Art im Webdesign. Alle Kunden wollen eine Webseite, die auch auf mobilen Geräten gut funktioniert. Das stellt uns Designer vor neue Herausforderungen.

Beim Entwerfen des Designs für eine Webseite beginnt man in der Regel mit der Desktopansicht. Ich mache das jedenfalls so, auch wenn der Code später „mobile first“ gebaut wird. Die Desktopansicht ist ein guter Einstieg und man bekommt schnell ein Gefühl für die Gestaltung.

Dann wäre da noch die Frage
„Wie sieht das Design auf einem kleinen Bildschirm aus?“

illu-rwd-2-frei

„Auf dem Tablet wird dann alles irgendwie schmäler.“

Okay. Aber was passiert, wenn die Spalten so schmal werden, dass man den Text nicht mehr lesen kann? Und kann man dieses Bild da noch erkennen, wenn es nur noch 30×50 Pixel groß ist? Und wie soll man diesen winzig kleinen Link mit dem Finger anklicken?

Es hilft nichts. Damit die Seite auch auf kleinen Bildschirmen lesbar und bedienbar muss man verschiedene Szenarien durchspielen.

„Huch, wo ist denn der Text hin?“

Auf einem großen Bildschirm können die Inhalte in mehreren Spalten nebeneinander stehen. Auf kleinen Bildschirmen ist das anders. Weil dort weniger Platz ist, verringert sich die Anzahl der Spalten oder die Inhalte werden untereinander angeordnet.

Das sollte man beim Entwerfen im Hinterkopf behalten. Wenn man nicht aufpasst, verschwinden zum Beispiel wichtige Inhalte aus dem Sichtfeld des Nutzers. Oder es erschließen sich bestimmte Zusammenhänge nicht mehr, weil die Elemente nicht mehr nebeneinander stehen.

„Das Menü wird auf dem Smartphone so ein Hamburger-Dings.“

Wie sieht das Menü auf einem Tablet oder auf einem Laptop aus, wo der Platz knapp ist und es immer enger zugeht?
Man kann dieser Frage ausweichen, indem man relativ zügig auf das Hamburger-Icon wechseln. Alles, was kleiner ist als 1200px bekommt ein Hamburger-Menü verpasst.

Ich finde das nicht überzeugend. Wenn auf dem iPad jede Menge Platz ist und ich die Navigation trotzdem nicht sehen kann, ist das einfach ärgerlich. Wo es machbar ist, sollte die Navigation auch sichtbar und bedienbar sein.

Wichtig ist, die Navigation so zu konzipieren, dass sie sowohl auf großen als auch auf mittelgroßen Bildschirmen gut funktioniert. Die Navigation sollte verkleinerbar und flexibel sein. Je mehr „Luft“ die Navigation hat, um sich anzupassen, desto leichter ist es, das umzusetzen. Andersherum wird es ziemlich schnell ziemlich frickelig, wenn die Navigation beispielsweise auf dem Desktop exakt die volle Breite einnimmt und die Menü-Punkte dicht an dicht stehen.

F-ShapeAuch die klassische Zweit-Navigation in einem vertikalen Kasten, der meist links vom Content steht, ist ein Muster aus der Ära der statischen Seiten. Im Responsive Design funktioniert das nicht so richtig gut. Es ist besser, nach alternativen Lösungen zu suchen.

„Das blenden wir auf dem iPhone einfach aus!“

Das klingt zunächst mal nach einem guten Trick. Was auf den kleinen iPhone-Bildschirm komisch aussieht, wird einfach ausgeblendet. display:none macht’s möglich.

In manchen Situationen und sparsam eingesetzt kann man damit arbeiten. So kann es beispielsweise sinnvoll sein, bei Teaser-Elementen mit Foto, Überschrift und Anreissertext auf kleinen Bildschirmen den Anreissertext wegzulassen. Foto und Überschrift reichen aus und fügen sich besser ins Layout.

Häufig wird diese Methode jedoch eingesetzt, weil es mit dem Smartphone-Layout nicht so recht klappen will. Dann wird schnell mal ein Element als „nicht so wichtig“ erklärt. Wirklich überzeugend ist dieses Argument selten. Denn wenn das wirklich so wäre, hätte man diese Information ja schon von vorn herein weglassen können.
Nein, Wichtigkeit und Priorität sind unabhängig von der Bildschirmgröße. Anders gesagt: Dass der User auf dem Smartphone nur eine Webseite „für Arme“ zu sehen kriegt, kann nicht im Sinne des Betreibers der Webseite sein.

„Lorem ipsum dolor sit amet.“

Blindtexte sind etwas Feines und kein Designer kommt ohne sie aus. Aber Blindtexte lügen uns ganz schön was vor. Ruhige, lange Texte mit hübschen Bildern machen sich im Entwurf immer gut. Aber wie viel haben solche „Texte“ mit den realen Inhalten zu tun? In der Regel reichlich wenig.

Ohne ein Gefühl für die Inhalte kann man kein sinnvolles Layout entwerfen. Schon gar keines, das im Responsive Design funktioniert. Es muss klar sein, was inhaltlich auf der Seite passieren soll. Das müssen noch nicht die fertig ausformulierten Texte sein, aber das inhaltliche Konzept muss vor dem Design stehen.
[white_box]

TIPPS FÜR DESIGNER

  • Wenn Ihr ein neues Projekt beginnt, vergesst erst Mal die Ästhetik. Die schönen Bilder kommen später.
  • Nehmt Euch Stift und Papier und zeichnet auf, wo was in Eurem Layout stehen soll.
  • Macht diese Skizzen für mehrere Bildschirmbreiten und -proportionen: Großer Bildschirm, Laptop, kleines Tablet und Smartphone.
  • In welcher Form erscheinen die Inhalte auf der Seite? Als kleine Teaserboxen mit Bild und Anreissertext? Als kurze Texte mit Weiterlesen-Link? Als lange Texte mit Anchors? Als Listen und Aufzählungen? Kann man eine Sache vielleicht besser in einer Slideshows oder Bildergalerie erklären?
  • Auch wenn der Kunde alle Inhalte gleich wichtig findet, für ein Layout müssen wir Inhalte priorisieren. Was soll der Besucher auf jeden Fall mitnehmen, wenn er eine Seite aufruft? Befindet sich das, was wichtig ist, immer im Sichtfeld des Besuchers? Auch auf dem Tablet und auf dem Smartphone?
  • Diskutiert diese Skizzen mit Eurem Kunden und dem Entwickler Eures Vertrauens.

[/white_box]