SlideShare ist ein Scribd-Unternehmen logo
Wir brauchen einen
 neuen Workflow
     Jens Grochtdreis
‣ Frontendentwickler
‣ seit 1999 Arbeit im und fürs Web
‣ seit 2009 selbständig
   ‣ Frontendentwicklung
   ‣ Schulung
   ‣ Beratung
‣ @Flocke
Das Web ist per se flexibel
Unflexibel und unzugänglich
 wird es erst durch unsere
     Entscheidungen!
http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png
http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png
http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
Das Endprodukt eines
Frontendentwicklers ist nur
   ein Zwischenprodukt.
Wir wissen nicht, in welcher
 Umgebung und in welcher Form
unser Endprodukt konsumiert wird.
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Für Projektmanager und
    Designer ist das
     unvorstellbar.
Photoshop und Word haben
                                                   immer EIN Endprodukt.




http://www.flickr.com/photos/wanhoff/356677564/
Wir haben viele
                                                     Endprodukte




http://www.flickr.com/photos/danm_cool/3163625498/
Frontendentwicklung ist
                   nicht einfach!




http://failblog.files.wordpress.com/2009/07/128932678618285916.jpg
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
Unser Workflow ist falsch!
Kunde
  Beratung
        Konzept
           Design
             Frontend
                    Backend
Das passt nicht zu einem
    flexiblen Umfeld
Photoshop ist nicht für
 Webdesign geeignet.
Es war es nie!
Keine Bildbearbeitung ist
     dafür geeignet.
Bildbearbeitungen sind zum
    Bilder bearbeiten da!
Designer und Entwickler
     müssen enger
  zusammenarbeiten
Ein gemeinsames Team
In Einzelphasen zusammen
        am Rechner
Photoshop ist für erste
Designideen und für die
Erstellung von Modulen
Die Designs werden im Browser
  in Zusammenarbeit mit dem
 Frontendentwickler finalisiert.
Abnahme nicht über ein Bild
  aus Photoshop sondern
 anhand eines Prototypen
Anhand der Prototypen kann man
schnell Entscheidungen treffen, die
   mit Photoshop lange dauern.
‣ 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
Alternativen testen




           CSS3-fähiger Browser          IE8

http://jsfiddle.net/Flocke/azvGv/
Nicht wie üblich zwei
unterschiedliche Designs
  zum Kunden geben!
Iterationen eines Designs:
alte vs. neue Browser und
 unterschiedliche Devices
Damit das effektiv
funktioniert empfehle ich
  Frontend-Frameworks
http://www.yaml.de/
http://foundation.zurb.com/
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
Eigene Module sammeln und
    Baukästen erstellen
Alle Beteiligten sollten frühzeitig
                            offen kommunizieren.




http://www.flickr.com/photos/artrock2006/4177475479/
       http://www.flickr.com/photos/artrock2006/4177475479/
Nicht einfach Befehle empfangen.




http://www.flickr.com/photos/soldiersmediacenter/3521607551/
Voneinander lernen!
Es heißt http:// nicht psd:// !
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/

Weitere ähnliche Inhalte

Wir brauchen einen neuen Workflow