Responsive Webdesign: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „Die Anzahl der Menschen, die ihr Smartphone zum Surfen im Internet nutzen, hat in den vergangenen Jahren stetig zugenommen. Dieser Trend der mobilen Internetnu…“) |
(kein Unterschied)
|
Version vom 4. Juni 2018, 13:56 Uhr
Die Anzahl der Menschen, die ihr Smartphone zum Surfen im Internet nutzen, hat in den vergangenen Jahren stetig zugenommen. Dieser Trend der mobilen Internetnutzung hat einen direkten Einfluss darauf, wie Webentwickler ihre Webapplikationen und Websites programmieren. Das Resultat der Bemühungen, um moderne Websites und Webapps für die Darstellung auf mobilen Endgeräten zu optimieren, ist das sogenannte Responsive Webdesign.
Inhaltsverzeichnis
Was ist Responsive Webdesign?
Beim Responsive Webdesign, auch responsives Webdesign, handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Webapps und Websites. Dabei wird an alle Geräte derselbe HTML Code gesendet, aber sämtliche Elemente der Website, wie beispielsweise textuelle und audiovisuelle Inhalte, passen sich automatisch der Größe und Breite des verwendeten Displays an. Große Titelbilder, die auf einem 27 Zoll Monitor problemlos dargestellt werden können, werden auf einem Smartphone dann eventuell gar nicht angezeigt, weil sie dort zu viel Platz einnehmen würden und somit der Informationsgehalt verloren geht. Dies ist insbesondere deshalb wichtig, da Smartphone-Nutzer Websites in erster Linie besuchen, um Informationen (z.B. Öffnungszeiten, Adressen, etc.) abzurufen. Mobile Websites sollten es dem User deshalb besonders einfach machen, die benötigten Informationen schnell zu finden, und nicht durch zu viele grafische Elemente ablenken.
Responsive Webdesign basiert auf einem komplexen Zusammenspiel unterschiedlicher Technologien. Durch den Einsatz moderner Web-Standards wie HTML, CSS (insbesondere Media Queries) und JavaScript wird die Entwicklung flexibler Websites ermöglicht, welche sich automatisch an das jeweilige Endgerät anpassen. Der wesentliche Vorteil des responsiven Webdesigns spiegelt sich in der Tatsache wider, dass Inhalte nicht mehr für jedes mögliche Endgerät separat optimiert werden müssen. Zudem bieten responsive Webpräsenzen eine wesentlich bessere User Experience und Usability als traditionelle mobile Websites.
Warum ist der responsive Ansatz heute so wichtig?
Die Zahl der mobilen Endgeräte nimmt kontinuierlich zu und somit auch die Zahl der Internetnutzer, die über solche Geräte im Internet surfen. Bevor das responsive Webdesign populär wurde, hat man für die mobile Optimierung häufig eine Website mit zwei Versionen genutzt, eine für den Desktop und eine für mobile Endgeräte. Als durch die Markteinführung des Apple iPads eine neue Bildschirmgröße hinzu kam, hat man jedoch schnell erkannt, dass dieses Konzept auf lange Sicht keine Zukunft hat. Um nicht für jeden hinzukommenden Gerätetyp eine neue Website entwickeln zu müssen, wurde das Responsive Webdesign entwickelt, welches es ermöglicht, Usern auf unterschiedlichen Endgeräten mit nur einer Website die bestmögliche User Experience zu bieten.
Funktionsweise
Eine Seite, die mit Responsive Design ausgestattet ist, berücksichtigt die individuellen Anforderungen unterschiedlicher Endgeräte. Dabei wird die Website so angepasst, dass sie jedem Nutzer so übersichtlich und einfach benutzbar wie möglich angezeigt wird.
Wichtige Kriterien für die angepasste Darstellung sind die Größe bzw. Auflösung des Anzeigegeräts sowie verfügbare Eingabemethoden.
Insbesondere HTML Blockelemente müssen im Rahmen des responsiven Designs unterschiedlich behandelt werden. Wenn das Gestaltungsraster mehrere Spalten einnimmt, dann können die Blockelemente individuell an die Breite des jeweiligen Viewports angepasst werden. Als Viewport wird im Kontext des Webdesigns der Anzeigebereich für eine Seite bezeichnet. Wenn bei kleineren Auflösungen eine Darstellung der Blockelemente nebeneinander nicht mehr möglich ist, werden diese einfach untereinander verschoben oder individuell positioniert (siehe Abbildung unten).
Bilder werden auf die Größe ihrer umgebenden Elemente skaliert, Texturen für Hintergründe können auch weggelassen werden und Logos können wie Bilder verkleinert oder durch kleinere Versionen ersetzt werden. Horizontale Menü-Leisten, wie sie häufig bei der Desktop-Darstellung eingesetzt werden, können als vertikale Liste umgestaltet und erst bei Mausklick angezeigt werden.
Abbildung von Mitzayapa.Mihai aus Wikimedia Commons
Lizenz: CC BY-SA 4.0
Technische Umsetzung
Die drei wesentlichen Voraussetzungen für die technische Umsetzung von Responsive Design sind:
- CSS Media Queries
- Meta Viewport (HTML)
- Ein durchdachtes CSS-Konzept
Bei Media Queries handelt es sich um einen wichtigen Bestandteil von CSS, der es ermöglicht, dass Seiten auf unterschiedlichen Bildschirmgrößen und Auflösungen korrekt dargestellt werden. Mithilfe der Media Queries werden die einzelnen Layouts für unterschiedliche Gerätetypen bestimmt und festgelegt. Dabei ist es nicht unbedingt nötig, für jedes Gerät die korrekte Bildschirmgröße anzugeben. Vielmehr können für unterschiedliche Displayauflösungen sogenannte Breakpoints gesetzt werden. Das Smartphone erhält dann beim Laden der Seite über die Media Queries das korrekte Layout zugespielt, das sich optimal an die Displaygröße des jeweiligen Geräts anpasst.
Darüber hinaus kommt auch dem HTML Meta-Element Viewport im Rahmen von Responsive Design eine wichtige Rolle zu. Dieses Meta-Element sorgt dafür, dass der Inhalt der Website vollständig und gut lesbar angezeigt wird. Dies geschieht durch das Optimieren der Länge und Breite der entsprechenden Website, sodass sie vom mobilen Webbrowser optimal dargestellt werden kann.
Bedeutung für SEO
Responsives Design hat mittlerweile eine große Bedeutung für die Suchmaschinenoptimierung (SEO). Denn seit dem 21. April 2015 werden Websites, die auf die Darstellung auf mobilen Endgeräten optimiert sind, vom Google-Algorithmus bevorzugt behandelt und mit einem besseren Ranking in den Suchergebnissen belohnt. Auch andere SEO-Maßnahmen, wie beispielsweise der Backlinkaufbau, sind mit einer responsiven Seite wesentlich einfacher durchzuführen, da in diesem Fall der Linkaufbau nur auf einer einzigen Website durchgeführt werden muss, anstatt auf einer mobilen und einer Desktop-Version.
Die Vorteile des responsiven Ansatzes im Bereich der Webentwicklung sind somit folgende:
- Möglichkeit der Optimierung für jedes beliebige Gerät
- Bessere User Experience und Usability
- Einheitliche Nutzererfahrung und langfristige Nutzerbindung
- Minimierung des Pflege- und Verwaltungsaufwandes
- Verwendung desselben HTML Codes für alle Geräte