CMS|SESSION.Responsive Design | Fluid | Mobile.Dani KaltCEOEinführung | Früher/Heute | Multiscreen | Nutzungsszenario | Re...
RESPONSIVE DESIGN.Früher...> PC-Benutzer stationär> Laptop-Benutzer stationär> Wenige Browser> Auflösung 800x600> Fixes La...
RESPONSIVE DESIGN.Heute...…existiert eine Vielzahl anBildschirmauflösungen – eineSituation mit einschneidendenKonsequenzen...
RESPONSIVE DESIGN.  Multi Screen Situation – Das Web ist überall.960x640px           4:3                                  ...
RESPONSIVE DESIGN.Doch das ist noch nicht alles...…nebst den Multiscreens gibt esauch die Nutzungs-Szenarien:
RESPONSIVE DESIGN.Nutzungs-Szenarien.
RESPONSIVE DESIGN.Nutzungs-Szenarien.            „Device-Hopper“  Benutzer wechselt die Geräte innerhalb eines Tages mehrf...
RESPONSIVE DESIGN.                     Quelle: http://www.multiscreen-experience.com/?page_id=56
RESPONSIVE DESIGN.Mobile Internetnutzung auf dem Vormarsch.  „44% der Schweizer Web-User surften 2011 im mobilen Web“
RESPONSIVE DESIGN. „Ein Design – viele Layouts“ Bei Responsive Design handelt es sich um einen neuen Ansatz – eine Layout-...
RESPONSIVE DESIGN.Grundprinzipien...> Flexibles Raster> Variable Anzeige von Inhalten> Anpassung der Navigationselemente> ...
RESPONSIVE DESIGN.Das Layout passt sich dem Ausgabegerät an.Beispiel:
RESPONSIVE DESIGN.
RESPONSIVE DESIGN.Der Ansatz: Mobile First / Tablet First> Weniger ist mehr> Wachsende mobile Nutzung> Verzicht auf unwese...
RESPONSIVE DESIGN.      Livetest: http://mattkersley.com/responsive/>   Masse des Displays>   Auflösungen>   Format / Betr...
RESPONSIVE DESIGN.  „Was heisst das für Sie?“                 Visuell / Inhaltlich          > Wie gehen wir mit den Geräte...
RESPONSIVE DESIGN.  „Was erwartet der User?“       Design und Inhalt ist unabhängig            > Usability – Maus vs. Fing...
RESPONSIVE DESIGN.    „Wann macht‘s Sinn?“          Responsive Design – Ja?         > Einfache, überschaubare Seiten      ...
RESPONSIVE DESIGN. „Wann wird es schwierig?“           Responsive Design – zu prüfen!        > Bei sehr komplexen Seiten -...
RESPONSIVE DESIGN.     „Vorteile im Überblick“                     Responsive Design> Eine Webseite deckt mit verschiedene...
RESPONSIVE DESIGN.                     Beispiel: foodsense.is/
RESPONSIVE DESIGN.                     Beispiel: bostonglobe.com
CUSTOMER RELATIONSHIP MANAGEMENTELECTRONIC COMMERCEONLINE MARKETING VIELEN DANK! CS2 AG PLATINUM MEMBER TYPO3 ASSOCIATION ...
Nächste SlideShare
Wird geladen in …5
×

Responsive Design | Fluid | Mobile

5.588 Aufrufe

Veröffentlicht am

Die Antwort auf die Herausforderungen des mobilen Webs ist Responsive Design.
Doch was verbirgt sich hinter diesem neuen Design Ansatz und welches sind die
Benefits die ich daraus ziehe? Referent: Dani Kalt (CEO, CS2 AG)

0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
5.588
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3.332
Aktionen
Geteilt
0
Downloads
38
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Design | Fluid | Mobile

  1. 1. CMS|SESSION.Responsive Design | Fluid | Mobile.Dani KaltCEOEinführung | Früher/Heute | Multiscreen | Nutzungsszenario | Responsive Design #CS2session
  2. 2. RESPONSIVE DESIGN.Früher...> PC-Benutzer stationär> Laptop-Benutzer stationär> Wenige Browser> Auflösung 800x600> Fixes Layout / Pixelgenau> Die Webseite auf einem Kanal
  3. 3. RESPONSIVE DESIGN.Heute...…existiert eine Vielzahl anBildschirmauflösungen – eineSituation mit einschneidendenKonsequenzen.… nicht mehr nur Quer- sondernimmer mehr Hochformat.
  4. 4. RESPONSIVE DESIGN. Multi Screen Situation – Das Web ist überall.960x640px 4:3 1024x788px 16:9 2048x1536px 1280x720px480x320px von 240x320px 1920x1080px bis 2280x1800px
  5. 5. RESPONSIVE DESIGN.Doch das ist noch nicht alles...…nebst den Multiscreens gibt esauch die Nutzungs-Szenarien:
  6. 6. RESPONSIVE DESIGN.Nutzungs-Szenarien.
  7. 7. RESPONSIVE DESIGN.Nutzungs-Szenarien. „Device-Hopper“ Benutzer wechselt die Geräte innerhalb eines Tages mehrfach.
  8. 8. RESPONSIVE DESIGN. Quelle: http://www.multiscreen-experience.com/?page_id=56
  9. 9. RESPONSIVE DESIGN.Mobile Internetnutzung auf dem Vormarsch. „44% der Schweizer Web-User surften 2011 im mobilen Web“
  10. 10. RESPONSIVE DESIGN. „Ein Design – viele Layouts“ Bei Responsive Design handelt es sich um einen neuen Ansatz – eine Layout-Struktur, welche sich an die Vielfalt der Auflösungen von Endgeräten anpasst.
  11. 11. RESPONSIVE DESIGN.Grundprinzipien...> Flexibles Raster> Variable Anzeige von Inhalten> Anpassung der Navigationselemente> Relative Grösse der Typografie> Flexible Grösse der Bilder
  12. 12. RESPONSIVE DESIGN.Das Layout passt sich dem Ausgabegerät an.Beispiel:
  13. 13. RESPONSIVE DESIGN.
  14. 14. RESPONSIVE DESIGN.Der Ansatz: Mobile First / Tablet First> Weniger ist mehr> Wachsende mobile Nutzung> Verzicht auf unwesentliche Informationen> Optisch angenehm reduziertes Design> Einheitlicher Aufbau
  15. 15. RESPONSIVE DESIGN. Livetest: http://mattkersley.com/responsive/> Masse des Displays> Auflösungen> Format / Betrachtungswinkel (hoch/quer)> Eingabemöglichkeiten wie Tastatur, Maus, Finger und Sprache
  16. 16. RESPONSIVE DESIGN. „Was heisst das für Sie?“ Visuell / Inhaltlich > Wie gehen wir mit den Geräten um? > Wie gehen wir mit der Benutzersituation um? > Herausforderungen an das Layout? > Herausforderungen an den Inhalt? > Herausforderungen an das Konzept?
  17. 17. RESPONSIVE DESIGN. „Was erwartet der User?“ Design und Inhalt ist unabhängig > Usability – Maus vs. Finger > Bedürfnis an den Inhalt vs. Situation > Inhaltsdichte vs. Ausgabegerät > Zugänge (NL, Advertising, SM, etc.)
  18. 18. RESPONSIVE DESIGN. „Wann macht‘s Sinn?“ Responsive Design – Ja? > Einfache, überschaubare Seiten > Bei Relaunch von Seiten > Bei passenden Zielgruppen
  19. 19. RESPONSIVE DESIGN. „Wann wird es schwierig?“ Responsive Design – zu prüfen! > Bei sehr komplexen Seiten - eher schwierig > Bei reinem Facelifting - eher schwierig > Bei vielen grossflächigen Applikationsteilen > Bei vielen technischen Angaben die nicht fehlen dürfen > Bei unterschiedlichem Benutzerbedürfnis
  20. 20. RESPONSIVE DESIGN. „Vorteile im Überblick“ Responsive Design> Eine Webseite deckt mit verschiedenen Layouts alle Endgeräte ab > Kein zusätzlicher Aufwand bei Erstellung/Wartung separater Seiten (z.B. mobile Webseite) > Perfekte Grundlage für barrierefreies Design > Grundlage für eine gute Corporate Identity > Das responsive Design strukturiert die Inhalte automatisch
  21. 21. RESPONSIVE DESIGN. Beispiel: foodsense.is/
  22. 22. RESPONSIVE DESIGN. Beispiel: bostonglobe.com
  23. 23. CUSTOMER RELATIONSHIP MANAGEMENTELECTRONIC COMMERCEONLINE MARKETING VIELEN DANK! CS2 AG PLATINUM MEMBER TYPO3 ASSOCIATION MAGENTO GOLD PARTNER SUGAR SILVER PARTNER Gerbegässlein 1 | CH-4450 Sissach Feldeggstrasse 55 | CH-8008 Zürich Telefon: +41 61 333 22 22 Twitter: @CS2switzerland www.cs2.ch

×