Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Webdesign - wir müssen uns ändern

Jens Grochtdreis
September 08, 2015

Responsive Webdesign - wir müssen uns ändern

Kurzvortrag vor dem IT Klub Mainz über Implikationen von Responsive Webdesign auf den Workflow von Webprojekten.

Jens Grochtdreis

September 08, 2015
Tweet

More Decks by Jens Grochtdreis

Other Decks in Design

Transcript

  1. Responsive Webdesign -
    wir müssen uns ändern!
    Jens Grochtdreis

    View Slide

  2. Das Web ist per se flexibel
    http://snipurl.com/2563ah8

    View Slide

  3. Unflexibel und unzugänglich wird es
    erst durch unsere Entscheidungen!
    http://www.schraegstrichpunkt.de/misc/grabstein.jpg

    View Slide

  4. http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png

    View Slide

  5. http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png

    View Slide

  6. http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png

    View Slide

  7. https://twitter.com/historyepics/status/445522510864736257

    View Slide

  8. Mobile Nutzung ist gängig
    https://twitter.com/winlocal/status/583164144888737792

    View Slide

  9. https://twitter.com/designtimes/status/539521149395566593

    View Slide

  10. http://www.telegraph.co.uk/technology/news/8731365/Technology-failing-to-empower-older-generation.html

    View Slide

  11. „Responsive Webdesign“
    will alle Devices bespielen!

    View Slide

  12. ‣ EIN Design, das in allen Ausprägungen
    funktioniert
    ‣ EINE Codebasis, die alle Eventualitäten
    berücksichtigt
    http://finecitizens.com/defineResponsive/

    View Slide

  13. Wofür optimieren?

    View Slide

  14. Falsche Frage!
    https://twitter.com/brad_frost/status/392429547188408321

    View Slide

  15. Es geht um Browser
    nicht um Devices!
    http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
    https://raw.github.com/paulirish/browser-logos/master/all-desktop.png

    View Slide

  16. Es interessieren
    Betriebssysteme, Browser
    und Fensterbreiten.

    View Slide

  17. Nicht an Devices denken.
    Die wechseln zu oft.

    View Slide

  18. Unser Workflow ist falsch!

    View Slide

  19. Kunde
    Beratung
    Konzept
    Design
    Frontend
    Backend

    View Slide

  20. http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
    Die Sache ist zu komplex!

    View Slide

  21. Wir wissen nichts!

    View Slide

  22. Wir wissen nicht, mit
    welcher Art Computer
    jemand unsere Seite
    besucht.

    View Slide

  23. View Slide

  24. Wir wissen nicht, welchen
    Monitor mit welcher
    Auflösung unser Besucher
    hat.

    View Slide

  25. http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png

    View Slide

  26. Wir wissen nicht, welche
    Fähigkeiten der Browser des
    Besuchers hat.

    View Slide

  27. http://caniuse.com/#feat=css-filters

    View Slide

  28. Wir wissen nicht, in welcher
    Größe das Browserfenster
    unseres Nutzers ist.

    View Slide

  29. Wir wissen noch viel mehr
    nicht, unterstellen oder
    ignorieren dies aber meist.

    View Slide

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

    View Slide

  31. Konzept
    Design
    Frontend
    Klassischer Workflow

    View Slide

  32. Konzept
    Design
    Frontend
    Besserer Workflow

    View Slide

  33. Konzept
    Design
    Frontend
    Noch besserer Workflow

    View Slide

  34. Konzept und Design nicht
    losgelöst vom Frontend
    entwickeln!

    View Slide

  35. http://de.slideshare.net/pkattera/design-process-for-responsive-web-design
    Iterativer, agiler Prozess

    View Slide

  36. http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg
    Designer und Entwickler müssen
    enger zusammenarbeiten

    View Slide

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

    View Slide

  38. http://jsfiddle.net/Flocke/azvGv/
    CSS3-fähiger Browser IE8
    Alternativen testen

    View Slide

  39. Keine klassischen
    Projekte mehr!

    View Slide

  40. Es wird ein Prozess
    verkauft, kein Endprodukt!

    View Slide

  41. Es kann am Anfang nicht
    mehr das Endprodukt
    abgenommen werden.

    View Slide

  42. Am Anfang steht eine Idee!

    View Slide

  43. Am Anfang kann nicht alles
    durchgestaltet werden.

    View Slide

  44. Festpreisprojekte sind
    unrealistisch!

    View Slide

  45. Wir brauchen
    1. einen neuen Workflow
    2. neue Tools
    3. neue Entscheidungskriterien
    4. viel Kommunikation
    5. viel Zeit für Experimente

    View Slide

  46. Kunden und Agenturen
    müssen sich ändern!

    View Slide

  47. Responsive
    Webdesign ist
    nicht einfach!

    View Slide

  48. Jens Grochtdreis
    http://grochtdreis.de
    http://twitter.com/Flocke
    https://speakerdeck.com/flocke
    http://webkrauts.de

    View Slide