Embed Size (px)
DESCRIPTION
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.
Citation preview
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.
http://www.flickr.com/photos/wanhoff/356677564/
Photoshop und Word haben immer EIN Endprodukt.
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
http://jsfiddle.net/Flocke/azvGv/
CSS3-fähiger Browser IE8
Alternativen testen
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
Eigene Module sammeln und Baukästen erstellen
http://www.flickr.com/photos/artrock2006/4177475479/
Alle Beteiligten sollten frühzeitig offen kommunizieren.
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 Grochtdreishttp://grochtdreis.de
http://twitter.com/Flockehttp://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/
