$30 off During Our Annual Pro Sale. View Details »

Wir brauchen einen neuen Workflow - Langform

Wir brauchen einen neuen Workflow - Langform

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

Jens Grochtdreis

January 20, 2014
Tweet

More Decks by Jens Grochtdreis

Other Decks in Business

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