Wir brauchen einen neuen Workflow

Wir brauchen einen neuen Workflow. Die getrennte Arbeit von Designern und Frontendentwicklern geht an der Realität vorbei. Heute müssen sich Webseiten ihrer Umgebung noch stärker anpassen, als sie es grundsätzlich sollten. Das erzeugt technische und designerische Probleme. Beide sollten zusammen gelöst werden.

Transcript

1. Wir brauchen einen
   neuen Workflow
   Jens Grochtdreis
   

   View Slide

2. ‣Frontendentwickler
   ‣seit 1999 Arbeit im und fürs Web
   ‣seit 2009 selbständig
   ‣Frontendentwicklung
   ‣Schulung
   ‣Beratung
   ‣@Flocke
   

   View Slide

3. Das Web ist per se flexibel
   

   View Slide

4. Unflexibel und unzugänglich
   wird es erst durch unsere
   Entscheidungen!
   

   View Slide

5. http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png
   

   View Slide

6. http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png
   

   View Slide

7. http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
   

   View Slide

8. Das Endprodukt eines
   Frontendentwicklers ist nur
   ein Zwischenprodukt.
   

   View Slide

9. Wir wissen nicht, in welcher
   Umgebung und in welcher Form
   unser Endprodukt konsumiert wird.
   

   View Slide

10. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
    

    View Slide

11. Für Projektmanager und
    Designer ist das
    unvorstellbar.
    

    View Slide

12. http://www.flickr.com/photos/wanhoff/356677564/
    Photoshop und Word haben
    immer EIN Endprodukt.
    

    View Slide

13. Wir haben viele
    Endprodukte
    http://www.flickr.com/photos/danm_cool/3163625498/
    

    View Slide

14. Frontendentwicklung ist
    nicht einfach!
    http://failblog.files.wordpress.com/2009/07/128932678618285916.jpg
    

    View Slide

15. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
    

    View Slide

16. Unser Workflow ist falsch!
    

    View Slide

17. Kunde
    Beratung
    Konzept
    Design
    Frontend
    Backend
    

    View Slide

18. Das passt nicht zu einem
    flexiblen Umfeld
    

    View Slide

19. Photoshop ist nicht für
    Webdesign geeignet.
    

    View Slide

20. Es war es nie!
    

    View Slide

21. Keine Bildbearbeitung ist
    dafür geeignet.
    

    View Slide

22. Bildbearbeitungen sind zum
    Bilder bearbeiten da!
    

    View Slide

23. Designer und Entwickler
    müssen enger
    zusammenarbeiten
    

    View Slide

24. Ein gemeinsames Team
    

    View Slide

25. In Einzelphasen zusammen
    am Rechner
    

    View Slide

26. Photoshop ist für erste
    Designideen und für die
    Erstellung von Modulen
    

    View Slide

27. Die Designs werden im Browser
    in Zusammenarbeit mit dem
    Frontendentwickler finalisiert.
    

    View Slide

28. Abnahme nicht über ein Bild
    aus Photoshop sondern
    anhand eines Prototypen
    

    View Slide

29. Anhand der Prototypen kann man
    schnell Entscheidungen treffen, die
    mit Photoshop lange dauern.
    

    View Slide

30. ‣ Unterschiedliche Schriftgrößen und -arten
    austesten
    ‣ Breakpoints für unterschiedliche
    Ausgabebreiten testen
    ‣ Webfonts auf unterschiedlichen Systemen
    testen
    ‣ Alternativen für alte Browser ausprobieren
    ‣ Icons als SVG oder Webfonts
    

    View Slide

31. http://jsfiddle.net/Flocke/azvGv/
    CSS3-fähiger Browser IE8
    Alternativen testen
    

    View Slide

32. Nicht wie üblich zwei
    unterschiedliche Designs
    zum Kunden geben!
    

    View Slide

33. Iterationen eines Designs:
    alte vs. neue Browser und
    unterschiedliche Devices
    

    View Slide

34. Damit das effektiv
    funktioniert empfehle ich
    Frontend-Frameworks
    

    View Slide

35. http://www.yaml.de/
    

    View Slide

36. http://foundation.zurb.com/
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. Eigene Module sammeln und
    Baukästen erstellen
    

    View Slide

41. http://www.flickr.com/photos/artrock2006/4177475479/
    Alle Beteiligten sollten frühzeitig
    offen kommunizieren.
    http://www.flickr.com/photos/artrock2006/4177475479/
    

    View Slide

42. Nicht einfach Befehle empfangen.
    http://www.flickr.com/photos/soldiersmediacenter/3521607551/
    

    View Slide

43. Voneinander lernen!
    

    View Slide

44. Es heißt http:// nicht psd:// !
    

    View Slide

45. Jens Grochtdreis
    http://grochtdreis.de
    http://twitter.com/Flocke
    http://webkrauts.de
    http://slideshare.net/Flocke669
    Diese Präsentation steht unter
    der Creative Commons Lizenz
    „Attribution-ShareAlike 2.0“
    http://creativecommons.org/licenses/by-sa/2.0/de/
    

    View Slide