Seitdem sich das Internet auf die kommerzielle Spur begeben hat, orientiert sich die Website-Gestaltung an der Darstellung auf Computerbildschirmen. Mit der Entwicklung von Touchscreen-Geräten wie Tablets und Smartphones steigt auch die mobile Internetnutzung signifikant an. Entsprechend geht das Webdesign verstärkt auf die spezifischen Aspekte mobiler Internetnutzung ein. Webseiten wirken auf kleineren Displays anders als auf großen Monitoren. Wird die Internetpräsenz nicht für mobile Geräte optimiert, leidet die Benutzerfreundlichkeit deutlich.
Inhaltsverzeichnis
Was genau ist responsive Design?
Mit dem responsive Webdesign wird die Website dem jeweiligen Endgerät flexibel angepasst, um die User Experience auch auf mobilen Endgeräten zu gewährleisten. Wird eine neu erstellte Website zunächst für die mobile Nutzung optimiert und später für große Bildschirme erweitert, liegt ein Konzept mit der Bezeichnung „Mobile First“ vor. Darüber hinaus kann die Website so programmiert werden, dass sich ihre Funktionen an den grafischen und technischen Optionen mobiler Endgeräte orientieren. In diesem Fall spricht der Webmaster vom „Progressive Enhancement“.
Im übertragenen Sinne bedeutet der Begriff responsive Webdesign „reagierendes Webdesign“. Dieses Design folgt den Anforderungen der Nutzer; es reagiert auf die Auflösung des mobilen Endgeräts und korrespondiert damit. Im Vergleich dazu sind herkömmliche Websites und Online-Shops hinsichtlich ihres Layouts in der Regel starr konstruiert. Beim responsive Design passen sich die Elemente für Navigation und Content sowie der strukturelle Aufbau der Website der jeweiligen Bildschirmauflösung an.
Der Begriff „responsive Webdesign“ wurde erstmals im Mai 2010 verwendet, und zwar vom Grafikdesigner Ethan Marcotte. In einem Artikel des Magazins „A List Apart“ nahm er Bezug zur responsiven Architektur. Ein Jahr später veröffentlichte er sein Buch „Responsive Webdesign“. 2012 griffen das .net magazine und Mashable den Begriff wieder auf und bezeichneten das Design als eine der wichtigsten Entwicklungen des Jahres.
Zukunftsweisendes Webdesign
Seitdem Apple im Jahr 2007 das iPhone einführte, nimmt die Anzahl mobiler Endgeräte mit Touchscreen kontinuierlich zu. Entsprechend erhöht sich die Zahl der Nutzer, die mit Smartphone und Tablet im Internet surfen. Ist die User Experience einer Website auf kleinen Displays mangelhaft, führt dies beispielsweise zum Verlust von Conversions. Conversion beschreibt einen Vorgang im Online-Marketing, der einen Shop-Besucher in einen Käufer umwandelt. Responsive Design ermöglicht ein benutzerfreundliches Einkaufserlebnis für einen größtmöglichen Nutzerkreis und ist daher nicht nur zweckmäßig, sondern hinsichtlich der technischen Entwicklung zukunftweisend.
Webdesigner müssen dabei auf eine hohe Anzahl unterschiedlicher Endgeräte Rücksicht nehmen und die Websites auf die entsprechende Bildschirmauflösung ausrichten. Die Standard-Auflösung eines Smartphones liegt zwischen 320 und 480 Pixeln, die eines Tablets zwischen 768 und 1.024 Pixeln. Die Auflösung eines Tablets endet also dort, wo die eines üblichen Computer-Desktops beginnt.
Responsive Design als aktueller Standard
Bereits seit dem 21. April 2015 gehört die „Mobile Friendliness“ zu den wichtigsten Ranking-Kriterien von Google. Für Webmaster und SEO-Spezialisten besitzt das responsive Design spätestens seit diesem Datum höchste Priorität. Responsive Design gewährleistet mobilen Internetnutzern den problemlosen Besuch einer Website. Darüber hinaus benötigt diese Design-Variante im Vergleich zu anderen Möglichkeiten den geringsten gestalterischen und technischen Aufwand.
Im März 2018 startete Google offiziell den Rollout für seinen Mobile First-Index. Für Webseiten-Betreiber bedeutet dies im Klartext: Google prüft die mobile Version ihrer Internetpräsenz, um ihre Relevanz für die mobile Nutzung zu bewerten. Indexiert Google die mobile Variante der Website, erhält der Seitenbetreiber eine Information via Search Console. Seit Juli 2018 erleiden Websites mit geringer mobiler Ladegeschwindigkeit Nachteile im Ranking.
Die Umsetzung des responsive Design
Für die korrekte Darstellung der Webseiten auf mobilen Endgeräten sind HTML5 und CSS3 im Einsatz. Mittels Media Queries können die Informationen vom jeweiligen Endgerät abgefragt werden. Zu diesen Informationen gehören die Größe des Displays, die Auflösung, das Format und bestimmte technische Möglichkeiten, beispielsweise die Eingabe per Finger, Sprache etc. Bei der Umsetzung ist es dringend notwendig, das Layout und den Inhalt einer Seite strikt zu trennen. Nur so ist die optimale Funktionalität des responsive Design sichergestellt.
Media Queries unter CSS3 unterscheiden zwischen „print“ und „screen“ und fragen weitere Eigenschaften ab, zum Beispiel, ob die Website im Hoch- oder Querformat angezeigt werden soll.
Variable Optik auf mobilen Endgeräten
Das responsive Design stellt den gleichen Inhalt einer Website für unterschiedliche Endgeräte zur Verfügung, und zwar in der Regel in nur leicht abgewandeltem Design. Grundsätzlich werden die bereits vorhandenen Funktionselemente auf einer Website in anderer Struktur dargestellt, zum Beispiel beim Wechsel vom Hoch- und Querformat. Unter Umständen kann es sinnvoll sein, manche Elemente für kleinere Displays zu reduzieren. Dabei wird lediglich ein anderes Style-Sheet verwendet; der HTML-Code wird nicht geändert.
Wird eine Website umstrukturiert, besitzt die Position und Verfügbarkeit vorhandener Elemente hohe Priorität. Welche Elemente können weiter nach unten geschoben werden? Welche sind unwichtig und müssen auf der mobilfähigen Website-Version nicht berücksichtigt werden? Die Entwicklung beansprucht Zeit, bietet jedoch auch zahlreiche Möglichkeiten für weiter gehende SEO-Maßnahmen.
Gibt es Alternativen zum responsive Webdesign?
Für die mobile Optimierung von Websites unterstützt und empfiehlt sogar Google selbst das responsive Design. Wie hoch der Aufwand für die Entwicklung ist, hängt von der Größe, der Komplexität und vom Funktionsumfang der jeweiligen Website ab. Ist das Design einmal entwickelt, ist die weitere Pflege mühelos und zeitsparend. Die Inhalte müssen nur einmal erstellt werden und stehen dann für jedes Endgerät in jedem Design zur Verfügung.
Die Alternative zum responsive Design besteht in der Entwicklung einer eigenständigen mobilen Website, die in der Regel unter einer Subdomain erreichbar ist. Für isolierte mobile Domains ist der Aufwand deutlich größer, da unter anderem die Inhalte separat gepflegt werden müssen. Dies betrifft auch die laufende, umfangreichere Pflege der Daten, da sie für zwei Seiten gleichzeitig gewährleistet werden muss. Darüber hinaus ist der technische Aufwand für Programmierer und SEO-Fachleute höher, da Meta-Tags und/oder Canonical Tags im Quellcode fehlerfrei implementiert werden müssen.
Canonical Tags sind dann nötig, wenn Website-Inhalte mehrfach genutzt werden, wenn die Startseite über unterschiedliche Domains erreichbar ist, Seiten mit unterschiedlicher Schreibweise aufrufbar sind, der Server Adress-Variationen zulässt, Inhalte in unterschiedlichen Ansichten (PDF, Druckversion etc.) angeboten werden, https-Varianten der Seite existieren oder die Inhalte auf externen Seiten zusätzlich veröffentlicht werden.
Der Website-Administrator muss darauf achten, dass die Canonical Tags auf jeder einzelnen Unterseite implementiert werden. Damit zeigt jede Seite auf sich selbst, falsche Verlinkungen und unerwartete Fehler werden verhindert oder korrigiert.
Bildquelle: unsplash.com