agile responsive design workflows
TRANSCRIPT
![Page 1: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/1.jpg)
RESPONSIVE DESIGNVORTEILE
AGILE RESPONSIVE DESIGN WORKFLOWSWebmontag 28.09.2015
![Page 2: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/2.jpg)
UNSERE ROLLE IM KLASSISCHEM PROJEKT
![Page 3: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/3.jpg)
PRÄSENTIERTES LAYOUT FÜR DIE UMSETZUNG
![Page 4: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/4.jpg)
PSD DATEIEN FÜR IPHONE, IPAD UND DESKTOP
![Page 5: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/5.jpg)
IPHONE? –NATÜRLICH SMARTPHONE
![Page 6: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/6.jpg)
< ? >
WAS PASSIERT ZWISCHEN DEN PSD DATEIEN?
![Page 7: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/7.jpg)
WIREFRAMES UND PSDsSIND NICHT RESPONSIVE
![Page 8: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/8.jpg)
METHODE #1:WEBKONZEPTIONIM BROWSER
![Page 9: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/9.jpg)
KLASSISCHE ABLÄUFE VERZERREN DIE ERWARTUNG
![Page 10: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/10.jpg)
WEBKONZEPTION IM BROWSER
![Page 11: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/11.jpg)
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
![Page 12: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/12.jpg)
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
![Page 13: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/13.jpg)
RAPID PROTOTYPING IN CODE
ZURB FOUNDATION
TWITTER BOOTSTRAP
SUZY GRIDSYSTEM
SASS
LESS
HANDLEBAR.JS
![Page 14: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/14.jpg)
Können wir den Call 2 Action Button nicht Grün machen?
- IRGENDEIN KUNDEKurz vor der Deadline
![Page 15: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/15.jpg)
BEI 5 SEITENLAYOUTSUND 4 VIEWPORTSSIND DAS 20 ÄNDERUNGEN
![Page 16: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/16.jpg)
.call2action {background-color: #00ff00;
}
![Page 17: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/17.jpg)
DENKE IN KOMPONENTENUND MODULEN
![Page 18: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/18.jpg)
METHODE #2:NUTZE PATTERN UNDLIVING STYLE GUIDES
![Page 19: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/19.jpg)
ATOMIC DESIGN BY BRAD FROST
![Page 20: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/20.jpg)
ATOMIC DESIGN BY BRAD FROST
Elemente Komponenten Module Layouts Seiten
![Page 21: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/21.jpg)
DEMO
![Page 22: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/22.jpg)
RESPONSIVE DESIGN IST EIN
TEAMSPORT
![Page 23: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/23.jpg)
METHODE #3:ARBEITE IM INTERDISZIPLINÄREN TEAM
![Page 24: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/24.jpg)
KLASSISCHER PROJEKTVERLAUF
![Page 25: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/25.jpg)
HÄUFIGER KOMMUNIKATIONSABLAUF
![Page 26: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/26.jpg)
WIR BRAUCHEN EIN INTERDISZIPLINÄRES TEAM
![Page 27: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/27.jpg)
METHODE #4:ITERATIVE UMSETZUNG
![Page 28: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/28.jpg)
KLASSISCHER PROJEKTVERLAUF
![Page 29: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/29.jpg)
AGILER PROJEKTVERLAUF
![Page 30: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/30.jpg)
DER KUNDE IST TEIL DES TEAMS
![Page 31: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/31.jpg)
METHODE #5:VERSTEHE PATTERNLAB UND DOKUMENTATION ALS LIEFERGEGENSTAND
![Page 32: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/32.jpg)
KLASSISCHE PLANUNG LIEFERT PRO STUFE ERGEBNISSE
![Page 33: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/33.jpg)
IM AGILEN VERLAUF WERDEN TEILERGEBNISSE ERZIELT
![Page 34: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/34.jpg)
ERST AM ENDE GIBT ES „FINALE“ LIEFERGEGENSTÄNDE
![Page 35: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/35.jpg)
EIN PROTOTYP BLEIBTEIN PROTOTYP
![Page 36: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/36.jpg)
• Code Review• Framework Optimierung• Performance Optimierung• Server Side Components• Generelle QA• Finale Unit Tests• Real Device Testing• Technische Dokumentation
DER FEINSCHLIFF
![Page 38: Agile Responsive Design Workflows](https://reader030.vdocuments.mx/reader030/viewer/2022020108/58d0c6401a28ab866c8b5779/html5/thumbnails/38.jpg)
VIELEN DANK