Einführung | Früher/Heute | Multiscreen | Nutzungsszenario | Responsive Design

CMS|SESSION.

Responsive Design | Fluid | Mobile.

Dani Kalt CEO

#CS2session

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

RESPONSIVE DESIGN.

Heute...

…existiert eine Vielzahl an

Bildschirmauflösungen – eine

Situation mit einschneidenden

Konsequenzen.

… nicht mehr nur Quer- sondern

immer mehr Hochformat.

RESPONSIVE DESIGN.

Multi Screen Situation – Das Web ist überall.

von 240x320px

bis 2280x1800px

480x320px

960x640px

1024x788px

2048x1536px 1280x720px

4:3

16:9

1920x1080px

RESPONSIVE DESIGN.

Doch das ist noch nicht alles...

…nebst den Multiscreens gibt es

auch die Nutzungs-Szenarien:

RESPONSIVE DESIGN.

Nutzungs-Szenarien.

RESPONSIVE DESIGN.

Nutzungs-Szenarien.

„Device-Hopper“

Benutzer wechselt die Geräte innerhalb eines Tages mehrfach.

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-Struktur, welche sich an die Vielfalt der Auflösungen

von Endgeräten anpasst.

RESPONSIVE DESIGN.

Grundprinzipien...

> Flexibles Raster

> Variable Anzeige von Inhalten

> Anpassung der Navigationselemente

> Relative Grösse der Typografie

> Flexible Grösse der Bilder

RESPONSIVE DESIGN.

Beispiel:

Das Layout passt sich dem Ausgabegerät an.

RESPONSIVE DESIGN.

> Weniger ist mehr

> Wachsende mobile Nutzung

> Verzicht auf unwesentliche Informationen

> Optisch angenehm reduziertes Design

> Einheitlicher Aufbau

Der Ansatz: Mobile First / Tablet First

RESPONSIVE DESIGN.

RESPONSIVE DESIGN.

Livetest: http://mattkersley.com/responsive/

> Masse des Displays

> Auflösungen

> Format / Betrachtungswinkel (hoch/quer)

> Eingabemöglichkeiten wie

Tastatur, Maus, Finger und Sprache

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?

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.)

RESPONSIVE DESIGN.

„Wann macht‘s Sinn?“

Responsive Design – Ja?

> Einfache, überschaubare Seiten

> Bei Relaunch von Seiten

> Bei passenden Zielgruppen

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

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

RESPONSIVE DESIGN.

Beispiel: foodsense.is/

RESPONSIVE DESIGN.

Beispiel: bostonglobe.com

VIELEN DANK!

CS2 AG

PLATINUM MEMBER TYPO3 ASSOCIATION

MAGENTO GOLD PARTNER

SUGAR SILVER PARTNER

CUSTOMER RELATIONSHIP MANAGEMENT

ELECTRONIC COMMERCE

ONLINE MARKETING

Gerbegässlein 1 | CH-4450 Sissach

Feldeggstrasse 55 | CH-8008 Zürich

Telefon: +41 61 333 22 22

Twitter: @CS2switzerland

www.cs2.ch