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: lobacher@plus-werk.com 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)