Responsive Design - Vorgehen und Fallstricke

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