Quelltext der Seite Responsive Webdesign

<seo title="Responsive Webdesign - Definition + Umsetzung" metadescription="Bei Responsive Webdesign handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Webapps und Websites. Jetzt weiterlesen ..." />

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 [[Mobile Optimierung|für die Darstellung auf mobilen Endgeräten zu optimieren]], ist das sogenannte Responsive Webdesign.

== Was ist Responsive Webdesign? ==
[[File:Responsive-Webdesign.png|mini|450px|rechts|alt=Responsive Webdesign|'''Abbildung:''' Responsive Design - Autor: Seobility - Lizenz: [[Creative Commons Lizenz BY-SA 4.0|CC BY-SA 4.0]]|link=https://www.seobility.net/de/wiki/images/9/93/Responsive-Webdesign.png]]

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.

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.

== 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

== Weiterführende Links ==

* http://www.dieproduktmacher.com/in-5-schritten-von-der-aktuellen-website-zum-responsive-design/
* https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=de
* https://www.webdesign-journal.de/workflow-responsive-webdesign/ 

== Ähnliche Artikel ==

* [[Mobile Optimierung]]
* [[Viewport]]
* [[Media Queries]]

[[Kategorie:Web Entwicklung]]
[[Kategorie:Web Design]]

<html><script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://www.seobility.net/de/wiki/images/9/93/Responsive-Webdesign.png",
      "license": "https://creativecommons.org/licenses/by-sa/4.0/deed.de",
      "acquireLicensePage": "https://www.seobility.net/de/wiki/Creative_Commons_Lizenz_BY-SA_4.0"
    }
    </script></html>
{| class="wikitable" style="text-align:left"
|-
|'''Über den Autor'''
|-
| [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. <html><a href="https://www.seobility.net/de/wiki/Seobility_Wiki_Team" target="_blank">Mehr Informationen über das Seobility Wiki Team</a></html>.
|}

<html><script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "author": {
    "@type": "Organization",
    "name": "Seobility",
    "url": "https://www.seobility.net/"
  }
}
</script></html>