Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)

1. Responsive Webdesign Workflow - ein praktischer Leitfaden Patrick Lobacher GF +Pluswerk GmbH 28.10.2014

2. Disclaimer: Keine Technik! Patrick Lobacher GF +Pluswerk GmbH

3. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Patrick Lobacher Geschäftsführer +Pluswerk GmbH • 44 Jahre, glücklich verheiratet, wohnhaft in München • Selbständig im Bereich Webentwicklung seit 1994 • Autor von 10 Fachbüchern und > 50 Fachartikeln zum Thema TYPO3 und Webentwicklung • Mitglied im TYPO3 Education Committee • Speaker, Trainer, Consultant, Coach, Nerd Veröffentlichungen: (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

4. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Agentur für digitale Kommunikation +[ 10 ] Standorte in Deutschland +[ 130 ] Mitarbeiter +[ 999 ] realisierte Projekte mit Magento und TYPO3 (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

5. RWD - Begriffsklärung

7. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden http://alistapart.com/article/responsive-web-design (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

8. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden RWD = Media Queries + Fluid Grids + Flexible Images (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 ?

9. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden http://alistapart.com/column/what-we-mean-when-we-say-responsive (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

10. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Responsive Adaptive Aaron Gustavson / Brad Frost / Rest of World (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

11. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Responsive? • "Reagierend" auf die Bildschirmbreite • "Reagierend" auf die Bildschirmhöhe • "Reagierend" auf die Geräteklasse • "Reagierend" auf das Device • "Reagierend" auf die Übertragungsgeschwindigkeit • "Reagierend" auf die Bewegungsgeschwindigkeit • "Reagierend" auf den Content! (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

12. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden http://www.teco.edu/~budde/publications/MUM2013_poster_hauber.pdf (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

13. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden www.samsung.com www.opera.com (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

15. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden 18796 Android Geräte http://www.businessinsider.com/android-fragmentation-2014-8 (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

18. Der RWD Prozess

22. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 982px 971px 954px 870px

23. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 982px 971px 954px 870px 763px

24. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 982px 971px 954px 870px 763px 620px

25. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 982px 971px 954px 870px 763px 620px 530px

26. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 982px 971px 954px 870px 763px 620px 530px 375px

27. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden • RWD bei einer „führenden“ Kommunikationsagentur für einen Enterprise Kunden: • 3 Designvorschläge • 30 Seitentypen • 6 Break-Points (7 Darstellungen) • >> 540 (ausgedruckte) PSD-Dateien << • > 150.000 EUR nur für das Design (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

28. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Lastenheft Pflichten-heft Design Frontend Linearer / Wasserfall-Prozess (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 QA

29. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden kompliziert (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 „Stacey Matrix“ bekannt Technologie unbekannt bekannt Anforderungen unbekannt einfach kompliziert chaotisch komplex

31. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden • Der Design-Prozess muss sich „radikal“ ändern • Mobile-First! (Content-First) • Kein Layout mehr • Iterativ (Agil) https://www.flickr.com/photos/gernot/134998970/ (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

32. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden RWD Planning / Contract Frontend (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Proto-typing Content Strategy Device Testing StyleTile Content Atomic Design Testing Create Content Content Wireframe Linear Design

33. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Bevor es losgeht: • Entscheidungen • Stakeholder Matrix (Wer entscheidet was?) • Projekt Ziel / Vision • Breakpoint Entscheidungen (aufgrund des Inhalts) (Wichtig!) • Liste der zu unterstützenden Geräte und Browser (Top 5/3) • Dokument Bestandsaufnahme (CI-Manual, Richtlinien, Bestimmungen, Rechtliches, ...) • Moodboard Briefing (Look & Feel) • Vertrag (Agiler Vertrag) (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

34. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Content Strategy • Content Strategy (Consulting) • Erster Schritt ist das Sammeln, Auswerten und Bewerten des Contents • oder Vorziehen von Schritt „Content erstellen“ • Dies führt zu einem „Content Inventory“ (Hauptnavigation, Sekundärnavigation, Logo, Links, Überschriften, Inhaltselemente, ...) • Großes (Excel-)File mit Was/ Wo / Wer / Wann

35. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Content Strategy • Content Strategy (Consulting)

36. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Irgendein Plugin (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Content Wireframe • Content (Reference) Wireframe Hauptnavigation Logo Suche & Links Überschrift Inhalt Footer • Welcher Inhalt ist wo • Nur Rechtecke • Kein Design! • Mobile first! • Für jeden Major-Breakpoint • Für jeden Seitentyp • Für jeden Inhaltstyp • Content Choreographie

37. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Content Wireframe • Content (Reference) Wireframe

38. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Content Wireframe • Content (Reference) Wireframe • www.axure.com • https://balsamiq.com • http://getwirefy.com (Atomic Design) • http://codecondo.com/free-wireframe-tools/ • http://www.creativebloq.com/wireframes/top-wireframing- tools-11121302 • …u.s.w.

39. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Content Wireframe • Content (Reference) Wireframe http://typostrap.io

40. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Create Content • Content erstellen • Identifizierung der verschiedenen Inhalts-Typen/Content Chunks (Listen, Tabellen, Überschriften, Bild mit Text auf der rechten Seite, ...) • Nur Text verwenden! • Markup via • Markdown • AsciiDoc • ReST • …

41. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Create Content • Content erstellen (gitbook.io)

42. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Create Content • Content erstellen (Pandoc)

43. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Create Content • Content erstellen Strategie Ziel-gruppen Analyse Persona User Story Customer Journey

44. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Content Testing • Testen des Contents • Content Dummy Test • in allen Breiten (Screensize) auf die man sich Anfangs geeinigt hatte • Freigabe durch den Kunden! • Tools • Adobe Edge Inspect • http://vanamco.com/ghostlab/

45. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 StyleTile Atomic Design • Moodboard • Illustration des visuellen Stils (und der Stilrichtung) • Richtung: Typographie, Bildwelten, Farben, Stile, … • Look & feel der Website inkl. der Elemente (wie Navigation, Überschrift, …) • Es werden nur die Elemente designed und keine Layouts! http://weblog.404creative.com/

46. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 StyleTile Atomic Design www.meljennings.co.uk

47. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 StyleTile Atomic Design • Atomic Design http:// smm.zoomquiet.io/ data/ 20110511083224/ index.html

48. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 StyleTile Atomic Design • Atomic Design (Brad Frost) http://bradfrostweb.com/blog/post/atomic-web-design/ http://patternlab.io/

49. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 StyleTile Atomic Design • Atomic Design (Brad Frost) http://bradfrostweb.com/blog/post/atomic-web-design/ http://patternlab.io/ http://www.youtube.com/watch?v=02K5nO4KR6s https://speakerdeck.com/bjen/working-with-atomic-desing

50. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Linear Design • Linear Design • Anreichern des Content Dummys mit dem Basis Design (CSS) aus dem Moodboard/StyleTile/ AtomicDesign • Anfangs linear - noch nicht positioniert • Dient dazu, um zu sehen, wie „richtiger/realer“ Content wirkt und aussieht • Freigabe durch den Kunden!

51. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Prototyping • Prototype (Design im Browser) • Produktion eines Clickdummys mit HTML5/CSS3/JavaScript/... • Dies führt zum finalen Layout - daher muss hier auf die Positionierung geachtet werden • Interaktiver Prozess mit dem Designer und dem Kunden! • Freigabe durch den Kunden!

52. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 Device Testing • Device testing • Test muss auf realen Testgeräten durchgeführt werden - keine Simulatoren möglich! • Gehe zu Open Device Labs (ODL) • Für das Testen gibt es Tools! • Freigabe durch den Kunden!

53. Ähhhhhhh… aber…

54. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Agentur-Workflow? Change-Prozess! (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

55. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Kunden-Workflow? Kunden-Erziehung! (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

56. Fragen? Oder komplett verwirrt? Slides: www.lobacher.de/wtc14-rwd

57. Besten Dank für Eure Aufmerksamkeit! Besten Dank für Eure Aufmerksamkeit! plus-werk.com

58. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Kontakt Klassisch: +Pluswerk GmbH Patrick Lobacher Solmstr. 6A 60486 Frankfurt am Main Fon: +49 89 130 145 20 Email: lobacher@plus-werk.com Web: www.plus-werk.com Twitter: www.twitter.com/PatrickLobacher Facebook: www.facebook.com/patrick.lobacher Blog: blog.lobacher.de Schulungen: www.lobacher.de Google+: plus.google.com/105500420878314068694 (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014 XING: www.xing.com/profile/Patrick_Lobacher LinkedIn www.linkedin.com/pub/patrick-lobacher/ 4/881/171 Slideshare: www.slideshare.net/plobacher Amazon: www.amazon.de/Patrick-Lobacher/e/ B0045AQVEA Profil: Full Service Agentur für digitale Kommunikation Schwerpunkt: Open Source Technologie Kunden: Enterprise & KMU

59. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden Referenzen (Auszug: +Pluswerk/net-o-graphic/typofaktum/typovision) (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014

Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)

+Pluswerk AG

Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)