Responsive Webdesign für Nichtentwickler

Mindestens die halbe Miete eines responsiven Projektes ist die richtige Herangehensweise. Im Rahmen einer firmeninternen Veranstaltung richtete ich meinen Vortrag vor allem an Designer, Konzepter und Berater. Neben guten Gründe für responsives Webdesign präsentierte ich Ihnen die Konsequenzen, die ich für unsere Arbeit in Agenturen und für Kunden sehe.

Transcript

1. Responsive Webdesign
   für Nichtentwickler
   Jens Grochtdreis
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. http://instagram.com/p/W2FCksR9-e/
   Petersplatz - Rom
   

   View Slide

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

   View Slide

7. http://de.slideshare.net/kleinerperkins/2012-kpcb-internet-trends-yearend-update
   Warum soll uns das kümmern?
   

   View Slide

8. Seitenzugriffe ZDNet.de
   ‣ Januar 2012: 8% mobil
   ‣ Dezember 2012: 36% mobil
   http://www.zdnet.de/88136184/marktanteil-2012-windows-verliert-android-gewinnt/
   

   View Slide

9. http://icant.co.uk/talks/h5/pictures/jqueryeu/hypnophone.jpg
   Zunahme mobiler Internetnutzung
   ‣ 77% aller mobiler Suchen finden
   zuhause oder an der Arbeit statt
   ‣ 17% sind „on the go“
   Google/Nielsen Life360 Mobile Search Moments Q4 2012
   

   View Slide

10. http://oneillclothing.com/ http://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/
    I don‘t care ...
    

    View Slide

11. Gesucht: ein flexibles Design
    für alle Ausprägungen
    

    View Slide

12. Das Web ist schon immer
    flexibel gewesen.
    WIR haben es fixiert!
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. Das Layout
    http://www.schraegstrichpunkt.de/misc/grabstein.jpg
    

    View Slide

20. Das Web
    http://snipurl.com/2563ah8
    

    View Slide

21. ‣ flexibles Grid (Spalten gehen natürlich auch!)
    ‣ flexible Medien (Bilder und Videos)
    ‣ Media Queries (Layoutschwellen)
    Responsive Webdesign
    alt
    neu
    alt
    

    View Slide

22. Responsive Webdesign ist
    einfach umzusetzen!
    http://mascola.com/insights/wp-content/uploads/2011/05/used_cardealer_photo.jpg
    

    View Slide

23. Einfache Vorstellung
    ein wenig CSS
    ein wenig HTML
    und schon ist die responsive Seite fertig!
    

    View Slide

24. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
    

    View Slide

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

    View Slide

26. Photoshop ist ungeeignet für Flexibilität
    1
    

    View Slide

27. Keine Bildbearbeitung ist für
    Webdesign geeignet.
    

    View Slide

28. Bildbearbeitungen sind zum
    Bilder bearbeiten da!
    

    View Slide

29. Man kann erste Ideen
    skizzieren, Atmosphäre
    schaffen. Mehr nicht!
    

    View Slide

30. Photoshop ist für erste
    Designideen und für die
    Erstellung von Modulen
    

    View Slide

31. Wir haben die Photoshop-
    Ergebnisse immer falsch
    kommuniziert!
    

    View Slide

32. Kunde
    Beratung
    Konzept
    Design
    Frontend
    Backend
    Unser Workflow ist falsch
    2
    

    View Slide

33. Im Normalfall wird der
    Frontendentwickler überrascht
    http://failblog.files.wordpress.com/2009/07/128932678618285916.jpg
    

    View Slide

34. http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg
    Designer und Entwickler:
    Ein Team!
    

    View Slide

35. In Einzelphasen zusammen
    am Rechner
    

    View Slide

36. Photoshop für erste
    Designideen und Module
    

    View Slide

37. Die Designs werden im
    Browser finalisiert.
    

    View Slide

38. Abnahme nicht über ein Bild
    sondern durch Prototypen
    

    View Slide

39. Anhand der Prototypen kann man
    schnell Entscheidungen treffen, die
    mit Photoshop lange dauern.
    

    View Slide

40. ‣ 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

41. Neue Entscheidungskriterien
    3
    

    View Slide

42. Nicht wie üblich zwei
    unterschiedliche Designs
    zum Kunden geben!
    

    View Slide

43. Iterationen eines Designs:
    alte vs. neue Browser und
    unterschiedliche Devices
    

    View Slide

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

    View Slide

45. http://www.flickr.com/photos/artrock2006/4177475479/
    http://www.flickr.com/photos/artrock2006/4177475479/
    Frühzeitig und offen kommunizieren
    4
    

    View Slide

46. Nicht einfach Befehle empfangen.
    http://www.flickr.com/photos/soldiersmediacenter/3521607551/
    

    View Slide

47. Frühzeitig miteinander
    sprechen - im Team und mit
    dem Kunden!
    

    View Slide

48. http://goo.gl/0q9rZ
    Zeit für Experimente
    5
    

    View Slide

49. http://idw-online.de/pages/de/image46078
    Emulatoren sind nett, aber
    nichts gegen echte Endgeräte.
    

    View Slide

50. Wir gestalten und entwickeln für das Unbekannte
    

    View Slide

51. WTF!
    

    View Slide

52. http://wtfmobileweb.com/post/47273175939/heres-a-good-wtfmobileweb-treat
    

    View Slide

53. http://wtfmobileweb.com/post/45107803674/your-content-anywhere-except-that-way-that-way
    

    View Slide

54. http://wtfmobileweb.com/post/47229162235/the-facebook-announcement-of-their-amazing-new
    

    View Slide

55. http://wtfmobileweb.com/post/47105752331/seriously-jspot-yeah-ill-make-sure-to-check
    

    View Slide

56. http://wtfmobileweb.com/post/45342143412/you-can-save-our-contact-informations-by-scanning
    

    View Slide

57. http://wtfmobileweb.com/post/44938770136/you-clearly-know-im-on-an-android-device-why
    

    View Slide

58. View Slide

59. http://wtfmobileweb.com/post/46503753302
    

    View Slide

60. http://wtfmobileweb.com/post/47454857958/looks-like-citi-aint-getting-my-payment-today
    

    View Slide

61. Jens Grochtdreis
    http://grochtdreis.de
    http://twitter.com/Flocke
    https://github.com/jensgro
    http://webkrauts.de
    http://slideshare.net/Flocke669
    https://speakerdeck.com/flocke
    

    View Slide