Tipps für responsives Design

Die Usability (Benutzerfreundlichkeit) einer Website ist stark beeinträchtigt, wenn sie nicht für das verwendete Endgerät optimiert wurde. Dies geschieht vor allem bei mobilen Endgeräten: Auf einem kleinen Display wirkt eine Webseite sofort unübersichtlich und verliert dabei auch ihre Funktionalität. In diesem Fall hilft nur das Responsive Design: Bei dieser Art des Webdesigns passen sich sämtliche Inhaltselemente der Bildschirmauflösung des Endgeräts an und sorgen somit dafür, dass User ein optimales Browsing-Erlebnis erfahren – egal, welches Endgerät sie gerade nutzen.¹

Was ist responsives Design?

In den letzten 10 Jahren haben sich unsere Internetgewohnheiten dank Smartphones und Tablets grundlegend geändert. Konnte man früher nur zu Hause vor dem Bildschirm surfen, sind wir heutzutage immer und überall vernetzt. Dies hat auch zur Folge, dass immer mehr Menschen ihr Smartphone oder Tablet dazu nutzen, Onlinekurse abzurufen. Seit 2010 ist die Anzahl der Aufrufe, die von mobilen Endgeräten ausgehen, rasch angestiegen. Dabei gibt es auch User, die nach wie vor lieber am Computer arbeiten, und solche, die munter zwischen dem Computer und einem mobilen Endgerät hin und her wechseln. Deshalb sollte Ihre Webseite auf allen Endgeräten zugänglich sein und dabei auch noch einwandfrei funktionieren. In der Realität sieht dies leider oft anders aus: Elemente werden nicht richtig dargestellt, der Text ist zu lang, die Bilder zu groß. Es gibt jedoch einen Ausweg aus der Situation – und dieser heißt Responsive Design oder responsives Webdesign. Der aus dem Englischen stammende Fachbegriff lässt sich als “reagierendes Design” übersetzen. Tatsächlich “reagiert” das Design auf die Eigenschaften des Endgeräts und passt sich ihnen an. Inzwischen gehen viele Webdesigner sogar davon aus, dass User vor allem mobile Endgeräte nutzen werden, um eine bestimmte Webseite abzurufen. Sie legen die wichtigsten Informationen zuerst einmal für das Smartphone fest, um das Konzept anschließend auszubauen.

Um die optimale Usability einer Webseite zu gewährleisten, musste man bisher drei Versionen erstellen: für iPhone, iPad und Desktop-Screen. Dabei galt es auch zu beachten, dass viele User ihr Tablet oder Smartphone nicht unbedingt hochkant, sondern auch im Querformat nutzen, was wiederum neue Anforderungen an das Design stellte. Dass derart viele Versionen einer einzigen Webseite mit erheblichen Wartungskosten verbunden sind, braucht nicht zusätzlich erwähnt zu werden. Damit ist jedoch dank des responsiven Webdesigns endgültig Schluss. Sämtliche Elemente wie Bilder, Tabellen, Listen und Logos passen sich automatisch an. Seit “Mobile Friendliness” 2015 von Google zum Rankingfaktor erklärt wurde, ist responsives Design eine absolutes Muss für alle Webdesigner. Es sei jedoch gesagt, dass das Responsive Design einem Webmaster im Anfangsstadium so einiges abverlangen kann. Eine einwandfreie Planung ist notwendig, denn auch hier darf selbstverständlich nichts dem Zufall überlassen werden. Haben Sie dann aber Ihre Webseite fertiggestellt, können Sie endlich aufatmen: Im Gegensatz zum herkömmlichen Webdesign mit mehreren Versionen einer einzigen Webseite bedarf das Responsive Design keiner besonderen Wartungsarbeiten.

Wie sich responsives Webdesign in der Umsetzung auf verschiedene Endgeräte auswirkt

Da sich das Responsive Design von selbst dem jeweiligen Endgerät anpasst, kann von umfassender Kontrolle, wie sie bei herkömmlichen Webseiten besteht, nicht die Rede sein. Statt Pixelwerte einzusetzen, werden prozentuale Werte eingesetzt, es gibt keine festen Schrift- oder Bildgrößen. Das Responsive Design einer Webseite erfolgt mit CSS3 und HTML5. In der Stylesheet-Sprache CSS3 kommen sogenannte Media Queries zum Zuge, die verschiedene Angaben enthalten. Sie fragen die Eigenschaften des Endgeräts direkt ab und stellen der Webseite die passende Version zur Verfügung. Zu den Endgeräteeigenschaften gehören die Bildschirmauflösung, die Orientierung sowie die Breite und Höhe des Displays. Je nach Endgerät müssen einige Abstriche gemacht werden: Da die Displaygröße von Smartphones und Tablets reduziert sind, müssen bestimmte Elemente für diese Endgeräte anders gestaltet werden. Ein Beispiel dafür ist die Orientierung, denn die Webseite muss sowohl im Quer- als auch im Hochformat eine optimale Usability aufweisen. Dabei bleibt der HTML-Code unverändert, es wird lediglich ein anderes CSS3-Stylesheet eingesetzt. Ein wichtiger Aspekt des Designs sind die Farben. Beim responsiven Webdesign spielen starke Kontraste und kräftige Farben eine wichtige Rolle. Das erklärt sich in erster Linie dadurch, dass die Helligkeit eines Smartphone- oder Tabletdisplays durch äußere Einflüsse verändert werden kann.² Dabei darf die Webseite ihre Usability jedoch nicht verlieren.

Eine überaus wichtige Komponente beim Erstellen einer Webseite mit responsivem Webdesign ist das Testen. Dazu werden oft Simulationen genutzt, doch ist von diesen generell abzuraten, da es bei der Darstellung auf realen Devices zu erheblichen Abweichungen kommen kann. Bei Simulationen spielt nur die Bildschirmgröße eine Rolle, Faktoren wie dem Betriebssystem oder der Browser-Version wird keine Beachtung geschenkt. Deshalb sollten Sie Ihren Onlinekurs auf echten Devices testen. Natürlich ist es unmöglich, einen Test für jedes existierende Gerät durchzuführen. Wählen Sie sich deshalb aus jeder Produktgruppe ein typisches Gerät aus, um Ihre Webseite auf deren Usability hin zu testen.

Stolperfallen und Missverständnisse beim responsiven Webdesign

Der wichtigste Punkt des responsiven Webdesigns ist seine Flexibilität. Es geht also keineswegs darum, mehrere Versionen Ihres Onlinekurses zu erstellen, sondern eine winzige Webseite aufzubauen, die auf verschiedenen Endgeräten genutzt werden kann. Bedenken Sie, dass mobile Nutzer Ihre Webseite in der Regel dann aufrufen, wenn sie unterwegs sind und nach bestimmten Informationen suchen. Deshalb sollten Sie bei der Erstellung Ihres Onlinekurses auf überflüssige Hintergrundbilder und andere Designelemente verzichten. Überlegen Sie, was für einen Mobile User am wichtigsten ist, bevor Sie sich an die Arbeit machen.

Responsive Design bietet Ihnen die Möglichkeit, Ihre Webseite für sämtliche Geräte zugänglich zu machen. Trotz anfänglicher Hürden bietet es zahlreiche Vorteile, zu denen in erster Linie ein minimaler Pflegeaufwand gehört. Responsive Design wird sogar von Google empfohlen und hat somit einen entscheidenden Einfluss auf das Ranking Ihrer Webseite.