Responsive Webdesign 
Workflow - 
ein praktischer Leitfaden 
Patrick Lobacher 
GF +Pluswerk GmbH 
28.10.2014
Disclaimer: 
Keine Technik! 
Patrick Lobacher 
GF +Pluswerk GmbH
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Patrick Lobacher 
Geschäftsführer +Pluswerk GmbH...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Agentur für digitale Kommunikation 
+[ 10 ] Stan...
RWD - Begriffsklärung
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
http://alistapart.com/article/responsive-web-des...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
RWD = Media Queries + 
Fluid Grids + 
Flexible I...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
http://alistapart.com/column/what-we-mean-when-w...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Responsive 
Adaptive 
Aaron Gustavson / Brad Fro...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Responsive? 
• "Reagierend" auf die Bildschirmbr...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
http://www.teco.edu/~budde/publications/MUM2013_...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
www.samsung.com www.opera.com 
(c) 2014 - Patric...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
www.apple.com 
(c) 2014 - Patrick Lobacher | RWD...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
18796 Android Geräte http://www.businessinsider....
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Der RWD Prozess
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
• RWD bei einer „führenden“ 
Kommunikationsagent...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Lastenheft 
Pflichten-heft 
Design Frontend 
Lin...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
kompliziert 
(c) 2014 - Patrick Lobacher | RWD W...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
• Der Design-Prozess muss sich „radikal“ 
ändern...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
RWD 
Planning / Contract Frontend 
(c) 2014 - Pa...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Bevor es losgeht: 
• Entscheidungen 
• Stakehold...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Irgendein Plugin 
(c) 2014 - Patrick Lobacher | ...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein...
Ähhhhhhh… aber…
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Agentur-Workflow? 
Change-Prozess! 
(c) 2014 - P...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Kunden-Workflow? 
Kunden-Erziehung! 
(c) 2014 - ...
Fragen? 
Oder komplett verwirrt? 
Slides: www.lobacher.de/wtc14-rwd
Besten Dank für Eure 
Aufmerksamkeit! 
Besten Dank für Eure 
Aufmerksamkeit! 
plus-werk.com
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Kontakt 
Klassisch: 
+Pluswerk GmbH 
Patrick Lob...
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
Referenzen (Auszug: +Pluswerk/net-o-graphic/typo...
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)

3.019 Aufrufe

Veröffentlicht am

Mittlerweile müsste es sich herumgesprochen haben, dass Responsive Webdesign vor allem im Kopf beginnt. Es muss ein neuer Workflow her, damit RWD-Projekte erfolgreich sind. Dabei fällt aber oft die ganz konkrete Umsetzung schwer. Der Talk greift daher den Workflow pragmatisch auf und zeigt, wie man ihn konkret umsetzt. Ergebnis ist ein praktischer Leitfaden, der sofort im eigenen Projekt verwendet werden kann.

Veröffentlicht in: Internet
0 Kommentare
6 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.019
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
28
Aktionen
Geteilt
0
Downloads
65
Kommentare
0
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)

  1. 1. Responsive Webdesign Workflow - ein praktischer Leitfaden Patrick Lobacher GF +Pluswerk GmbH 28.10.2014
  2. 2. Disclaimer: Keine Technik! Patrick Lobacher GF +Pluswerk GmbH
  3. 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. 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. 5. RWD - Begriffsklärung
  6. 6. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
  7. 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. 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. 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. 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. 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. 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. 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
  14. 14. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden www.apple.com (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
  15. 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
  16. 16. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
  17. 17. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
  18. 18. Der RWD Prozess
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 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. 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. 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. 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. 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. 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. 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. 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
  30. 30. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
  31. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 53. Ähhhhhhh… aber…
  54. 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. 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. 56. Fragen? Oder komplett verwirrt? Slides: www.lobacher.de/wtc14-rwd
  57. 57. Besten Dank für Eure Aufmerksamkeit! Besten Dank für Eure Aufmerksamkeit! plus-werk.com
  58. 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. 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

×