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

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.

Jens Grochtdreis

April 19, 2013
Tweet

More Decks by Jens Grochtdreis

Other Decks in Technology

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