Die Tage, an denen eine Website nur für einen einzigen Desktop-Bildschirm designt wurde, sind endgültig vorbei. Neue Technologien und die Verbreitung mobiler Webseiten lassen Designer überdenken, wie ihre Arbeit auf verschiedenen Geräten dargestellt wird. Denk mal drüber nach: Wie oft surfst du jeden Tag auf deinem Mobilgerät im Vergleich zu deinem Desktop? An dieser Stelle kommt responsives Webdesign ins Spiel.

Was ist responsives Design?

Vereinfacht gesagt ist responsives Webdesign (RWD) eine Methode, die es Design und Code ermöglicht, auf die Größe eines Gerätebildschirms zu reagieren. Das bedeutet, dass es dir bei der Betrachtung das optimale Erlebnis bietet, egal ob du auf einem Android-Gerät mit 4-Zoll-Bildschirm, deinem iPad mini oder einem 40-Zoll Cinema Display schaust.

Vergleiche das statische Design unserer Seite mit dem tatsächlichen responsiven Design:

responsive vs static website design comparison

Die besten responsiven Webseiten nutzen im Kern fließende Gitternetze, dynamische Bilder und CSS, um das Design der Seite anzupassen und sie entsprechend der Breite des Browsers anzuzeigen. Für Designer sollte das ultimative Ziel darin bestehen, die UI und UX eines Webdesigns nahtlos miteinander auf verschiedenen Geräten und Plattformen zu verbinden.

Weshalb ist responsives Design so wichtig?

Wenn wir unzählige Versionen einer Website für jedes bekannte Gerät auf dem Markt designen und entwickeln würden, wäre dies zeittechnisch einfach nicht praktikabel und extrem teuer! Außerdem könnten Seiten sich nicht an zukünftige technische Änderungen anpassen und somit in der Zukunft beinahe unmöglich zu erhalten sein. Responsives Design ist eine wirkungsvolle Lösung, um deine Website für die Zukunft zu sichern.

internet usage desktop vs mobile

Ein wichtiger Schlüssel zu responsivem Webdesign besteht darin, deine Zielgruppe zu kennen und zu wissen, auf welchem Gerät sie deine Website betrachtet. Wie viel deines Traffics kommt über den Desktop, wie viel über Tablets und wie viel über Smartphones? Ungefähr 56% des Traffics amerikanischer Webseiten kommt über Mobilgeräte. Es gibt heute ca. 2,6 Milliarden Smartphone-Nutzer und bis 2020 sollen es mehr als 6 Milliarden sein. Mobiles Design war noch nie so wichtig.

Es ist also unabdingbar, deine Website für verschiedene Geräte zu designen, aber es wird schwieriger, wenn man für verschiedene Webbrowser designt. Jeder große Webbrowser hat seine eigene Mobilversion und stellt Seiten unterschiedlich dar. Noch komplizierter wird es dadurch, dass es viele Versionen eines Browsers gibt, die bedient werden müssen – du kannst nicht von jedem erwarten, die neueste Version zu nutzen. Daher ist es wichtig, dass das Design auf einer Vielzahl von Browser-Versionen funktioniert.

Wirst du schon panisch bei dem Gedanken, eine Website zu designen? Keine Sorge, es ist für jeden in der Branche ein ständiger Kampf, für alle Browser-Versionen und Geräte zu designen. Die beste Antwort darauf ist, einfach deine Seite auf so vielen neuen und alten Geräten wie möglich zu testen. (Und einen super Entwickler zu engagieren!)

Für welche Website-Formate sollte ich designen?

Es gibt keine standardmäßige „Webseitengröße“. Es gibt hunderte von Geräten und die Größen und Bildschirmauflösungen verändern sich immerzu. Jede Website zieht zudem Nutzer auf unterschiedlichen Geräten an. Du wirst dir beispielsweise eher ein Rezept auf deinem Mobilgerät ansehen (beim Kochen in der Küche) und eher auf deinem Desktop nach einem Photoshop-Tutorial suchen (wenn du wissen willst, wie etwas in Photoshop funktioniert).

Du kannst herausfinden, welche Browser und Webseitengrößen für deine Seite am beliebtesten sind, indem du dir Google Analytics ansiehst. Wie also designst du bei all den unzähligen Kombinationen aus Browsern und Geräten responsiv, ohne deinen Verstand zu verlieren?

Versuche, mindestens 3 Layouts zu designen

Eins responsives Webdesign sollte mindestens 3 Layouts für verschiedene Browsergrößen haben. Die von uns genannten Zahlen beziehen sich darauf, was wir bei 99designs verwenden, sind aber unverbindliche Regeln.

  • Klein: unter 600px. So wird der Inhalt auf den meisten Telefonen aussehen.
  • Medium: 600px – 900px. So wird der Inhalt auf den meisten Tablets, einigen größeren Telefonen und kleinen Netbooks aussehen.
  • Groß: über 900px. So wird der Inhalt auf den meisten Desktopcomputern aussehen.

Jedes dieser Layouts sollte denselben Text und dieselben grafischen Elemente enthalten, aber so designt sein, dass es den Inhalt passend zum Gerät des Nutzers am besten darstellt. Die Seite zu verkleinern, damit sie auf kleinere Bildschirme passt, wird den Inhalt unlesbar machen, aber wenn du den Inhalt relativ zueinander skalierst und nur eine Zeile verwendest, wird er sehr viel lesbarer.

Beispiel unserer Logo-Design-Seite in drei verschiedenen Bildschirmgrößen für responsives Webdesign.

Dinge, an die du denken solltest

  • Das Nutzererlebnis ist entscheidend: Responsives Design ist mehr, als einfach aus einer Desktop-Seite eine mobile Seite zu machen. Wir müssen an das Erlebnis der Nutzer denken, ihre Interaktion und den wesentlichen Inhalt, nachdem sie suchen, wenn sie ein Mobilgerät nutzen.
  • Designe nicht für das neueste Mobilgerät mit bestimmten Bildschirmmaßen. Designe stattdessen deine Seite um deinen Inhalt herum. Wie werden das Layout und die Elemente auf einem Desktop funktionieren und werden dieselben Elemente sich an ein Mobilgerät anpassen?
interactive map example
Design von Karol Ortyl
  • Engagement: Die Hierarchie des Layouts ist super wichtig, besonders auf Mobilgeräten. Oftmals ist weniger mehr! Das Erlebnis auf Mobilgeräten ist durch den begrenzten Platz im Vergleich zum Desktop sehr viel fokussierter, daher muss klar sein, wie Nutzer auf deiner Seite lesen und sich auf ihr bewegen, damit du deine Schlüsselbotschaft verständlich rüberbringst und sie verstehen, worum es bei deiner Seite geht.
  • Dynamische Bilder sind äußerst wichtig, um eine responsive Website zu designen. Du musst dir überlegen, wie ein Bild sich in seiner Größe verändern wird. Wie wird es auf einem großen Desktop aussehen im Vergleich zu einem Tablet und einem Mobilgerät? Aus Entwicklungssicht wird der Code es den Bildern ermöglichen, sich nach einem Prozentwert zu skalieren, um sich an die Breite des Browserfensters anzupassen.
  • Navigation ist auf Mobilgeräten wichtig. Es gibt verschiedene, übliche Methoden, um große Menüs und Inhalt zusammenzubringen. Entweder mit einem bekannten Hamburger-Menü, einer einfachen Dropdown-Auswahl, einem Klappmenü oder du verwendest Tabs, durch die man wie auf YouTube horizontal scrollen kann.
responsive design menu examples
Designs von UI Garage
  • Gesten eröffnen Design neue Möglichkeiten. Die Menschen lieben es, mit ihren Händen zu lesen und mit dem Inhalt zu interagieren – es bestärkt den Nutzer. Auf Smartphones und Tablets können Nutzer beispielsweise zwei Finger verwenden, um zu zoomen, oder Bilder über den Bildschirm schieben. Interaktion hat große Auswirkungen auf das Design. Wenn du beispielsweise eine Bildergalerie hast, versuche ein normales Karussell zu vermeiden (kleine Punkte), damit die Leute sich jedes Bild ansehen. Denke an die Fingergröße eines Menschen und wie sich diese auf eine nützliche UI-Lösung übertragen lässt. Laut Apple beträgt die angenehme Mindestgröße antippbarer UI-Elemente 44 x 44px. Diese Grenze wird oftmals nicht eingehalten und die tatsächliche Grenze beträgt ungefähr 25px. Komplexe Desktop-Designs müssen in der Lage sein, sich der simplen, intuitiven UI eines kleinen Smartphone-Displays anzupassen. Behalte dies immer im Hinterkopf, wenn du für verschiedene Geräte designst. Das Design muss anpassungsfähig sein, damit es den Nutzern ein tolles Erlebnis auf allen Geräten bietet. Die enge Zusammenarbeit mit einem Entwickler, der versteht, was auf kleineren Bildschirmen möglich ist, wird Einfluss auf den Designprozess haben.
  • Designe mindestens 3 Versionen für verschiedene Browserbreiten. Wir nutzen weniger als 600px, 600px – 900px und 900px+. Zwischen diesen Breiten kann dein Inhalt frei skalieren oder du kannst bei 3 festen Layouts bleiben. 3 (oder mehr) feste Layouts und wenn nötig etwas Spielraum zu haben, ist in der Regel leichter zu designen und implementieren, als eine fließende Skalierung. Allerdings könnte eine fließende Skalierung bei einer Vielzahl von Geräten ein besseres Erlebnis bieten.

Tools und Hilfsmittel

  • Dein Webbrowser mag ein offensichtliches Tool sein und er ist in der Tat das wirkungsvollste Hilfsmittel, um eine Vorschau auf deine Designs im Web zu bekommen. Installiere ein paar verschiedene Browser, um eine Vielzahl an Feedbacks zu erhalten. Ändere dann die Größen der Browserfenster.
  • Dein Mobilgerät ist ein weiteres nahe liegendes Tool und wirklich nützlich, um eine Vorschau auf deine Designs zu erhalten, weil es dir genau zeigt, wie deine Website unter diesen bestimmten Bedingungen aussehen wird.
  • Fließende Gitternetze basieren darauf, das Layout einer Website nach einem Prozentsatz statt nach Pixeln zu designen. Beispielsweise könnte die Breite des Inhalts auf einem Desktop 930px betragen, aber du willst, dass das Design auf einem Mobilgerät 320px beträgt. Um dies in eine skalierbare Zahl umzuwandeln, rechnet man 320/930 = 34,4%. Wenn du dies auf die Größe des Mobilgeräts anwendest, werden die Elemente im Designlayout ihre Größe im Verhältnis zueinander ändern.
UI responsive interaction example
Design von Anton Aheichanka
  • Googles Resizer ist ein gutes Hilfsmittel, um eine schnelle Vorschau deiner Seite auf mehreren Geräten zu erhalten.
  • Medienabfragen (Media Queries) sind ein Code, der bei der Programmierung in deine Seite implementiert wird. Es ist wichtig, sie in deinem Code zu haben, weil sie die Bedingungen festlegen, nach denen sich das Design auf magische Weise an die Größe des Bildschirms anpasst. Zum Beispiel: „Wenn die Bildschirmgröße 480px oder weniger beträgt, wechsle auf das Design-Layout für Tablets“. Probiere es jetzt aus, indem du einfach dein Browserfenster kleiner machst (wenn du an einem Desktop sitzt). Du wirst sehen, wie sich die Größe des Inhalts automatisch an die verschiedenen Messpunkte des Designs anpasst.

Ich bin sicher, mittlerweile weißt du alles über responsives Design, oder?!

Keine Sorge, es ist eine universelle Designherausforderung für jeden in der Web-Branche. Das Beste, was du tun kannst, ist, über die aktuellen Erfolgsrezepte für UI/UX auf dem Laufenden zu bleiben, um deinen Inhalt herum zu designen, anpassungsfähige Bilder zu nutzen, an deine Navigation zu denken und daran, dass das Nutzererlebnis essenziell ist.

Du brauchst eine responsive Website für dein Unternehmen?
Unsere weltweite Community aus professionellen Grafikdesignern erledigt das für dich!