Responsive Design | Fluid | Mobile
-
date post
22-Oct-2014 -
Category
Documents
-
view
2.587 -
download
5
description
Transcript of Responsive Design | Fluid | Mobile
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