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)

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