SlideShare ist ein Scribd-Unternehmen logo
1 von 59
Downloaden Sie, um offline zu lesen
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 
• 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
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
RWD - Begriffsklärung
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
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
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 
?
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
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
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
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
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
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
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
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
Der RWD Prozess
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
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
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
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
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
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
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
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
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
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
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
Responsive Webdesign verkaufen 
RWD Workflow - ein praktischer Leitfaden 
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
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
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
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
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
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)
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
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
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.
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
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 
• …
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)
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)
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
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/
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/
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
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
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/
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
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!
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!
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!
Ähhhhhhh… aber…
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
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
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 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
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

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (11)

Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
The Digital Statstics 2014: Zahlen und Fakten zu DeutschlandThe Digital Statstics 2014: Zahlen und Fakten zu Deutschland
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
 
Transparency is the New Black
Transparency is the New BlackTransparency is the New Black
Transparency is the New Black
 
Webdesign für Blogger
Webdesign für BloggerWebdesign für Blogger
Webdesign für Blogger
 
Usability & Webdesign 2010
Usability & Webdesign 2010Usability & Webdesign 2010
Usability & Webdesign 2010
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Digitales Marketing 1 - Facebook für Unternehmen und Verbände
Digitales Marketing 1 - Facebook für Unternehmen und VerbändeDigitales Marketing 1 - Facebook für Unternehmen und Verbände
Digitales Marketing 1 - Facebook für Unternehmen und Verbände
 
Responsive by Design! - Successfull by Chance?
Responsive by Design! - Successfull by Chance?Responsive by Design! - Successfull by Chance?
Responsive by Design! - Successfull by Chance?
 
Atomic design
Atomic designAtomic design
Atomic design
 
TactixX - Warum Online-KPI für Advertiser oft wenig Wert haben
TactixX - Warum Online-KPI für Advertiser oft wenig Wert habenTactixX - Warum Online-KPI für Advertiser oft wenig Wert haben
TactixX - Warum Online-KPI für Advertiser oft wenig Wert haben
 
e-commerce und Re-Selling
e-commerce und Re-Sellinge-commerce und Re-Selling
e-commerce und Re-Selling
 

Ähnlich wie Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)

Ähnlich wie Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014) (20)

Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell
Developer Week / DWX 2015 - Responsice Webdesign in a NutshellDeveloper Week / DWX 2015 - Responsice Webdesign in a Nutshell
Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
 
Neos CMS - Das CMS der nächsten Generation - IPC 2015
Neos CMS - Das CMS der nächsten Generation - IPC 2015Neos CMS - Das CMS der nächsten Generation - IPC 2015
Neos CMS - Das CMS der nächsten Generation - IPC 2015
 
Infrastruktur agil bauen - der DBA im SAFe-Umfeld
Infrastruktur agil bauen - der DBA im SAFe-UmfeldInfrastruktur agil bauen - der DBA im SAFe-Umfeld
Infrastruktur agil bauen - der DBA im SAFe-Umfeld
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
 
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschautTechnologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
 
UX in Agile Session, UX Meetup FFM
UX in Agile Session, UX Meetup FFMUX in Agile Session, UX Meetup FFM
UX in Agile Session, UX Meetup FFM
 
TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014
 
SEO und Projektmanagement, Vortrag SEOKomm 2014
SEO und Projektmanagement, Vortrag SEOKomm 2014SEO und Projektmanagement, Vortrag SEOKomm 2014
SEO und Projektmanagement, Vortrag SEOKomm 2014
 
Graphing mit Graphite (Webinar vom 06.11.2013)
Graphing mit Graphite (Webinar vom 06.11.2013)Graphing mit Graphite (Webinar vom 06.11.2013)
Graphing mit Graphite (Webinar vom 06.11.2013)
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
Webcast: SAP on Azure für den Mittelstand - Erfolgsfaktor Integration
Webcast: SAP on Azure für den Mittelstand - Erfolgsfaktor IntegrationWebcast: SAP on Azure für den Mittelstand - Erfolgsfaktor Integration
Webcast: SAP on Azure für den Mittelstand - Erfolgsfaktor Integration
 
Cloud-native Apps - Architektur, Implementierung, Demo
Cloud-native Apps - Architektur, Implementierung, DemoCloud-native Apps - Architektur, Implementierung, Demo
Cloud-native Apps - Architektur, Implementierung, Demo
 
Cloud-native Apps – Architektur, Implementierung, Demo
Cloud-native Apps – Architektur, Implementierung, DemoCloud-native Apps – Architektur, Implementierung, Demo
Cloud-native Apps – Architektur, Implementierung, Demo
 
Keynote Andreas Giraud - DSAG-Technologietage 2014
Keynote Andreas Giraud - DSAG-Technologietage 2014Keynote Andreas Giraud - DSAG-Technologietage 2014
Keynote Andreas Giraud - DSAG-Technologietage 2014
 
Website Relaunch SEO - WebTechCon 2016
Website Relaunch SEO - WebTechCon 2016Website Relaunch SEO - WebTechCon 2016
Website Relaunch SEO - WebTechCon 2016
 
Studentische Softwareentwicklung - Warum es keine Alternative zu agilen Metho...
Studentische Softwareentwicklung - Warum es keine Alternative zu agilen Metho...Studentische Softwareentwicklung - Warum es keine Alternative zu agilen Metho...
Studentische Softwareentwicklung - Warum es keine Alternative zu agilen Metho...
 
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAV
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAVIntegrate your business - SharePoint 2010 and Microsoft Dynamics NAV
Integrate your business - SharePoint 2010 and Microsoft Dynamics NAV
 

Mehr von die.agilen GmbH

Mehr von die.agilen GmbH (20)

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKR
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical application
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 

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
  • 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. 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
  • 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. 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. 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. Responsive Webdesign verkaufen RWD Workflow - ein praktischer Leitfaden (c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
  • 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. 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. 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. 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
  • 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. 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!
  • 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