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.
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
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
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
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
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!