Wir brauchen einen neuen Workflow - Langform

Langform des Vortrages auf dem Webmontag in Kassel. So werden einige Inhalte erst richtig deutlich.

Transcript

1. Wir brauchen einen
   neuen Workflow
   Jens Grochtdreis
   

   View Slide

2. ‣Kasselaner - seit 1988 in Mainz
   ‣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.
   http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
   

   View Slide

10. http://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/PapierformateA0bisA8.jpg/1280px-PapierformateA0bisA8.jpg
    Für Projektmanager und
    Designer ist das unvorstellbar.
    

    View Slide

11. Für Frontendentwickler
    ist das normal!
    http://www.flickr.com/photos/danm_cool/3163625498/
    

    View Slide

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

    View Slide

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

    View Slide

14. ‣ Welcher Breakpoint ist für das Design richtig?
    ‣ Sollen/können Bilder und Videos für spezielle
    Breakpoints geliefert werden?
    ‣ Welche Inhalte beeinträchtigen die Ladezeit?
    ‣ Existiert responsive Werbung?
    ‣ Sind alle Links einfach mit dem Finger
    bedienbar?
    ‣ Gibt es Interaktion, die auf „hover“ basiert?
    

    View Slide

15. Unser Workflow ist falsch!
    

    View Slide

16. Kunde
    Beratung
    Konzept
    Design
    Frontend
    Backend
    

    View Slide

17. Nicht einfach Befehle empfangen.
    http://www.flickr.com/photos/soldiersmediacenter/3521607551/
    Frontend
    Projektmanagement
    

    View Slide

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

    View Slide

19. Das passt nicht zu einem
    flexiblen Umfeld
    

    View Slide

20. Photoshop ist nicht für
    Webdesign geeignet.
    

    View Slide

21. http://icant.co.uk/talks/h5/pictures/jqueryeu/nokia-zombie-hammer.jpg
    Es war es nie!
    

    View Slide

22. Es war es nie!
    

    View Slide

23. Keine Bildbearbeitung ist
    dafür geeignet.
    

    View Slide

24. Bildbearbeitungen sind zum
    Bilder bearbeiten da!
    

    View Slide

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

    View Slide

26. Designer und Entwickler
    müssen enger
    zusammenarbeiten
    

    View Slide

27. http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg
    Ein Team!
    

    View Slide

28. In Einzelphasen zusammen
    am Rechner
    

    View Slide

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

    View Slide

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

    View Slide

31. View Slide

32. http://daverupert.com/2013/04/responsive-deliverables/
    

    View Slide

33. View Slide

34. Style Tiles
    

    View Slide

35. http://styletil.es/
    

    View Slide

36. http://styletil.es/
    

    View Slide

37. http://styletil.es/
    

    View Slide

38. http://styletil.es/
    

    View Slide

39. http://styletil.es/
    

    View Slide

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

    View Slide

41. Der Browser steht im
    Zentrum, nicht Photoshop!
    

    View Slide

42. Am Ende soll eine Seite im
    Browser laufen, nicht in
    Photoshop!
    

    View Slide

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

    View Slide

44. http://jsfiddle.net/Flocke/azvGv/
    CSS3-fähiger Browser IE8
    

    View Slide

45. Ein möglicher Workflow
    http://viljamis.com/img/blog/2012/workflow.png http://viljamis.com/blog/2012/responsive-workflow/
    

    View Slide

46. Photoshop sinnvoll nutzen
    

    View Slide

47. ‣ Photoshop soll nicht abgeschafft werden.
    ‣ Aber die aktuelle Bedeutung muss korrigiert
    werden.
    ‣ Photoshop Designs sind Idealbilder, keine
    Realitäten.
    ‣ Webseiten sind NIEMALS so wie ein
    Photoshop-Layout.
    

    View Slide

48. ‣ Früher direkt im Code arbeiten und echte
    Webseiten als Entwürfe zeigen.
    ‣ Mit Photoshop mehr Style Tiles erarbeiten.
    ‣ Screenshots an Stelle von Photoshop-
    Konstrukten
    ‣ Abgesegnet wird nicht das Photoshop-
    Bildchen, sondern die reale Umsetzung.
    ‣ Man kann die Realität testen, nicht
    schönmalen.
    

    View Slide

49. Komplexität nach aussen
    und innen kommunizieren
    und einplanen.
    

    View Slide

50. Testen!
    http://goo.gl/0q9rZ
    

    View Slide

51. Emulatoren sind nett, aber nichts gegen echte Endgeräte.
    http://idw-online.de/pages/de/image46078
    

    View Slide

52. 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