Responsive Webdesign: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(Die Seite wurde neu angelegt: „== Responsive Webdesign == Responsive Design oder Responsive Webdesign bedeutet „reaktionsfähiges Webdesign“<sup>1</sup>, welches Web…“) |
KKeine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
== Responsive Webdesign == | == Responsive Webdesign == | ||
Responsive Design oder Responsive Webdesign bedeutet „reaktionsfähiges Webdesign“[[#Einzelnachweise|<sup>1</sup>]], welches Webseiten an unterschiedliche Bildschirmformate (mobile und nichtmobile Geräte) anpasst. Der Webdesiger Ethen Marcotte hat „Responsive Design“, in seinem 2010 auf alistapart.com erschienenen Artikel[[#Einzelnachweise|<sup>2</sup>]], erstmals eingeführt. Er ließ sich hierbei von der „responsive architecture“ inspirieren. | Responsive Design oder Responsive Webdesign bedeutet „reaktionsfähiges Webdesign“[[#Einzelnachweise|<sup>1</sup>]], welches Webseiten an unterschiedliche Bildschirmformate (mobile und nichtmobile Geräte) anpasst. Der Webdesiger [[Ethen Marcotte]] hat „Responsive Design“, in seinem 2010 auf alistapart.com erschienenen Artikel[[#Einzelnachweise|<sup>2</sup>]], erstmals eingeführt. Er ließ sich hierbei von der „responsive architecture“ inspirieren. | ||
== Technische Daten: == | == Technische Daten: == | ||
Es gibt unterschiedliche Ansätze: „Mobile First“, „Adaptive Layouts“ und „Fluid Layouts“. Technisch gibt es zwei verschiedene Lösungen: | Es gibt unterschiedliche Ansätze: „Mobile First“, „Adaptive Layouts“ und „Fluid Layouts“. Technisch gibt es zwei verschiedene Lösungen: | ||
* die CSS-Lösung, ein flexibles Raster, welches durch Media-Queries und Breakingpoints ergänzt wird | * die [[CSS]]-Lösung, ein flexibles Raster, welches durch Media-Queries und Breakingpoints ergänzt wird | ||
* und die JavaScript Lösung, die vorwiegend das DOM selbst manipuliert[[#Einzelnachweise|<sup>3</sup>]]. | * und die [[JavaScript]] Lösung, die vorwiegend das DOM selbst manipuliert[[#Einzelnachweise|<sup>3</sup>]]. | ||
== Pro und Contra: == | == Pro und Contra: == | ||
* Für das Responsive Webdesign spricht, dass für alle Displaygrößen eine passende Darstellung gewährleistet wird, das bedeutet man braucht nicht für jedes Endgerät eine neue eigenständige Version, bzw. keine APPs. Diese so eingesparten Ressourcen übertreffen den Mehraufwand, der für das Responsive Design betrieben werden muss. Reduktion auf das Wesentliche ist benutzer- und SEO-freundlicher. Nutzer sehen die Webseite immer im selben Aufbau, dies ist gut für die Bedienerfreundlichkeit[[#Einzelnachweise|<sup>4</sup>]]. | * Für das Responsive Webdesign spricht, dass für alle Displaygrößen eine passende Darstellung gewährleistet wird, das bedeutet man braucht nicht für jedes [[Endgerät]] eine neue eigenständige Version, bzw. keine [[App|APPs]]. Diese so eingesparten Ressourcen übertreffen den Mehraufwand, der für das Responsive Design betrieben werden muss. Reduktion auf das Wesentliche ist benutzer- und [[SEO]]-freundlicher. Nutzer sehen die [[Website|Webseite]] immer im selben Aufbau, dies ist gut für die Bedienerfreundlichkeit[[#Einzelnachweise|<sup>4</sup>]]. | ||
* Gegen das Responsive Webdesign spricht, dass auf kleineren Geräten viel gescrollt werden muss, da der Text hier auf geringeren Raum Platz finden muss. Die Navigation verliert immer mehr Usabilität, je kleiner der zur Verfügung stehende Raum ist[[#Einzelnachweise|<sup>5</sup>]]. Das Anzeigenschalten, bzw. Werben wird auf Webseiten, die für das Responsive Design optimiert wurden, erschwert, da sie dann kaum sichtbar sind und von ihrer Zielgruppe nicht mehr wahrgenommen werden. Dies führt bei etlichen Seitenbetreiber zu finanzielle Schwierigkeiten. | * Gegen das Responsive Webdesign spricht, dass auf kleineren Geräten viel gescrollt werden muss, da der Text hier auf geringeren Raum Platz finden muss. Die Navigation verliert immer mehr [[Usability|Usabilität]], je kleiner der zur Verfügung stehende Raum ist[[#Einzelnachweise|<sup>5</sup>]]. Das Anzeigenschalten, bzw. Werben wird auf Webseiten, die für das Responsive Design optimiert wurden, erschwert, da sie dann kaum sichtbar sind und von ihrer Zielgruppe nicht mehr wahrgenommen werden. Dies führt bei etlichen Seitenbetreiber zu finanzielle Schwierigkeiten. | ||
== Einzelnachweise == | == Einzelnachweise == | ||
Aktuelle Version vom 2. Februar 2014, 20:00 Uhr
Responsive Webdesign
Responsive Design oder Responsive Webdesign bedeutet „reaktionsfähiges Webdesign“1, welches Webseiten an unterschiedliche Bildschirmformate (mobile und nichtmobile Geräte) anpasst. Der Webdesiger Ethen Marcotte hat „Responsive Design“, in seinem 2010 auf alistapart.com erschienenen Artikel2, erstmals eingeführt. Er ließ sich hierbei von der „responsive architecture“ inspirieren.
Technische Daten:
Es gibt unterschiedliche Ansätze: „Mobile First“, „Adaptive Layouts“ und „Fluid Layouts“. Technisch gibt es zwei verschiedene Lösungen:
- die CSS-Lösung, ein flexibles Raster, welches durch Media-Queries und Breakingpoints ergänzt wird
- und die JavaScript Lösung, die vorwiegend das DOM selbst manipuliert3.
Pro und Contra:
- Für das Responsive Webdesign spricht, dass für alle Displaygrößen eine passende Darstellung gewährleistet wird, das bedeutet man braucht nicht für jedes Endgerät eine neue eigenständige Version, bzw. keine APPs. Diese so eingesparten Ressourcen übertreffen den Mehraufwand, der für das Responsive Design betrieben werden muss. Reduktion auf das Wesentliche ist benutzer- und SEO-freundlicher. Nutzer sehen die Webseite immer im selben Aufbau, dies ist gut für die Bedienerfreundlichkeit4.
- Gegen das Responsive Webdesign spricht, dass auf kleineren Geräten viel gescrollt werden muss, da der Text hier auf geringeren Raum Platz finden muss. Die Navigation verliert immer mehr Usabilität, je kleiner der zur Verfügung stehende Raum ist5. Das Anzeigenschalten, bzw. Werben wird auf Webseiten, die für das Responsive Design optimiert wurden, erschwert, da sie dann kaum sichtbar sind und von ihrer Zielgruppe nicht mehr wahrgenommen werden. Dies führt bei etlichen Seitenbetreiber zu finanzielle Schwierigkeiten.
Einzelnachweise
- 1 vgl. Zillgens, 2012, S. 7.
- 2 http://alistapart.com/article/responsive-web-design Datum Zugriff: 24.01.2014
- 3 http://t3n.de/news/responsive-webdesign-teil-1-499331/ Datum Zugriff: 24.01.2014
- 4 vgl. Eugster, 2013, S. 125.
- 5 http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign-schrott-ist/ Datum Zugriff: 24.01.2014
Literatur
- Zillgens, Christophe: Responsive Webdesign, Carl Hanser Verlag GmbH & Co. KG, München 2012.
- Eugster, Jörg: Internet- und Online-Marketing-Strategie, wifimaku, 2013.