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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Keine Bildbearbeitung ist für
    Webdesign geeignet.

    View full-size slide

  22. Bildbearbeitungen sind zum
    Bilder bearbeiten da!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. In Einzelphasen zusammen
    am Rechner

    View full-size slide

  30. Photoshop für erste
    Designideen und Module

    View full-size slide

  31. Die Designs werden im
    Browser finalisiert.

    View full-size slide

  32. Abnahme nicht über ein Bild
    sondern durch Prototypen

    View full-size slide

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

    View full-size slide

  34. ‣ 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 full-size slide

  35. Neue Entscheidungskriterien
    3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. Wir gestalten und entwickeln für das Unbekannte

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. 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 full-size slide