{"id":31682,"date":"2024-11-12T12:39:38","date_gmt":"2024-11-12T12:39:38","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31682"},"modified":"2025-03-21T16:33:05","modified_gmt":"2025-03-21T16:33:05","slug":"Responsive_Webdesign","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Responsive_Webdesign","title":{"rendered":"Responsive Webdesign"},"content":{"rendered":"

Was ist Responsive Webdesign?<\/span><\/h2>\n
\n
\"Responsive<\/a> <\/p>\n
Abbildung:<\/b> Responsive Design – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

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\u00e4te derselbe HTML Code gesendet, aber s\u00e4mtliche Elemente der Website, wie beispielsweise textuelle und audiovisuelle Inhalte, passen sich automatisch der Gr\u00f6\u00dfe und Breite des verwendeten Displays an. Gro\u00dfe Titelbilder, die auf einem 27 Zoll Monitor problemlos dargestellt werden k\u00f6nnen, werden auf einem Smartphone dann eventuell gar nicht angezeigt, weil sie dort zu viel Platz einnehmen w\u00fcrden und somit der Informationsgehalt verloren geht. Dies ist insbesondere deshalb wichtig, da Smartphone-Nutzer Websites in erster Linie besuchen, um Informationen (z.B. \u00d6ffnungszeiten, Adressen, etc.) abzurufen. Mobile Websites sollten es dem User deshalb besonders einfach machen, die ben\u00f6tigten Informationen schnell zu finden, und nicht durch zu viele grafische Elemente ablenken.\n<\/p>\n

Responsive Webdesign basiert auf einem komplexen Zusammenspiel unterschiedlicher Technologien. Durch den Einsatz moderner Web-Standards wie HTML, CSS (insbesondere Media Queries<\/a>) und JavaScript<\/a> wird die Entwicklung flexibler Websites erm\u00f6glicht, welche sich automatisch an das jeweilige Endger\u00e4t anpassen. Der wesentliche Vorteil des responsiven Webdesigns spiegelt sich in der Tatsache wider, dass Inhalte nicht mehr f\u00fcr jedes m\u00f6gliche Endger\u00e4t separat optimiert werden m\u00fcssen. Zudem bieten responsive Webpr\u00e4senzen eine wesentlich bessere User Experience und Usability<\/a> als traditionelle mobile Websites.\n<\/p>\n

Warum ist der responsive Ansatz heute so wichtig?<\/span><\/h2>\n

Die Zahl der mobilen Endger\u00e4te nimmt kontinuierlich zu und somit auch die Zahl der Internetnutzer, die \u00fcber solche Ger\u00e4te im Internet surfen. Bevor das responsive Webdesign popul\u00e4r wurde, hat man f\u00fcr die mobile Optimierung h\u00e4ufig eine Website mit zwei Versionen genutzt, eine f\u00fcr den Desktop und eine f\u00fcr mobile Endger\u00e4te. Als durch die Markteinf\u00fchrung des Apple iPads eine neue Bildschirmgr\u00f6\u00dfe hinzu kam, hat man jedoch schnell erkannt, dass dieses Konzept auf lange Sicht keine Zukunft hat. Um nicht f\u00fcr jeden hinzukommenden Ger\u00e4tetyp eine neue Website entwickeln zu m\u00fcssen, wurde das Responsive Webdesign entwickelt, welches es erm\u00f6glicht, Usern auf unterschiedlichen Endger\u00e4ten mit nur einer Website die bestm\u00f6gliche User Experience zu bieten.\n<\/p>\n

Funktionsweise<\/span><\/h2>\n

Eine Seite, die mit Responsive Design ausgestattet ist, ber\u00fccksichtigt die individuellen Anforderungen unterschiedlicher Endger\u00e4te. Dabei wird die Website so angepasst, dass sie jedem Nutzer so \u00fcbersichtlich und einfach benutzbar wie m\u00f6glich angezeigt wird.\n<\/p>\n

Wichtige Kriterien f\u00fcr die angepasste Darstellung sind die Gr\u00f6\u00dfe bzw. Aufl\u00f6sung des Anzeigeger\u00e4ts sowie verf\u00fcgbare Eingabemethoden.\n<\/p>\n

Insbesondere HTML Blockelemente m\u00fcssen im Rahmen des responsiven Designs unterschiedlich behandelt werden. Wenn das Gestaltungsraster mehrere Spalten einnimmt, dann k\u00f6nnen die Blockelemente individuell an die Breite des jeweiligen Viewports angepasst werden. Als Viewport<\/a> wird im Kontext des Webdesigns der Anzeigebereich f\u00fcr eine Seite bezeichnet. Wenn bei kleineren Aufl\u00f6sungen eine Darstellung der Blockelemente nebeneinander nicht mehr m\u00f6glich ist, werden diese einfach untereinander verschoben oder individuell positioniert.\n<\/p>\n

Bilder werden auf die Gr\u00f6\u00dfe ihrer umgebenden Elemente skaliert, Texturen f\u00fcr Hintergr\u00fcnde k\u00f6nnen auch weggelassen werden und Logos k\u00f6nnen wie Bilder verkleinert oder durch kleinere Versionen ersetzt werden. Horizontale Men\u00fc-Leisten, wie sie h\u00e4ufig bei der Desktop-Darstellung eingesetzt werden, k\u00f6nnen als vertikale Liste umgestaltet und erst bei Mausklick angezeigt werden.\n<\/p>\n

Technische Umsetzung<\/span><\/h2>\n

Die drei wesentlichen Voraussetzungen f\u00fcr die technische Umsetzung von Responsive Design sind:\n<\/p>\n