Responsive Design – Aus diesem Grund ist adaptives Webdesign heute gefragt

Responsive Design – Aus diesem Grund ist adaptives Webdesign heute gefragt

Der Ansatz zur Entwicklung einer Website, die auf verschiedenen Geräten optimal angezeigt wird, wird als Responsive Webdesign bezeichnet. Der Begriff Responsive Design ist so neu wie das mobile Web und wurde erst 2013 populär.

 

Ein kurzer Überblick über Responsive Web Design

Vor der Einführung des mobilen Webs war die Landschaft der internetfähigen Geräte sehr homogen: Es gab Desktop- oder Laptop-Computer mit sehr ähnlichen Ein- und Ausgabemedien. Beide Arten von Geräten verfügten über eine Tastatur, eine Maus oder ein Trackpad sowie einen Bildschirm mit einer Breite von 1.000 bis 2.000 Pixeln.

Damals musste kein übermäßiger Aufwand betrieben werden, um eine Website zu erstellen, die auf der großen Mehrheit der verwendeten Geräte richtig angezeigt wurde. Die einfachste Lösung bestand darin, die Seitenbreite auf dem kleinsten gemeinsamen Nenner zu halten. Die Seiten waren in der Regel 800 Pixel breit und zentriert oder linksbündig ausgerichtet, was ein beliebter Ansatz war. Das bot bei Bedarf etwas mehr Weißraum auf einem größeren Bildschirm, aber die Seiten waren auf allen Geräten gut lesbar.

Die Situation änderte sich mit der Einführung der mobilen Geräte, und es gab eine erhebliche Diversifizierung der Geräte. Es gibt mehrere Unterschiede zwischen mobilen und Tablet-Bildschirmen: Zum einen sind die Pixelmaße wichtig, aber mit der Einführung der Retina-Bildschirme rückte die physikalische Auflösung (“Pixel pro Zoll”, ppi) stärker in den Vordergrund. Außerdem werden diese Geräte mit dem Finger und nicht mit einer Maus bedient. Jetzt kommen auch noch große, hochauflösende Monitore hinzu, so dass eine moderne Website auf Bildschirmen mit einer Breite von 320 bis über 4.000 Pixeln funktionieren muss.

Eine responsive Website passt sich an den verfügbaren Platz auf dem Bildschirm an. Dies wird auch als “Bildschirmfläche” bezeichnet. Die Website sollte auf allen Geräten gut aussehen und die bestmögliche Nutzererfahrung (UX) bieten.

Responsive Webdesign ist eine Sammlung von Techniken und Ansätzen, die kombiniert werden, um eine vollständig responsive Website zu erstellen. Dazu gehören insbesondere:

  • HTML5-Elemente wie Bilder und Attribute wie srcset und Größen
  • CSS-Media-Queries
  • CSS-Untereinheiten
  • Die Nutzung der verschiedenen Assets einer Ressource
  • Die Mobile-First-Strategie

 

Warum sollte eine Website responsiv gestaltet sein?

Die Erstellung einer responsiven Website hat eine Reihe von Vorteilen. An erster Stelle steht das Nutzererlebnis. Theoretisch kann ein gutes Nutzererlebnis auch ohne responsives Design umgesetzt werden. Das erfordert jedoch die Erstellung einer separaten mobilen Website oder den Einsatz von JavaScript. Insgesamt ist dies oft viel komplexer als der CSS-basierte Responsive Web Design-Ansatz und erfordert mehr Aufwand für die Pflege der verschiedenen Website-Versionen.

 

Für das beste Design solltest du Responsive Webdesign verwenden

Das Design einer Website beeinflusst als einer der entscheidenden Faktoren, wie ein Websitebesucher die präsentierten Informationen wahrnimmt. Ein gutes Design spiegelt die Identität des Unternehmens wider, das hinter der Website steht, und trägt dazu bei, dass sich der Besucher mit der Marke identifiziert. Der Website-Besucher sollte sich wohlfühlen und eine positive Erfahrung machen. Die folgenden zwei Beispiele zeigen, wie Responsive Webdesign zum bestmöglichen Nutzererlebnis beiträgt:

Angenommen, die Überschrift auf einem mobilen Gerät nimmt den gesamten Bildschirm ein. In der gleichen Schriftgröße ist die Überschrift auf der Desktop-Version jedoch kaum sichtbar. Um die Aufmerksamkeit des Besuchers auf dem Desktop zu erregen, sollte die Überschrift größer dargestellt werden.

Stell dir einen Blog vor, in dem rechts neben dem Ratgeber eine Seitenleiste angezeigt wird. Die Seitenleiste enthält Miniatur-Links zu anderen Ratgebern. Bei der Desktop-Version hilft die Seitenleiste, die Breite des Artikels zu begrenzen, was die Lesbarkeit verbessert. Auf einem mobilen Gerät würde die Seitenleiste jedoch fast die Hälfte des Bildschirms einnehmen. Für ein optimales Nutzererlebnis sollte das Layout auf mobilen Geräten so umgestellt werden, dass der Inhalt der Seitenleiste unterhalb des Ratgebers erscheint Responsive Webdesign (UX).

Theoretisch sieht eine nicht-responsive Website auf dem kleinen Bildschirm eines Mobilgeräts genauso aus wie auf einem Desktop, nur viel kleiner. Dadurch ist der Nutzer gezwungen, in bestimmte Seitenbereiche zu zoomen. Deshalb ist es besser, eine optimierte Version anzubieten.

Auf dem Desktop wird mit der Maus auf eine Schaltfläche auf einer Website geklickt. Ein mobiles Gerät hingegen wird mit dem Finger bedient. Deshalb muss die Schaltfläche in der mobilen Version größer sein und weiter von anderen Elementen entfernt platziert werden.

Betrachte ein Formular auf einer Seite. Normalerweise wird ihm per CSS ein Innenraum (Padding) zugewiesen, damit der darin enthaltene Text gut lesbar ist und nicht die Ränder des Formulars berührt. Auf großen Bildschirmen ist ein innerer Abstand von 20 Pixeln rechts und links normal und sieht gut aus. Auf einem mobilen Gerät mit einer Bildschirmbreite von nur 320 Pixeln gehen jedoch 40 der 320 Pixel verloren, was ein Achtel der Gesamtbreite ausmacht. Wenn das Formular auch noch einen Außenabstand (Rand) hat, sagen wir weitere 20 Pixel pro Seite, gehen bereits 25 Prozent des verfügbaren Platzes auf dem mobilen Gerät verloren. Um dies zu vermeiden, sollte der Abstand auf dem mobilen Gerät verringert werden.

 

Was sind die Risiken, wenn eine Website nicht responsive ist?

Ein großer Prozentsatz der Nutzerinnen und Nutzer greift heute über mobile Geräte auf Webinhalte zu. Wenn eine Website nicht vollständig responsiv gestaltet ist, hat das ernsthafte Konsequenzen. Das sind vor allem:

  • Schlechte Konversionsraten und hohe Absprungraten aufgrund des schlechten Designs und der Störung des Nutzererlebnisses
  • Schlechtes Suchmaschinenranking, weil Google z. B. erkennt, wenn Elemente zu nahe beieinander liegen.
  • Schlechte Leistung durch nicht optimiertes Laden von Ressourcen, insbesondere auf mobilen Geräten