responsive design | fluid | mobile
Post on 22-Oct-2014
2.581 views
DESCRIPTION
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)TRANSCRIPT
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