Responsive Webdesign - wir müssen uns ändern

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

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