Responsive Webdesign

578 Aufrufe

Veröffentlicht am

Responsive Webdesign ist einer der neuen Online-Designtrends. Doch was genau ist Responsive Webdesign? Die Bedeutung davon wird in dieser Slideshare-Präsenation genauer erläutert. Außerdem wird geklärt, wann und warum es sinnvoll ist, Responsive Webedesign anzuwenden und welche unterschiedlichen Layouttypen existieren.

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
578
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
15
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign

  1. 1. Responsive Webdesign Was ist das und welche Vorteile kann es bringen?
  2. 2. Inhalt 1. Begriffserklärung 2. Bedeutung 3. Wann und warum? 4. Layouttypen 5. Vorteile 6. Zusammenfassung (Beispiele)
  3. 3. 3 Begriffs- erklärung
  4. 4. 4 Was versteht man unter dem Begriff Responsive Webdesign? • „reagierendes“ Webdesign • „Responsive Webdesign“ wurde erstmals von Ethan Marcotte im Mai 2010 in einem Artikel für das Magazin „A List Apart“ verwendet • Inhalte auf jedem Bildschirm und jeder Bildschirmauflösung optimal darstellen • Nutzererlebnis und die Benutzerfreundlichkeit zu jeder Zeit optimal
  5. 5. 5 Was versteht man unter dem Begriff Responsive Webdesign? • gesamtes Webdesign reagiert (z. B. Bedienung und Reaktionen auf Eingaben) • nicht nur das „Layout“ verschiebt sich! • nicht nur gestalterische, sondern auch funktionelle Aspekte werden situationsbedingt berücksichtigt • nicht nur ein grafischer, sondern ein ganzheitlicher, strategischer Ansatz für erfolgreiche Responsive Webseiten
  6. 6. 6 Bedeutung
  7. 7. 7 eine Entwicklung für mehrere Geräte! nur eine URL nur einmal Inhalt nur eine Programmierung mit Hilfe von Media Queries „Einer für alle!“
  8. 8. 8 • Media Queries ermöglichen eine ausreichende Abfrage von Informationen zum Endgerät, um entsprechend darauf reagieren zu können • Zum Beispiel die Art des Ausgabemediums, die Bildschirmauflösung oder der gerade genutzte Modus (Landscape oder Portrait) werden in Erfahrung gebracht • Media Queries können mehrere Bedingungen integrieren. Sind diese erfüllt, werden bestimmte CSS- Regeln aktiv bzw. komplette Stylesheets eingebunden und somit Änderungen des Layouts realisiert. Bedeutung
  9. 9. 9 • Flexible Layouts, die sich optimal an die Bildschirmauflösung des Endgeräts anpassen • Auf diese Weise kann (z. B. auf Smartphones) immer die gerätespezifische Variante der Website angezeigt werden • Umsetzung durch neue Technologien (z. B. CSS3 und Media Queries) • Mit Hilfe von JavaScript und Media Queries können strukturelle Anpassungen vorgenommen werden, um den Besonderheiten verschiedener Devices gerecht zu werden Bedeutung
  10. 10. 10 Viewports 1280 px 768 px 320 px • „Ausschnitt“ des Browserfensters • zur Verfügung stehender Bereich • Display (z. B. Smartphone oder Tablet)
  11. 11. 11 Breakpoints mit Breakpoints ohne Breakpoints • Breakpoints definieren, an welchen Stellen das Layout einer Seite „umbrechen“ darf • Webdesigner können so sicherstellen, dass ein Umbruch im Design, (z. B. wenn sich die Seite verschmälert) nicht zu einem inhaltlichen Bruch führt.
  12. 12. 12 Relative Einheiten dynamische Prozent Werte fixe Pixel Werte • Wenn die Größe des Bildschirms (auf der Inhalte angezeigt werden können) variiert, ist auch die Pixeldichte der angezeigten Fläche nicht mehr in Stein gemeißelt • von festen Pixelvorgaben abrücken und relative Größeneinheiten definieren (z. B. „50 Prozent des Screens“ oder „100 Prozent des Screens“)
  13. 13. 13 Maximal- und Mindestwerte mit Maximal-Breite ohne Maximal-Breite • Verhindert, dass Inhalte zu klein dargestellt werden oder auf größeren Bildschirmen zu sehr in die Breite gehen • Eine Grenze (Pixelwert) wird für die maximale Breite definiert (Verzerrungs-Effekt bleibt aus)
  14. 14. 14 Wann und warum?
  15. 15. 15 Kontextsensitives Storytelling • Jeder Screen und jedes darauf gespielte Format bieten für den User unterschiedliche Kontexte • spezielle Interaktionsmöglichkeiten (z. B. Gestensteuerung beim TV) • situative Nutzwerte (z. B. geobasierte Services auf dem Smartphone) • Möglichkeiten und Konventionen gilt es bei der Kommunikation von Inhalten, Storys und reagierenden Webseiten zu beachten
  16. 16. 16 Multi-Screen-Design • SmartPhone, Tablets, Laptop, Desktop, ... • SmartWatches, Glasses, SmartTVs, Spielekonsolen, Navigationsgeräte, ... • Verschiedene Zugriffsquellen, unterschiedliche Displaygrößen • Bedienung (Touchscreen vs. Tastatur) und Nutzungskontext
  17. 17. 17 „Mobile First“ und „Desktop First“ Diese beiden Leitprinzipien des Responsive Webdesign geben an, welcher Startpunkt für das Design einer Webseite gesetzt wird: • Beginne ich auf dem kleinen Screen und passe das Design für größere Auflösungen an ... • oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren Smartphone-Größen vor • Technisch gesehen gibt es keine großen Unterschiede • Konzeptionell wichtig (Zielgruppenorientierung)
  18. 18. 18 Layouttypen
  19. 19. 19 Layouttypen • Adaptive und Responsive (Adaptive Webseite vs. Responsive Webseite) • Adaptive = stufenweise Anpassung (Technik: Pixel) • Responsive = stufenlose Anpassung (Technik: Prozent) Smartphone Tablet Desktop
  20. 20. 20 Fixed Layout – Starr, nicht anpassungsfähig + Einfache Planung + Einfache Umsetzung - Keine spezifische Optimierung für verschiedene Endgeräte - Eingeschränkte Funktionalität durch abgeschnittenen Content
  21. 21. 21 Adaptive Layout – Stufenweise anpassungsfähig + Passt sich an vordefinierte Darstellungsbereiche (Viewports) an + Content im Gegensatz zum Fixed Layout vollständig sichtbar - Komplexere Planung als beim Fixed Layout, da mehrere Viewports berücksichtigt werden müssen. - Keine optimale Nutzung des Anzeigebereichs
  22. 22. 22 Responsive Layout – Stufenlos anpassungsfähig + Optimale Nutzung des Viewports durch stufenlose Anpassung + In jeder beliebigen Darstellung ideales Nutzererlebnis + Geringerer Aufwand in der Content-Pflege + Zukunftsorientiert und flexibel - Höherer Aufwand in Konzeption, Gestaltung und Entwicklung
  23. 23. 23 Übersicht Layouttypen Adaptive Layout – Stufenweise anpassungsfähig Fixed Layout – Starr, nicht anpassungsfähig Responsive Layout – Stufenlos anpassungsfähig
  24. 24. 24 Vorteile
  25. 25. 25 Vorteile WARUM EINE RESPONSIVE WEBSEITE? Google empfiehlt Responsive: Google erkennt, wenn Ihre Webseite für verschiedene Geräte und Auflösungen optimiert ist und stuft sie somit höher im Ranking ein. Zufriedenere Besucher: Die Aufenthaltsdauer, sowie die Aufmerksamkeit und Aktivität der Besucher wird erhöht. Bei Online-Shops bedeutet das u.a. steigende Verkaufszahlen. Zukunftssicherheit: Mit Responsive Webdesign kann Ihre Webseite dem User bei jeder Displayauflösung optimal dargestellt werden. Ersparnis: Eine Entwicklung für mehrere Endgeräte. Es wird keine gesonderte mobile Version programmiert, die separat gewartet werden muss.
  26. 26. 26 Zusammen- fassung
  27. 27. 27 Zusammenfassung  „reagierendes“ Webdesign  Optimales Nutzererlebnis und Benutzerfreundlichkeit  Nicht nur grafischer, sondern ganzheitlicher, strategischer Ansatz (Technik)  Flexible Layouts im Multi-Screen-Design  Verschiedene Layouttypen (stufenweise und stufenlose Anpassung)  Zukunftssicherheit
  28. 28. 28 Beispiele „BEST-OF“ www.g-star.com/de_de www.porsche.com/germany
  29. 29. 29 Haben Sie Fragen? Dann kontaktieren Sie uns unter info@avenit.de oder unter der Telefonnummer 0781/919 369 0. Oder schreiben Sie uns auf Facebook www.facebook.com/avenitag Christian Seifert CEO, Vorstandsvorsitzender

×