Post on 29-Nov-2014
description
transcript
Responsive Webdesign für Nichtentwickler
Jens Grochtdreis
http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png
http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png
http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png
20072010
http://instagram.com/p/W2FCksR9-e/
Petersplatz - Rom
http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
http://de.slideshare.net/kleinerperkins/2012-kpcb-internet-trends-yearend-update
Warum soll uns das kümmern?
Seitenzugriffe ZDNet.de
‣ Januar 2012: 8% mobil
‣ Dezember 2012: 36% mobil
http://www.zdnet.de/88136184/marktanteil-2012-windows-verliert-android-gewinnt/
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
http://oneillclothing.com/ http://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/
I don‘t care ...
Gesucht: ein flexibles Design für alle Ausprägungen
Das Web ist schon immer flexibel gewesen.
WIR haben es fixiert!
Das Layout
http://www.schraegstrichpunkt.de/misc/grabstein.jpg
‣ flexibles Grid (Spalten gehen natürlich auch!)
‣ flexible Medien (Bilder und Videos)
‣ Media Queries (Layoutschwellen)
Responsive Webdesign
alt
neu
alt
Responsive Webdesign ist einfach umzusetzen!
http://mascola.com/insights/wp-content/uploads/2011/05/used_cardealer_photo.jpg
Einfache Vorstellung
ein wenig CSS
ein wenig HTML
und schon ist die responsive Seite fertig!
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
Wir brauchen
1. neue Tools
2. einen neuen Workflow
3. neue Entscheidungskriterien
4. viel Kommunikation
5. viel Zeit für Experimente
Photoshop ist ungeeignet für Flexibilität1
Keine Bildbearbeitung ist für Webdesign geeignet.
Bildbearbeitungen sind zum Bilder bearbeiten da!
Man kann erste Ideen skizzieren, Atmosphäre
schaffen. Mehr nicht!
Photoshop ist für erste Designideen und für die Erstellung von Modulen
Wir haben die Photoshop-Ergebnisse immer falsch
kommuniziert!
Kunde
Beratung
Konzept
Design
Frontend
Backend
Unser Workflow ist falsch2
Im Normalfall wird der Frontendentwickler überrascht
http://failblog.files.wordpress.com/2009/07/128932678618285916.jpg
http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg
Designer und Entwickler: Ein Team!
In Einzelphasen zusammen am Rechner
Photoshop für erste Designideen und Module
Die Designs werden im Browser finalisiert.
Abnahme nicht über ein Bild sondern durch Prototypen
Anhand der Prototypen kann man schnell Entscheidungen treffen, die
mit Photoshop lange dauern.
‣ 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
Neue Entscheidungskriterien3
Nicht wie üblich zwei unterschiedliche Designs
zum Kunden geben!
Iterationen eines Designs: alte vs. neue Browser und unterschiedliche Devices
http://jsfiddle.net/Flocke/azvGv/
CSS3-fähiger Browser IE8
Alternativen testen
http://www.flickr.com/photos/artrock2006/4177475479/http://www.flickr.com/photos/artrock2006/4177475479/
Frühzeitig und offen kommunizieren4
Nicht einfach Befehle empfangen.
http://www.flickr.com/photos/soldiersmediacenter/3521607551/
Frühzeitig miteinander sprechen - im Team und mit
dem Kunden!
http://idw-online.de/pages/de/image46078
Emulatoren sind nett, aber nichts gegen echte Endgeräte.
Wir gestalten und entwickeln für das Unbekannte
WTF!
http://wtfmobileweb.com/post/47273175939/heres-a-good-wtfmobileweb-treat
http://wtfmobileweb.com/post/45107803674/your-content-anywhere-except-that-way-that-way
http://wtfmobileweb.com/post/47229162235/the-facebook-announcement-of-their-amazing-new
http://wtfmobileweb.com/post/47105752331/seriously-jspot-yeah-ill-make-sure-to-check
http://wtfmobileweb.com/post/45342143412/you-can-save-our-contact-informations-by-scanning
http://wtfmobileweb.com/post/44938770136/you-clearly-know-im-on-an-android-device-why
http://wtfmobileweb.com/post/46503753302
http://wtfmobileweb.com/post/47454857958/looks-like-citi-aint-getting-my-payment-today
Jens Grochtdreis
http://grochtdreis.dehttp://twitter.com/Flockehttps://github.com/jensgrohttp://webkrauts.dehttp://slideshare.net/Flocke669https://speakerdeck.com/flocke