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
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!
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
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