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

Wir brauchen einen neuen Workflow

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.

Jens Grochtdreis

November 12, 2012
Tweet

More Decks by Jens Grochtdreis

Other Decks in Technology

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