Responsive Design

Responsive Design bezeichnet Webdesign, das auf allen Endgeräten – sei es Smartphone, Tablet oder Desktop – in bester Qualität dargestellt wird. Das Layout und Design der Webseite passt sich dabei an die verschiedenen Endgeräte und Display-Größen an – eine Technik, die auch “form follows function” genannt wird. Auf diese Weise werden Verzerrungen und Bild- sowie Textüberlagerungen vermieden, wodurch die Webseite und somit auch das Unternehmen ein professionelles Image waren.

Was sind die Vorteile von Responsive Design?

Viele Webseitenbetreiber und große Firmen setzen darauf, drei Designs anzufertigen, die an die üblichen Pixelgrößen von Tablets, Smartphones und Desktops angepasst sind. Doch kommen diese drei Layout- und Designversionen oft nicht den Ansprüchen der Nutzer nach. Ein herkömmliches iPhone-Display hat beispielsweise eine Pixel-Breite ab 320, doch sieht dies bei anderen Smartphone-Herstellern wiederum anders aus. In den meisten Fällen kommen Designs, die für eine spezifische Pixel-Breite ausgelegt, jedoch nicht responsive sind, nicht einmal mit dem Wechsel zum Querformat zurecht, was besonders bei Tablet- und Smartphone-Usern Anklang findet. Es besteht natürlich die Möglichkeit, für jede Darstellungsform ein individuelles Design für eine separate, mobile Website zu erstellen. Jedoch bedeutet dies, dass jede Webseite einzeln gepflegt und gewartet werden muss, was zeit- und kostenintensiv ist. 

Um dieses Dilemma zu umgehen, setzen wir Responsive Design ein. Bei dieser Art des Webdesigns ist jedes Element flexibel – die Schriftgröße, die Bildgrößen, das Layout und auch die Menüdarstellung passt sich an. Wie das Layout auf dem Endgerät wirkt und welche Größe die Schrift sowie Bilddarstellungen haben, geschieht jedoch nicht zufällig, sondern wird im Voraus genauestens geplant und konzipiert. So stellen wir sicher, dass eine gleichbleibende Benutzerfreundlichkeit (User Experience) vorliegt und die Inhalte jederzeit auf jedem Endgerät professionell dargestellt werden. Wir reagieren damit auf den Trend unter Usern, mehr und mehr auf mobile Geräte umzusteigen und den festen Desktop damit zu ersetzen. Um den Webseiten-Nutzern verschiedenster Branchen ein positives Nutzererlebnis, was unwillkürlich mit der Wahrnehmung des Unternehmens verknüpft wird, zu liefern, ist der Einsatz von Responsive Design unverzichtbar. 

Wie funktioniert Responsive Design?

Für ein flexibles Webdesign, das sich responsive an die Gegebenheiten des Endgerätes anpasst, verwenden wir HTML und CSS3 Media-Queries. Die Queries sorgen dafür, dass sich das Design in Abhängigkeit zum Ausgabemedium anpasst, was automatisch erfolgt und nicht bei jedem Gerät einzeln berücksichtigt werden muss. Diese Automatisierung findet durch eine Analyse über die Media Queries (Medienabfragen) statt, welche ermittelt, welcher Medientyp vorliegt und welche Medienmerkmale der Browser vorfindet. Wenn das Ausgabemedium alle Kriterien der Medienabfrage erfüllt, also beispielsweise ein Bildschirm mit bestimmten Abmessungen und Farbfähigkeiten ist, wird die CSS-Ressource eingebunden. Die unterschiedlichen Medienmerkmale, die für die Übertragung der Inhalte in die CSS-Ressource nötig sind, sind in der HTML, der textlichen Seitenstruktur, enthalten. So wird beispielsweise der Viewport (die Breite des Anzeigenbereichs) oder die device-width, die Breite des Bildschirms in Pixel, aber auch das Seiten-Verhältnis mit dem Code aspect-ratio angegeben. Auf der Grundlage dieser vermittelten Informationen wird die Webseite an die Voraussetzungen des Endgerätes angepasst und dargestellt.

Folgende Eigenschaften der Webseite werden durch die HTML und CSS3 Media-Queries beeinflusst:

  • Breite und Höhe des Browser-Fensters
  • Bildschirmauflösung
  • Orientierung (Quer- oder Hochformat)
  • Menü-Anzeige 
  • Anordnung von Bildern
  • Größe von Boxen
  • Eingabe-Möglichkeiten wie Touchscreen, Tastatur oder Sprachsteuerung

Worauf sollte bei Responsive Design geachtet werden?

Die meisten Webseiten bestehen bereits in irgendeiner Form, weshalb das Layout an dieser Stelle mittels der Media Queries an die kleineren Viewports angepasst werden muss. Entsteht jedoch eine neue Webseite, wird nach der Arbeitsweise “Mobile first” vorgegangen, bei welcher die simplere, mobile Version am Anfang des Prozesses steht. Da der Inhalt in jedem Fall priorisiert wird, steht die Usability im Vordergrund. Deshalb werden die Inhalte im Layout für kleinere Bildschirme oft untereinander dargestellt. Bei einem großen Viewport, werden sie hingegen nebeneinander angeordnet. Aus diesem Grund ist es bei der Entwicklung einer neuen Webseite ratsam, erst die mobile Version zu erstellen. Es werden also erst die allgemeingültigen Definitionen und Informationen für kleine Bildschirme ins CSS geschrieben und danach wird das CSS für große Bildschirme in einer Media Queries verfasst. So wird umgangen, zwei komplett unterschiedliche Stylesheets zu entwickeln oder das gesamte Design für die kleinen Bildschirme wieder rückgängig zu machen. Aus praktischen und zeitsparenden Gründen liegt das Layout für mobile Geräte also vor den Anpassungen für den Desktop in der CSS-Datei.

Weiterhin wird nach der Maxime “User First” vorgegangen, bei der analysiert wird, welche Inhalte für den mobilen Nutzer von Relevanz sind. Dies ermöglicht einen besseren Content-Plan und somit auch einen größeren Mehrwert für den User. Smartphone-Nutzer haben beispielsweise die Anforderungen, Informationen schnell und direkt zu erhalten. Lange Texte und ausführliche Hintergrundbilder sowie -elemente sind für sie aus diesem Grund irrelevant. Feste Layout-Grids sind ebenfalls nicht Teil eines Responsive Webdesigns. Anstatt fester Pixelwerte werden für Seiten und Elemente prozentuale Pixelwerte verwendet. Weiterhin sollten Headlines, Überschriften und Fließtexte so angepasst werden, dass sie auf mobilen Devices gut lesbar sind. Die Lesbarkeit der Schriftarten wird aus diesem Grund vor dem Launch der Seite direkt auf dem Gerät überprüft. Bei der Schriftgröße wird außerdem mit prozentualen Werten gearbeitet oder das JavaScript-Plugin FitText verwendet. Flexibilität wird durch das JavaScript Plugin der Filament Group auch bei der Anzeige von Bildern auf mobilen Endgeräten geboten. Das Plugin passt die gewünschte Grafik an die Bildschirmauflösung an und lädt unter diesen Voraussetzungen die Grafik. Dies reduziert die Ladezeit und steigert die User Experience.

Responsive Design ist der Schlüssel zu einer ausgezeichneten User Experience, die die Nutzer der Webseite direkt abfängt und die Suche nach den gewünschten Informationen perfekt erfüllt. Auch Google achtet beim Ranking der unterschiedlichen Anbieter und Webseiten darauf, ob eine Website responsive ist und sich an die Gegebenheiten der Endgeräte anpasst. Für den Erfolg mit und durch die Webseite ist es demnach umso wichtiger bei der Optimierung und Entwicklung der Internetpräsenz ein besonderes Augenmerk auf Responsive Design zu setzen.