Agile Responsive Design Workflows

RESPONSIVE DESIGNVORTEILE

AGILE RESPONSIVE DESIGN WORKFLOWSWebmontag 28.09.2015

UNSERE ROLLE IM KLASSISCHEM PROJEKT

PRÄSENTIERTES LAYOUT FÜR DIE UMSETZUNG

PSD DATEIEN FÜR IPHONE, IPAD UND DESKTOP

IPHONE? –NATÜRLICH SMARTPHONE

< ? >

WAS PASSIERT ZWISCHEN DEN PSD DATEIEN?

WIREFRAMES UND PSDsSIND NICHT RESPONSIVE

METHODE #1:WEBKONZEPTIONIM BROWSER

KLASSISCHE ABLÄUFE VERZERREN DIE ERWARTUNG

WEBKONZEPTION IM BROWSER

PRO UND CONTRA

VORTEILE

• Beteiligte  können  das  Ergebnis  direkt  erleben• PSD  Layouts  sind  keine  Referenz• Der  Prototyp  kann  direkt  getestet  werden• Umsetzungsprobleme  werden  in  der  Konzeption  erkannt• Änderungen  lassen  sich  schnell  umsetzen

NACHTEILE

• Frontend  Expertise  wird  benötigt• Keine  Darstellungssicherheit• Funktionsumfang  täuscht• Komplexe  Module  sind  Zeitaufwendig• Bindet  Ressourcen

WHY WIREFRAME IN THE BROWSER? "I WANT EVERYONE TO BE CONFRONTED BY THE REALITY OF THE BROWSER AS SOON AS POSSIBLE."

- STEPHEN HAYThe Hay Stack

RAPID PROTOTYPING IN CODE

ZURB FOUNDATION

TWITTER BOOTSTRAP

SUZY GRIDSYSTEM

SASS

LESS

HANDLEBAR.JS

Können wir den Call 2 Action Button nicht Grün machen?

- IRGENDEIN KUNDEKurz vor der Deadline

BEI 5 SEITENLAYOUTSUND 4 VIEWPORTSSIND DAS 20 ÄNDERUNGEN

.call2action {background-color: #00ff00;

}

DENKE IN KOMPONENTENUND MODULEN

METHODE #2:NUTZE PATTERN UNDLIVING STYLE GUIDES

ATOMIC DESIGN BY BRAD FROST

ATOMIC DESIGN BY BRAD FROST

Elemente Komponenten Module Layouts Seiten

DEMO

RESPONSIVE DESIGN IST EIN

TEAMSPORT

METHODE #3:ARBEITE IM INTERDISZIPLINÄREN TEAM

KLASSISCHER PROJEKTVERLAUF

HÄUFIGER KOMMUNIKATIONSABLAUF

WIR BRAUCHEN EIN INTERDISZIPLINÄRES TEAM

METHODE #4:ITERATIVE UMSETZUNG

KLASSISCHER PROJEKTVERLAUF

AGILER PROJEKTVERLAUF

DER KUNDE IST TEIL DES TEAMS

METHODE #5:VERSTEHE PATTERNLAB UND DOKUMENTATION ALS LIEFERGEGENSTAND

KLASSISCHE PLANUNG LIEFERT PRO STUFE ERGEBNISSE

IM AGILEN VERLAUF WERDEN TEILERGEBNISSE ERZIELT

ERST AM ENDE GIBT ES „FINALE“ LIEFERGEGENSTÄNDE

EIN PROTOTYP BLEIBTEIN PROTOTYP

• Code  Review• Framework  Optimierung• Performance  Optimierung• Server  Side  Components• Generelle  QA• Finale  Unit  Tests• Real  Device  Testing• Technische  Dokumentation

DER FEINSCHLIFF

pbi planungsbüro INTERNET  GmbHPhillip  Buschhüter@pbim

http://planungsbuero.de

[email protected]

VIELEN DANK