Download pdf - Responsive Design - Vorgehen und Fallstricke

Transcript
Page 1: Responsive Design - Vorgehen und Fallstricke

Vorgehen und Fallstricke

Responsive Design

Page 2: Responsive Design - Vorgehen und Fallstricke

Marcel Zimmermann - Senior Konzepter

Wer?

www.cybay.de

@dicomar@cybaynewmedia

Page 3: Responsive Design - Vorgehen und Fallstricke

lese ich später

habe ich

gelesen

2012

1996

1996

Page 4: Responsive Design - Vorgehen und Fallstricke

lese ich später

habe ich

gelesen

2012

1996

1996

Page 5: Responsive Design - Vorgehen und Fallstricke

Bradfrostweb.com

Page 6: Responsive Design - Vorgehen und Fallstricke
Page 7: Responsive Design - Vorgehen und Fallstricke
Page 8: Responsive Design - Vorgehen und Fallstricke

Idee

Hürde

Erfolg

Page 9: Responsive Design - Vorgehen und Fallstricke

Hürden

Page 10: Responsive Design - Vorgehen und Fallstricke

Bücherschrank

Page 11: Responsive Design - Vorgehen und Fallstricke

Hürde 1

Page 12: Responsive Design - Vorgehen und Fallstricke

Universalität

Page 13: Responsive Design - Vorgehen und Fallstricke

Universalität

Page 14: Responsive Design - Vorgehen und Fallstricke

Bradfrostweb.com

Page 15: Responsive Design - Vorgehen und Fallstricke
Page 16: Responsive Design - Vorgehen und Fallstricke

Allgemeingültig?

Gibt es nicht noch den „Mobile“ UseCase?

Auflösungs- vs. Device-optimiert?

Muss nun alles „neu“ gemacht werden?

Page 17: Responsive Design - Vorgehen und Fallstricke

Hürde 2

Page 18: Responsive Design - Vorgehen und Fallstricke

Das Team

Page 19: Responsive Design - Vorgehen und Fallstricke

Das Team

Page 20: Responsive Design - Vorgehen und Fallstricke

Das Team

Page 21: Responsive Design - Vorgehen und Fallstricke

Produkt 1

Produktsuche

Startseite

Ich suche ein bestimmtes Produkt

Use Case

Page 22: Responsive Design - Vorgehen und Fallstricke

Produkt 1

Produktsuche

Startseite

Ich suche ein bestimmtes Produkt

Finde ich alleine eine Lösung?

FAQAnleitung

Ansprech-partner

Kontakt-formular

Use Case

Page 23: Responsive Design - Vorgehen und Fallstricke

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

Page 24: Responsive Design - Vorgehen und Fallstricke

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

Page 25: Responsive Design - Vorgehen und Fallstricke

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

Page 26: Responsive Design - Vorgehen und Fallstricke

Content

Related 1

Related 1

Related 1

Related 2

Related 2

Related 2

Related 2Content

Related 1

Lokale

Navigation

Haupt Navigation

Related 1

Page 27: Responsive Design - Vorgehen und Fallstricke

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

Page 28: Responsive Design - Vorgehen und Fallstricke

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

Page 29: Responsive Design - Vorgehen und Fallstricke

Der Teufel imDetail

Page 30: Responsive Design - Vorgehen und Fallstricke

Related 2

Related 2Content

Related 1

Lokale

Navigation

Haupt Navigation

Related 1

Page 31: Responsive Design - Vorgehen und Fallstricke

Related 2

Related 2Content

Related 1

Lokale

Navigation

Haupt Navigation

Related 1

Page 32: Responsive Design - Vorgehen und Fallstricke

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

Page 33: Responsive Design - Vorgehen und Fallstricke

Related 2

Related 2Content

Related 1

Lokale

Navigation

Haupt Navigation

Related 1

Page 34: Responsive Design - Vorgehen und Fallstricke

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

Page 35: Responsive Design - Vorgehen und Fallstricke

Related 2 Related 2

Content

Related 1

Lokale

Navigation

Haupt Navigation

Related 1

Related 1

Page 36: Responsive Design - Vorgehen und Fallstricke

Related 2 Related 2

Content

Related 1

Lokale

Navigation

Haupt Navigation

Related 1

Related 1

Page 37: Responsive Design - Vorgehen und Fallstricke

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

Page 38: Responsive Design - Vorgehen und Fallstricke

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

Page 39: Responsive Design - Vorgehen und Fallstricke

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

Page 40: Responsive Design - Vorgehen und Fallstricke

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

Page 41: Responsive Design - Vorgehen und Fallstricke

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

Page 42: Responsive Design - Vorgehen und Fallstricke

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

Page 43: Responsive Design - Vorgehen und Fallstricke
Page 44: Responsive Design - Vorgehen und Fallstricke
Page 45: Responsive Design - Vorgehen und Fallstricke
Page 46: Responsive Design - Vorgehen und Fallstricke

Konzeption

TechnikDesign

Team

Page 47: Responsive Design - Vorgehen und Fallstricke

Hürde 3

Page 48: Responsive Design - Vorgehen und Fallstricke

DasPrototyping

Page 49: Responsive Design - Vorgehen und Fallstricke

Was ist ein Prototyp?(es zeigt) "die Darstellung [...] des

Systems, welche [...] für eine Beurteilung

verwendet werden kann." 

Page 50: Responsive Design - Vorgehen und Fallstricke

PrototypingRapid Prototyping

Visuelles Rapid Prototyping

Visuelles Responsive Rapid Prototyping

ok.. wie machen wir

das?

Page 51: Responsive Design - Vorgehen und Fallstricke

HTMLAxurePaper

Page 52: Responsive Design - Vorgehen und Fallstricke

geht schnellkostet wenig

dauert langekostet viel

Simulation User Flow

Page 53: Responsive Design - Vorgehen und Fallstricke

geht schnellist genau

dauert lange ungenau

Simulation View Port

Page 54: Responsive Design - Vorgehen und Fallstricke

geht schnellist genau

dauert lange ungenau

Simulation View Port

Page 55: Responsive Design - Vorgehen und Fallstricke

geht schnellist genau

dauert lange ungenau

Simulation View Port

Page 56: Responsive Design - Vorgehen und Fallstricke

geht schnellist genau

dauert lange ungenau

Simulation View Port

Page 57: Responsive Design - Vorgehen und Fallstricke

Simulation „Verhalten“„echtes“ Verhalten

Daumenkino

Page 58: Responsive Design - Vorgehen und Fallstricke

Simulation „Verhalten“„echtes“ Verhalten

Daumenkino

Page 59: Responsive Design - Vorgehen und Fallstricke

Simulation „Verhalten“„echtes“ Verhalten

Daumenkino

Page 60: Responsive Design - Vorgehen und Fallstricke

Simulation „Verhalten“„echtes“ Verhalten

Daumenkino

Page 61: Responsive Design - Vorgehen und Fallstricke

Simulation „Verhalten“„echtes“ Verhalten

Daumenkino

Page 62: Responsive Design - Vorgehen und Fallstricke

Werkzeuge

Page 63: Responsive Design - Vorgehen und Fallstricke
Page 64: Responsive Design - Vorgehen und Fallstricke

Simulation „Verhalten“-Feedback

Page 65: Responsive Design - Vorgehen und Fallstricke

Column Drop Layout Shift

Patterns

gleiches Markup

doppeltes Markup

Page 66: Responsive Design - Vorgehen und Fallstricke

Column Drop & Layout Shift

Page 67: Responsive Design - Vorgehen und Fallstricke

Column Drop & Layout Shift

Page 68: Responsive Design - Vorgehen und Fallstricke

Layout Shift

Page 69: Responsive Design - Vorgehen und Fallstricke

Layout Shift

Page 70: Responsive Design - Vorgehen und Fallstricke

Layout Shift

Page 71: Responsive Design - Vorgehen und Fallstricke

Layout Shift

Page 72: Responsive Design - Vorgehen und Fallstricke

Layout Shift

Page 73: Responsive Design - Vorgehen und Fallstricke

Layout Shift

Page 74: Responsive Design - Vorgehen und Fallstricke

Es ist eine Momentaufnahme

Page 75: Responsive Design - Vorgehen und Fallstricke

Hindernisseüberwinden!

Page 76: Responsive Design - Vorgehen und Fallstricke

Was wir brauchenRelativität zum eigenen Wissen

Relativität zur eigenen Rolle

Visuell mit technisch korrekter

Sprache

mobile first, coding first

Merken


Recommended

Updated: Fiese Fallstricke, sexy Strategien
Updated: Fiese Fallstricke, sexy Strategien Technology
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis
Responsive Multichannel-E-Commerce: Vorgehen und Learnings aus der Praxis Presentations & Public Speaking
Vorgehen bei der Unternehmensbewertung
Vorgehen bei der Unternehmensbewertung Documents
Start-Up im E-Commerce- Rechtliche Fallstricke beachten!
Start-Up im E-Commerce- Rechtliche Fallstricke beachten! Business
Vorgehen im Softwareentwicklungsprozess · Vorgehen im Softwareentwicklungsprozess Systemspezifikation Hierzu gehört die systematische Untersuchun- gen der Gegebenheiten des Anwendungsgebiets,
Vorgehen im Softwareentwicklungsprozess · Vorgehen im Softwareentwicklungsprozess Systemspezifikation Hierzu gehört die systematische Untersuchun- gen der Gegebenheiten des Anwendungsgebiets, Documents
Fallstricke beim Bauen und Sanieren
Fallstricke beim Bauen und Sanieren Documents
Fallstricke im DatennetzEbneter
Fallstricke im DatennetzEbneter Documents
Checkliste: Methodisches Vorgehen beim Einzelunterricht...Checkliste: Methodisches Vorgehen beim Einzelunterricht Wir beim Learning Institute unterrichten professionell Professioneller
Checkliste: Methodisches Vorgehen beim Einzelunterricht...Checkliste: Methodisches Vorgehen beim Einzelunterricht Wir beim Learning Institute unterrichten professionell Professioneller Documents
Vorgehen des ersteintreffenden Rettungsmittels bei ... · FRRP Fortbildung Rettungsdienst Rheinland Pfalz schnell – kompetent -mitmenschlich Vorgehen des ersteintreffenden Rettungsmittels
Vorgehen des ersteintreffenden Rettungsmittels bei ... · FRRP Fortbildung Rettungsdienst Rheinland Pfalz schnell – kompetent -mitmenschlich Vorgehen des ersteintreffenden Rettungsmittels Documents
Vorgehen zur Erstellung eines lauffähigen C-Programmskrre0001/MCT_Labor/PAP_Tutorial_und_Uebung.pdf · Programmablaufpläne Vorgehen zur Erstellung eines lauffähigen C-Programms
Vorgehen zur Erstellung eines lauffähigen C-Programmskrre0001/MCT_Labor/PAP_Tutorial_und_Uebung.pdf · Programmablaufpläne Vorgehen zur Erstellung eines lauffähigen C-Programms Documents
Lösungsfokussiertes vorgehen in schulen
Lösungsfokussiertes vorgehen in schulen Documents
Social-Media-Praxis: Monitoring und rechtliche Fallstricke
Social-Media-Praxis: Monitoring und rechtliche Fallstricke Technology
Mädchenorientiertes Interaktionsdesign – Fallstricke und Chancen
Mädchenorientiertes Interaktionsdesign – Fallstricke und Chancen Science
Fallstricke und Meilensteine - Interdisziplinäre eHealth ... · Fallstricke und Meilensteine - Interdisziplinäre eHealth-Projekte FH Prof. DI Dr Stefan Sauermann Fachhochschule
Fallstricke und Meilensteine - Interdisziplinäre eHealth ... · Fallstricke und Meilensteine - Interdisziplinäre eHealth-Projekte FH Prof. DI Dr Stefan Sauermann Fachhochschule Documents
Von der Idee zur Umsetzung Fallstricke beim Erwerb oder ... · Von der Idee zur Umsetzung Fallstricke beim Erwerb oder Verkauf einer Leitstelle Inhaltsverzeichnis Seite ... welche
Von der Idee zur Umsetzung Fallstricke beim Erwerb oder ... · Von der Idee zur Umsetzung Fallstricke beim Erwerb oder Verkauf einer Leitstelle Inhaltsverzeichnis Seite ... welche Documents
Enterprise Search: Potenziale und Fallstricke
Enterprise Search: Potenziale und Fallstricke Technology
Architektur agiles vorgehen seacon 2013
Architektur agiles vorgehen seacon 2013 Technology
Fallstricke und Nutzen bei der Kodierung von
Fallstricke und Nutzen bei der Kodierung von Documents