responsive webdesign workflow – ein praktischer leitfaden (ipc 2014)
DESCRIPTION
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.TRANSCRIPT
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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Veröffentlichungen:
Patrick LobacherGeschä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
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Agentur für digitale Kommunikation+[ 10 ] Standorte in Deutschland +[ 130 ] Mitarbeiter +[ 999 ] realisierte Projekte mit Magento und TYPO3
RWD - Begriffsklärung
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
http://alistapart.com/article/responsive-web-design
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
RWD = Media Queries + Fluid Grids + Flexible Images
?
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
http://alistapart.com/column/what-we-mean-when-we-say-responsive
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Responsive Adaptive
Aaron Gustavson / Brad Frost / Rest of World
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
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!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
http://www.teco.edu/~budde/publications/MUM2013_poster_hauber.pdf
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
www.samsung.com www.opera.com
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
www.apple.com
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
http://www.businessinsider.com/android-fragmentation-2014-818796 Android Geräte
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Der RWD Prozess
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
982px
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
982px
971px
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
982px
971px
954px
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
982px
971px
954px
870px
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
982px
971px
954px
870px
763px
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
982px
971px
954px
870px
763px
620px
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
982px
971px
954px
870px
763px
620px
530px
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
982px
971px
954px
870px
763px
620px
530px
375px
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
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
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
LastenheftPflichten-
heft Design Frontend
Linearer / Wasserfall-Prozess
QA
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
„Stacey Matrix“
Technologie unbekanntbekannt
Anfo
rder
unge
nbe
kann
tun
beka
nnt
einfach kompliziert
kompliziert
chaotisch
komplex
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
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/
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Frontend Planning / Contract
RWD
Proto- typing
ContentStrategy
DeviceTesting
StyleTileAtomic DesignContent
Testing
CreateContent
ContentWireframe
LinearDesign
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
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)
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Content Strategy
• Content Strategy (Consulting)
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Content Wireframe
• Content (Reference) Wireframe
Hauptnavigation
Logo Suche & Links
Überschrift
Inhalt
Footer
Irgendein Plugin
• 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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Content Wireframe
• Content (Reference) Wireframe
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Content Wireframe
• Content (Reference) Wireframe
http://typostrap.io
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
CreateContent
• 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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
CreateContent
• Content erstellen (gitbook.io)
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
CreateContent
• Content erstellen (Pandoc)
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
CreateContent
• Content erstellen
StrategieZiel-
gruppenAnalyse
PersonaUser Story
CustomerJourney
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
StyleTileAtomic 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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
StyleTileAtomic Design
www.meljennings.co.uk
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
StyleTileAtomic Design
• Atomic Design
http://smm.zoomquiet.io/data/20110511083224/index.html
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
StyleTileAtomic Design
• Atomic Design (Brad Frost)http://bradfrostweb.com/blog/post/atomic-web-design/ http://patternlab.io/
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
StyleTileAtomic 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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
LinearDesign
• 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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Agentur-Workflow?Change-Prozess!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Kunden-Workflow?Kunden-Erziehung!
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
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Kontakt
Klassisch:+Pluswerk GmbHPatrick LobacherSolmstr. 6A60486 Frankfurt am Main Fon: +49 89 130 145 20 Email: [email protected] Web: www.plus-werk.com
Twitter: www.twitter.com/PatrickLobacherFacebook: www.facebook.com/patrick.lobacherBlog: blog.lobacher.de Schulungen: www.lobacher.deGoogle+:plus.google.com/105500420878314068694
XING: www.xing.com/profile/Patrick_LobacherLinkedInwww.linkedin.com/pub/patrick-lobacher/4/881/171Slideshare: www.slideshare.net/plobacherAmazon: www.amazon.de/Patrick-Lobacher/e/B0045AQVEA
Profil: Full Service Agentur für digitale KommunikationSchwerpunkt: Open Source Technologie Kunden: Enterprise & KMU
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | RWD Workflow - ein praktischer Leitfaden | www.plus-werk.com | 28.10.2014
RWD Workflow - ein praktischer Leitfaden
Referenzen (Auszug: +Pluswerk/net-o-graphic/typofaktum/typovision)