Responsive Webdesign – Erklärung und Vorteile

Das ist Responsive Webdesign

Bei Responsive Webdesign handelt es sich um eine Layout-Struktur, welche sich an die Vielfalt der Eigenschaften von Endgeräten anpasst. Zu diesen Eigenschaften zählen voranging die Auflösung, das Format sowie die Eingabemöglichkeiten. Ermöglicht wird dies durch HTML5 , CSS3 (insbesondere Media Queries) und Javascript.

Beispiel

Oben sehen Sie ein Bild, bei dem die Anzeige einer Webseite auf unterschiedlichen Displays anschaulich dargestellt wird. Ein großer Bildschirm (oben) und ein Laptop (links) zeigen die normale Web-Ansicht (3 Spalten), rechts eine schmalere Ansicht (2 Spalten) für Tablets und unten sind zwei Smartphones zu sehen. Dort wird der Inhalt aufgrund des schmalen Hochformats untereinander (1 Spalte) angeordnet. Die Aufteilung in Spalten ist hier nur als Beispiel zu sehen. Alle Inhalte sind auf jedem Gerät sichtbar und werden lediglich anders angeordnet.

Problematik

Sicherlich sind jedem verschiedene 4:3, 16:9 oder 16:10 Formate von herkömmlichen Bildschirmen bekannt. Dabei handelt es sich ausschließlich um Querformate. Durch den rasant angestiegenen Anteil von mobilen Endgeräten, kam in den letzten Jahren jedoch auch eine hohe Anzahl unterschiedlichster Formate hinzu. So hat ein Smartphone beispielsweise meist ein sehr kleines Display und wird im Hochformat per Fingergestiken bedient. So muss eine Webseite heutzutage nicht nur auf unterschiedlichen Display-Größen, sondern auch Formaten (Hoch- und Querformat bzw. Portrait- und Landscape-Format) einwandfrei funktionieren und eine einfache Lesbarkeit sowie Bedienbarkeit bieten.

Dies hat natürlich auch Auswirkung auf die Aufteilung einer Webseite. Ist diese normalerweise in viele Spalten unterteilt, so müssen diese Inhalte auf relativ schmalen Bildschirmen (z.B. von Smartphones) untereinander angeordnet werden. Auch müssen Schriftgrößen, Abstände, Eingabemöglichkeiten und viele weitere Eigenschaften angepasst werden. Im Idealfall deckt das Layout einer responsiven Webseite alle möglichen Display-Varianten ab.

Bisher fertigte man für mobile Endgeräte spezielle mobile Versionen der Webseite an. Diese waren meist einspaltig und der Inhalt somit untereinander gegliedert. Somit gab es mindestens zwei verschiedene Ansichten der Webseite und auch zwei Systeme, die gewartet werden mussten. Bei der Fülle an Auflösungen reicht das jedoch bei weitem nicht aus. Ein responsive Webdesign stellt ein Grundsystem dar, welches sich auf alle Anzeigevarianten automatisch einstellt.

Anforderungen

Folgend die wichtigsten Merkmale auf die eine responisve Webseite bei einem mobilen Endgerät reagieren muss.

• Unterstützung von HTML5 und CSS3
• Maße des Displays
• Auflösung
• Format (Hoch- oder bzw. Querformat)
• Eingabemöglichkeiten wie Tastatur, Maus, Finger und Sprache

Vorteile

Ein großer Vorteil von Responsive Webdesign ist, dass alle Inhalte einer Seite verschiedensten Endgeräten bequem zugänglich gemacht werden können ohne weitere Systeme (z.B. extra mobile Webseite) aufsetzen zu müssen. Zudem müssen Inhalte nicht unnötig entfernt, sondern nur umstrukturiert werden.

Vorteile im Überblick:

• Eine Webseite deckt möglichst alle internetfähige Endgeräte ab
• Weniger Absprünge von Besuchern
• Kein zusätzlicher Aufwand durch Erstellung und Wartung separater Seiten (z.B. mobile Webseite)
• Perfekte Grundlage für Barrierefreies Webdesign und eine gute Corporate Identity

Nachfrage

Im Durchschnitt findet mittlerweile jeder zweite Webseitenbesuch über ein mobiles Endgerät statt. Jedoch können bei weitem nicht alle Webseiten die Nachfrage noch mobile-optimierten Inhalten befriedigen. Gerade im Bereich Onlineshopping und in der Industrie sind nur ein Bruchteil der Webseiten wirklich responsive und somit ordentlich über mobile Endgeräte bedienbar. Durch die Optimierung bietet sich hier ein sehr großes Potenzial, Verkäufe oder andere Kundenaktionen drastisch zu steigern.