Das Dokument behandelt die Prinzipien und Herausforderungen des Responsive Designs, das sich an die Vielfalt der Bildschirmauflösungen und Nutzungsszenarien anpasst. Es werden Vorzüge wie die Vereinheitlichung von Layouts für verschiedene Endgeräte und die Verbesserung der Benutzerfreundlichkeit hervorgehoben. Zudem wird auf die Notwendigkeit eingegangen, Design und Inhalt an die Nutzungssituation der Benutzer anzupassen.

1. CMS|SESSION.
Responsive Design | Fluid | Mobile.
Dani Kalt
CEO
Einführung | Früher/Heute | Multiscreen | Nutzungsszenario | Responsive Design #CS2session

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. RESPONSIVE DESIGN.
Heute...
…existiert eine Vielzahl an
Bildschirmauflösungen – eine
Situation mit einschneidenden
Konsequenzen.
… nicht mehr nur Quer- sondern
immer mehr Hochformat.

4. RESPONSIVE DESIGN.
Multi Screen Situation – Das Web ist überall.
960x640px 4:3
1024x788px
16:9
2048x1536px 1280x720px
480x320px von 240x320px
1920x1080px bis 2280x1800px

5. RESPONSIVE DESIGN.
Doch das ist noch nicht alles...
…nebst den Multiscreens gibt es
auch die Nutzungs-Szenarien:

6. RESPONSIVE DESIGN.
Nutzungs-Szenarien.

7. RESPONSIVE DESIGN.
Nutzungs-Szenarien.
„Device-Hopper“
Benutzer wechselt die Geräte innerhalb eines Tages mehrfach.

8. RESPONSIVE DESIGN.
Quelle: http://www.multiscreen-experience.com/?page_id=56

9. RESPONSIVE DESIGN.
Mobile Internetnutzung auf dem Vormarsch.
„44% der Schweizer Web-User surften 2011 im mobilen Web“

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. RESPONSIVE DESIGN.
Grundprinzipien...
> Flexibles Raster
> Variable Anzeige von Inhalten
> Anpassung der Navigationselemente
> Relative Grösse der Typografie
> Flexible Grösse der Bilder

12. RESPONSIVE DESIGN.
Das Layout passt sich dem Ausgabegerät an.
Beispiel:

13. RESPONSIVE DESIGN.

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. 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. 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. 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. RESPONSIVE DESIGN.
„Wann macht‘s Sinn?“
Responsive Design – Ja?
> Einfache, überschaubare Seiten
> Bei Relaunch von Seiten
> Bei passenden Zielgruppen

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. 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. RESPONSIVE DESIGN.
Beispiel: foodsense.is/

22. RESPONSIVE DESIGN.
Beispiel: bostonglobe.com

23. CUSTOMER RELATIONSHIP MANAGEMENT
ELECTRONIC COMMERCE
ONLINE 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