Responsive Webdesign für Nichtentwickler

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

April 19, 2013
Tweet

Transcript

  1. Responsive Webdesign für Nichtentwickler Jens Grochtdreis

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

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

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

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

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

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

  8. Seitenzugriffe ZDNet.de ‣ Januar 2012: 8% mobil ‣ Dezember 2012:

    36% mobil http://www.zdnet.de/88136184/marktanteil-2012-windows-verliert-android-gewinnt/
  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
  10. http://oneillclothing.com/ http://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/ I don‘t care ...

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

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

    fixiert!
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. Das Layout http://www.schraegstrichpunkt.de/misc/grabstein.jpg

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

  21. ‣ flexibles Grid (Spalten gehen natürlich auch!) ‣ flexible Medien

    (Bilder und Videos) ‣ Media Queries (Layoutschwellen) Responsive Webdesign alt neu alt
  22. Responsive Webdesign ist einfach umzusetzen! http://mascola.com/insights/wp-content/uploads/2011/05/used_cardealer_photo.jpg

  23. Einfache Vorstellung ein wenig CSS ein wenig HTML und schon

    ist die responsive Seite fertig!
  24. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/

  25. Wir brauchen 1. neue Tools 2. einen neuen Workflow 3.

    neue Entscheidungskriterien 4. viel Kommunikation 5. viel Zeit für Experimente
  26. Photoshop ist ungeeignet für Flexibilität 1

  27. Keine Bildbearbeitung ist für Webdesign geeignet.

  28. Bildbearbeitungen sind zum Bilder bearbeiten da!

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

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

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

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

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

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

  35. In Einzelphasen zusammen am Rechner

  36. Photoshop für erste Designideen und Module

  37. Die Designs werden im Browser finalisiert.

  38. Abnahme nicht über ein Bild sondern durch Prototypen

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

    Photoshop lange dauern.
  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
  41. Neue Entscheidungskriterien 3

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

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

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

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

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

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

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

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

  50. Wir gestalten und entwickeln für das Unbekannte

  51. WTF!

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

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

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

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

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

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

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

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

  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