Vorgehen und Fallstricke
Responsive Design
Marcel Zimmermann - Senior Konzepter
Wer?
www.cybay.de
@dicomar@cybaynewmedia
lese ich später
habe ich
gelesen
2012
1996
1996
lese ich später
habe ich
gelesen
2012
1996
1996
Bradfrostweb.com
Idee
Hürde
Erfolg
Hürden
Bücherschrank
Hürde 1
Universalität
Universalität
Bradfrostweb.com
Allgemeingültig?
Gibt es nicht noch den „Mobile“ UseCase?
Auflösungs- vs. Device-optimiert?
Muss nun alles „neu“ gemacht werden?
Hürde 2
Das Team
Das Team
Das Team
Produkt 1
Produktsuche
Startseite
Ich suche ein bestimmtes Produkt
Use Case
Produkt 1
Produktsuche
Startseite
Ich suche ein bestimmtes Produkt
Finde ich alleine eine Lösung?
FAQAnleitung
Ansprech-partner
Kontakt-formular
Use Case
Produkt 1
Produktsuche
Startseite
Es ist 22h, bitte per Mail oder Rückruf
Ich suche ein bestimmtes Produkt
Finde ich alleine eine Lösung?
FAQAnleitung
Ansprech-partner
Kontakt-formular
Use Case
Produkt 1
Produktsuche
Startseite
Es ist 22h, bitte per Mail oder Rückruf
Ich suche ein bestimmtes Produkt
Ich bin unterwegs und brauche eine Lösung zum
Produkt
Login meineProdukte Finde ich alleine
eine Lösung?
FAQAnleitung
Ansprech-partner
Kontakt-formular
Use Case
Produkt 1
Produktsuche
Startseite
Es ist 22h, bitte per Mail oder Rückruf
Ich suche ein bestimmtes Produkt
Ich bin unterwegs und brauche eine Lösung zum
Produkt
Login meineProdukte Finde ich alleine
eine Lösung?
FAQAnleitung
Ansprech-partner
Kontakt-formular
Use Case
Content
Related 1
Related 1
Related 1
Related 2
Related 2
Related 2
Related 2Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Content
Related 1
Related 1
Related 1
Related 2
Related 2
Kontakt-formular
FAQAnleitung
Ansprech-partner
Related 2
Related 2Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 2
Related 2Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Lokale Navigation
Related 2
Related 2
Content
Related 1
Haupt Navigation
Related 1
Quick Navigation
Der Teufel imDetail
Related 2
Related 2Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 2
Related 2Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 2
Related 2Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Lokale Navigation
Related 2
Related 2
Content
Related 1
Haupt Navigation
Related 1
Quick Navigation
Related 2
Related 2Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 2 Related 2
Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 1
Related 2
Related 2Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 2 Related 2
Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 1
Related 2 Related 2
Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 1
Related 2 Related 2
Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 1
Lokale Navigation
Related 2
Related 2
Content
Related 1
Haupt Navigation
Related 1
Related 1
Quick Navigation
Related 2
Related 2 Related 2
Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 1
Lokale Navigation
Related 2
Related 2
Content
Related 1
Haupt Navigation
Related 1
Related 1
Quick Navigation
Related 2
x
Related 2 Related 2
Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 1
Lokale Navigation
Related 2
Related 2
Content
Related 1
Haupt Navigation
Related 1
Related 1
Quick Navigation
Related 2
x
Related 2 Related 2
Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 1
Related 2
Lokale Navigation
Related 2
Related 2
Content
Related 1
Haupt Navigation
Related 1
Related 1
Quick Navigation
Related 2
x
Related 2 Related 2
Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 1
Related 2
Lokale Navigation
Related 2
Related 2
Content
Related 1
Haupt Navigation
Related 1
Related 1
Quick Navigation
Related 2
x
Related 2 Related 2
Content
Related 1
Lokale
Navigation
Haupt Navigation
Related 1
Related 1
Related 2
Lokale Navigation
Related 2
Related 2
Content
Related 1
Haupt Navigation
Related 1
Related 1
Quick Navigation
Related 2
Lokale Navigation
Related 2
Related 2
Content
Related 1
Haupt Navigation
Related 1
Related 1
Quick Navigation
Related 2
x
Konzeption
TechnikDesign
Team
Hürde 3
DasPrototyping
Was ist ein Prototyp?(es zeigt) "die Darstellung [...] des
Systems, welche [...] für eine Beurteilung
verwendet werden kann."
PrototypingRapid Prototyping
Visuelles Rapid Prototyping
Visuelles Responsive Rapid Prototyping
ok.. wie machen wir
das?
HTMLAxurePaper
geht schnellkostet wenig
dauert langekostet viel
Simulation User Flow
geht schnellist genau
dauert lange ungenau
Simulation View Port
geht schnellist genau
dauert lange ungenau
Simulation View Port
geht schnellist genau
dauert lange ungenau
Simulation View Port
geht schnellist genau
dauert lange ungenau
Simulation View Port
Simulation „Verhalten“„echtes“ Verhalten
Daumenkino
Simulation „Verhalten“„echtes“ Verhalten
Daumenkino
Simulation „Verhalten“„echtes“ Verhalten
Daumenkino
Simulation „Verhalten“„echtes“ Verhalten
Daumenkino
Simulation „Verhalten“„echtes“ Verhalten
Daumenkino
Werkzeuge
Simulation „Verhalten“-Feedback
Column Drop Layout Shift
Patterns
gleiches Markup
doppeltes Markup
Column Drop & Layout Shift
Column Drop & Layout Shift
Layout Shift
Layout Shift
Layout Shift
Layout Shift
Layout Shift
Layout Shift
Es ist eine Momentaufnahme
Hindernisseüberwinden!
Was wir brauchenRelativität zum eigenen Wissen
Relativität zur eigenen Rolle
Visuell mit technisch korrekter
Sprache
mobile first, coding first
Merken