Responsive Webdesign

Responsive Webdesign
()

Was ist ein responsive Webdesign?

Responsives Webdesign ist eine moderne Technik, die es ermöglicht, Websites so zu gestalten, dass sie sich flexibel an die visuellen und haptischen Eigenschaften deines Endgeräts und dessen Bildschirmgröße anpassen.

Im Grunde genommen bedeutet responsives Webdesign, dass eine Website auf verschiedene Geräte reagiert und sich automatisch optimiert, um eine bestmögliche Benutzererfahrung zu bieten.

Der Sinn und Zweck des responsiven Webdesigns

Die Nutzung des Internets hat sich seit der Einführung von Smartphones und Tablets stark verändert. Heutzutage werden über die Hälfte aller Suchanfragen bei Google über mobile Endgeräte durchgeführt. Wenn Nutzer auf eine nicht für mobile Geräte optimierte Website gelangen, verlassen sie diese oft schon nach wenigen Sekunden wieder. Der Grund dafür ist, dass die Bedienung umständlich ist und ähnliche Anbieter nur wenige Klicks entfernt sind. Viele Website Betreiber unterschätzen nach wie vor, wie viele potenzielle Kunden und somit Geschäftsmögichkeiten sie an dieser Stelle verlieren.
Mit der zunehmenden Verbreitung von mobilen Geräten wie Smartphones und Tablets steigt auch der Anspruch der Nutzer an die Zugänglichkeit von Inhalten und die intuitive Navigation auf Websites. Nutzer erwarten, dass sie jede Website von überall und von jedem Gerät aus aufrufen und einfach bedienen können. Nur wenn Website-Betreiber diesen Anforderungen gerecht werden können, profitieren sie weiterhin von zufriedenen Kunden und hohen Konversionsraten. Das erfordert jedoch ein Umdenken in der Gestaltung von Websites. Es reicht nicht mehr aus, das Layout für eine einzige Bildschirmgröße anzupassen. Stattdessen muss das Webdesign flexibel auf unterschiedliche Bildschirmgrößen und deren Verhalten reagieren können:

  • Smartphones: 320px bis 480px
  • Tablets: 768px bis 1024px
  • Desktop-PCs: 1024px+

Unterschiede von Smartphone Bildschirmen zu Desktop Bildschirmen:

  • Smartphone Bildschirme sind deutlich kleiner, was weniger Platz für die Darstellung von Inhalten bedeutet.
  • Smartphones können sowohl im Hoch- als auch im Querformat genutzt werden (Portrait / Landscape).
  • Oft weisen Smartphone Bildschirme eine höhere Pixeldichte auf, wie zum Beispiel bei Retina Displays.
  • Die Bedienung von Smartphones erfolgt über Touch, im Gegensatz zur Maussteuerung bei Desktops.
  • Bei Smartphones kann das verfügbare Datenvolumen begrenzt sein, weshalb die Ladezeiten optimiert werden müssen.

Starres Grid Layout vs. flexibles Grid Layout

Das Konzept des Grid Layouts:

Ein Grid Layout ist ein grundlegendes Gestaltungselement für Websites. Es besteht aus einem unsichtbaren Rastersystem, das zur Ausrichtung der verschiedenen Elemente einer Website verwendet wird. Durch die Verwendung eines solchen Layouts wirkt das Webdesign in der Regel strukturierter und ausgewogener.

Mehrsäulige Inhalte sind ein häufiges Beispiel für die Anwendung eines Grid Layouts auf einer Website.

Das starre Grid Layout

Vor einigen Jahren wurden Websites in der Regel für bestimmte Bildschirmgrößen entwickelt, ohne die Vielfalt heutiger Geräte zu berücksichtigen. Wenn man eine solche veraltete Webseite auf einem Smartphone betrachtet, fällt sofort das starre Grid Layout auf, das für größere Bildschirme optimiert wurde. Auf dem kleinen Smartphone Bildschirm wird das starre Layout über die Bildschirmränder hinaus vergrößert und erschwert die Erfassung aller Inhalte. Das Scrollen und Zoomen wird notwendig, um bestimmte Bereiche lesen zu können. Das Menü der Website ist auf einem kleinen Smartphone Bildschirm ebenfalls schwierig zu bedienen, insbesondere für Personen mit größeren Fingern. Die einfache Recherche von Öffnungszeiten eines Geschäfts kann somit zu einer Geduldsprobe werden. Nutzer möchten nicht, dass sie sich an eine Website anpassen müssen. Stattdessen erwarten sie, dass die Website flexibel auf ihre Bedürfnisse reagiert und nicht umgekehrt.

Nachteile eines starren Layouts im Überblick:

  • Eine optimale Darstellung aller Inhalte erfordert das Zoomen oder Verschieben des Bildschirms durch die Nutzer.
  • Schaltflächen können aufgrund ihrer Größe und Platzierung auf einem kleinen Bildschirm schwer zu treffen sein, insbesondere für Nutzer mit dicken oder großen Fingern.
  • Die Schriftgröße und Bildgröße sind möglicherweise nicht optimal angepasst, was zu einer schlechten Lesbarkeit führt.
  • Elemente, die angeklickt werden müssen, können zu nahe beieinander liegen, was zu Fehlklicks führen kann.
  • Die umständliche Bedienung beeinträchtigt die Benutzererfahrung und erhöht die Wahrscheinlichkeit, dass Nutzer die Seite vorzeitig verlassen.

Flexibles Grid Layout

Um eine konsistente Benutzerfreundlichkeit auch auf kleinen Bildschirmen sicherzustellen, erfordert es ein Umdenken bei der Gestaltung von Websites, insbesondere im Hinblick auf das Gestaltungsraster. Anstatt das Layout starr über alle Bildschirmgrößen hinweg beizubehalten, muss es sich flexibel an die jeweilige Bildschirmgröße anpassen.

Ein flexibles Layout vermeidet weitgehend feste Pixelangaben und setzt stattdessen verstärkt auf relative Werte wie Prozentangaben. Wenn beispielsweise die Breite eines Bildes auf genau 1920px festgelegt wird, mag es auf einem großen Bildschirm optimal aussehen. Jedoch würde es auf einem kleinen Bildschirm mit einer Gesamtbreite von nur 480px um 1440px über das Anzeigefeld hinausragen. Durch den Einsatz von Prozentangaben im responsiven Webdesign kann dieses Problem vermieden werden, da sich das Bild relativ zur Bildschirmgröße oder zur verfügbaren Fläche ausrichtet.

Auch die Darstellung von Spalten muss sich flexibel an die Bildschirmgröße anpassen können. Auf einem großen Desktop PC können beispielsweise vier nebeneinander angeordnete Spalten gut aussehen. Auf einem kleineren Bildschirm hingegen würden die Spalten extrem schmal werden, wodurch vor allem lange Wörter schnell abgeschnitten oder überlappend angezeigt werden.

Um dieses Problem zu lösen, sollten sogenannte Breakpoints definiert werden. Bei kleinen Bildschirmen werden die Spalten dann nicht mehr nebeneinander, sondern untereinander dargestellt. Auf diese Weise sind die Inhalte innerhalb der Spalten für den Benutzer deutlich einfacher erfassbar.

Hier sind weitere Gestaltungsregeln, um aus einem starren Layout ein flexibles Layout zu machen:

  • Das Hauptmenü sollte auf kleinen Bildschirmen als sogenanntes Hamburgermenü dargestellt werden.
  • Im responsive Webdesign sollten Schriftgrößen, Zeilenhöhen usw. auf der Basis von Prozentangaben (%) oder anderen relativen Werten (z. B. em) definiert werden. So entspricht eine Schriftgröße von 16 Pixeln 100% oder 1em.
  • Bildgrößen sollten ebenfalls mit relativen Werten definiert werden.
  • Mehrspaltige Inhalte sollten auf kleinen Bildschirmen untereinander statt nebeneinander dargestellt werden.
responsive webdesign grid

Wie funktioniert die technische Umsetzung eines responsiven Webdesign?

Beim Laden einer Website werden zuerst unterschiedliche Daten mittels Media Queries abgerufen, wie z.B.:

  • Breite und Höhe des Bildschirms (Viewport)
  • Breite und Höhe des Geräts
  • Geräte-Orientierung (Landscape / Portrait)
  • Auflösung

Je nach Ergebnis der Abfrage werden die zuvor definierten Gestaltungsregeln mittels Media Queries abgerufen und angewendet. Dabei werden auch sogenannte Breakpoints innerhalb dieser Regeln festgelegt. Sobald die Geräteauflösung einen solchen Breakpoint überschreitet, erfolgt eine dynamische Anpassung des Website Layouts.

Einfaches Beispiel:

Ein simples Beispiel ist die Anpassung der Schriftgröße basierend auf der Bildschirmgröße. Wenn wir die Schriftgröße auf dem Smartphone etwas kleiner (18px) und auf dem Tablet (20px) haben möchten, können wir dies mithilfe von Media Queries problemlos erreichen. Media Queries sind Teil der CSS-Stylesprache und werden in einer Datei mit der Endung “.css” (z.B. style.css) definiert. Normalerweise werden Media Queries am Ende dieser Datei platziert, aber sie können auch in einer separaten CSS-Datei ausgelagert werden, die dann im Hauptdokument eingebunden werden muss.

Hier ist ein Beispiel für den entsprechenden Code im Responsive Webdesign in der Praxis:

/* „Normale“ Style-Angaben ohne Media Queries, z.B. für die normale Desktop-Version */
p {
font-size: 22px;
}
/* Anpassung für Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
p {
font-size: 20px;
}
}
/* Anpassung für Smartphones */
@media screen and (min-width: 320px) and (max-width: 480px) {
p {
font-size: 18px;
}
}

Die Vorteile eines responsiven Webdesigns

Beim Website erstellen lassen ist es wichtig zu beachten, dass ein responsives Webdesign nicht nur eine nette Zusatzfunktion ist, sondern vielmehr eine unverzichtbare Notwendigkeit. Wenn das Ziel darin besteht, über die Website neue Kunden zu gewinnen, muss eine benutzerfreundliche Erfahrung auf allen Endgeräten gewährleistet werden.

  • Die zunehmende Nutzung des Internets über mobile Geräte: In Deutschland gibt es rund 62,6 Millionen Smartphone Nutzer. 2021 besaßen etwa 94,2 % der Personen im Alter von 14 bis 19 Jahren ein Smartphone oder Handy im Haushalt. In der Altersgruppe der 20- bis 29-Jährigen lag der Anteil bei 95,5 %, und bei den 30- bis 39-Jährigen betrug er 96 %.
  • Bedeutung als Rankingfaktor bei Google seit April 2014: Nicht mobiloptimierte Websites werden in den Suchergebnissen immer weiter nach hinten gereiht. Ein mobiloptimiertes Layout kann daher einen deutlichen Vorsprung bei Google bedeuten.
  • Ganzheitliche Verbesserung der Usability: Unabhängig vom verwendeten Endgerät führt responsive Webdesign zu einer besseren Nutzererfahrung und deutlich reduzierten Absprungraten. Dadurch steigt die Conversion Rate und damit der Unternehmensumsatz.
  • Zukunftsfähigkeit: Durch responsive Webdesign bleiben Sie unabhängig von den neuen Bildschirmgrößen, die den Markt erobern.
  • Automatische Anpassung von Inhalten: Nach der Veröffentlichung der Website werden veränderte Inhalte automatisch an alle Bildschirmgrößen angepasst, ohne dass sie einzeln bearbeitet werden müssen.

Was ist der Ansatz “Mobile First” und ist es lohnenswert?

“Mobile First” bezieht sich auf einen Ansatz, bei dem eine Website durch responsives Webdesign zuerst für den mobilen Zugriff konzipiert und optimiert wird. Anschließend wird die Website entsprechend für größere Displays angepasst.
Dieses Konzept basiert auf der Annahme, dass es einfacher ist, ein mobiles Layout auf einen Desktop PC zu übertragen als umgekehrt. Das “Mobile First” Prinzip fördert auch eine stärkere Berücksichtigung von Inhalt und Struktur der Seite. Unternehmen erkennen beispielsweise, dass bestimmte Informationen überflüssig sind und weggelassen werden können. “Mobile First” hilft also dabei, wichtige Informationen von unwichtigen zu trennen und die Website nicht mit überflüssigen Informationen zu überladen. Die Idee, dass man mit der Konzeption einer mobilen Website eine perfekte Desktop Version quasi “gratis” erhält, hat in den letzten Jahren zu einem enormen Hype um den “Mobile First” Ansatz geführt.
Obwohl viele Webdesigner von diesem Prinzip überzeugt sind, sind wir der Meinung, dass “Mobile First” nicht für jeden Kunden und jedes Projekt angewendet werden muss oder sollte. Es kann sinnvoll sein, die mobile Version einer Seite auf die wichtigsten Elemente und Informationen zu reduzieren. Eine direkte Übertragung dieser Reduktion auf die Desktop-Version ist jedoch nicht unbedingt die optimale Lösung. Während die Benutzererfahrung auf mobilen Endgeräten häufig verbessert wird, kann die Nutzererfahrung auf Desktop-PCs darunter leiden.
Bei jedem Projekt sollte individuell entschieden werden, ob “Mobile First” der richtige Ansatz sein kann und welche konkreten Vorteile damit verbunden sind. Es ist sinnvoller, die verschiedenen Endgeräte und Nutzungssituationen einzeln und unabhängig voneinander zu betrachten. Es ist also nicht falsch, zuerst die Desktop-Version zu entwickeln und dann die mobile Version durch das Reduzieren von weniger relevanten Informationen anzupassen. Ein Benutzer, der gemütlich zu Hause vor dem PC sitzt, hat möglicherweise mehr Zeit, Ihre Inhalte zu lesen, als jemand, der unterwegs nur schnell die wichtigsten Informationen nachschlagen möchte.

Wie kannst du überprüfen, ob dein Webdesign responsive ist?

Es gibt verschiedene kostenlose Online Tools, mit denen du testen kannst, ob deine Website responsive ist. Ein Tool, das uns besonders gut gefallen hat, ist z.B. Am I responsive
Es ist jedoch wichtig zu beachten, dass Online Tools nicht immer zuverlässig sind. Verschiedene Plugins, insbesondere bei WordPress, definieren ihre responsiven Eigenschaften nicht unbedingt anhand der Bildschirmgröße, sondern am verwendeten Endgerät selbst. Die Eigenschaften werden also nur übernommen, wenn dein Gerät tatsächlich ein Smartphone ist.
Da Online Tools in der Regel von einem Desktop PC aus aufgerufen werden, greifen die speziell für Smartphones definierten Eigenschaften hier nicht.
Daher empfehle ich dir, Websites immer direkt von einem Smartphone oder Tablet aus zu überprüfen, um wirklich sicherzustellen, dass sie vollständig responsive sind. Auf diese Weise erhältst du eine zuverlässige Bewertung zu deiner responsiven Gestaltung.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung / 5. Anzahl Bewertungen:

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Es tut uns leid, dass der Beitrag für dich nicht hilfreich war!

Lasse uns diesen Beitrag verbessern!

Wie können wir diesen Beitrag verbessern?

Enquire now

Give us a call or fill in the form below and we will contact you. We endeavor to answer all inquiries within 24 hours on business days.