Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)

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

Agentur für digitale Kommunikation
+[ 10 ] Standorte in Deutschland
+[ 130 ] Mitarbeiter
+[ 999 ] realisierte Projekte mit Magento und TYPO3

http://alistapart.com/article/responsive-web-design

RWD = Media Queries +
Fluid Grids +
Flexible Images
?

http://alistapart.com/column/what-we-mean-when-we-say-responsive

Responsive
Adaptive
Aaron Gustavson / Brad Frost / Rest of World

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!

http://www.teco.edu/~budde/publications/MUM2013_poster_hauber.pdf

www.samsung.com www.opera.com

www.apple.com

18796 Android Geräte http://www.businessinsider.com/android-fragmentation-2014-8

982px

982px
971px

982px
971px
954px

982px
971px
954px
870px

982px
971px
954px
870px
763px

982px
971px
954px
870px
763px
620px

982px
971px
954px
870px
763px
620px
530px

982px
971px
954px
870px
763px
620px
530px
375px

• 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

Lastenheft
Pflichten-heft
Design Frontend
Linearer / Wasserfall-Prozess
QA

kompliziert
„Stacey Matrix“
bekannt Technologie unbekannt
bekannt Anforderungen unbekannt
einfach kompliziert
chaotisch
komplex

• Der Design-Prozess muss sich „radikal“
ändern
• Mobile-First! (Content-First)
• Kein Layout mehr
• Iterativ (Agil)
https://www.flickr.com/photos/gernot/134998970/

RWD
Planning / Contract Frontend
Proto-typing
Content
Strategy
Device
Testing
StyleTile
Content Atomic Design
Testing
Create
Content
Content
Wireframe
Linear
Design

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)

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

Content
Strategy
• Content Strategy (Consulting)

Irgendein Plugin
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

Content
Wireframe

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

Content
Wireframe
http://typostrap.io

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
• …

Create
Content
• Content erstellen (gitbook.io)

Create
Content
• Content erstellen (Pandoc)

Create
Content
• Content erstellen
Strategie
Ziel-gruppen
Analyse
Persona
User
Story
Customer
Journey

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/

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/

StyleTile
Atomic Design
www.meljennings.co.uk

StyleTile
Atomic Design
• Atomic Design
http://
smm.zoomquiet.io/
data/
20110511083224/
index.html

StyleTile
Atomic Design
• Atomic Design (Brad Frost)
http://bradfrostweb.com/blog/post/atomic-web-design/ http://patternlab.io/

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

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

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!

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!

Agentur-Workflow?
Change-Prozess!

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

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

Referenzen (Auszug: +Pluswerk/net-o-graphic/typofaktum/typovision)

Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (11)

Similar a Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)

Similar a Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014) (20)

Más de die.agilen GmbH

Más de die.agilen GmbH (20)

Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)