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

(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

http://www.plus-werk.com




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


RWD - Begriffsklärung




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


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




www.samsung.com www.opera.com





www.apple.com





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


Der RWD Prozess




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





LastenheftPflichten-

heft Design Frontend

Linearer / Wasserfall-Prozess

QA





„Stacey Matrix“

Technologie unbekanntbekannt

Anfo

rder

unge

nbe

kann

tun

beka

nnt

einfach kompliziert

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/





Frontend Planning / Contract

RWD

Proto- typing

ContentStrategy

DeviceTesting

StyleTileAtomic DesignContent

Testing

CreateContent

ContentWireframe

LinearDesign





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)





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





Content Wireframe






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.


http://www.axure.com

https://balsamiq.com

http://getwirefy.com

http://codecondo.com/free-wireframe-tools/

http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302




Content Wireframe


http://typostrap.io


http://typostrap.io




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

• …





CreateContent

• Content erstellen (gitbook.io)





CreateContent

• Content erstellen (Pandoc)





CreateContent

• Content erstellen

StrategieZiel-

gruppenAnalyse

PersonaUser Story

CustomerJourney





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/





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

/


http://commons.wikimedia.org/wiki/File%3AWaterfall_model_(1).svg





www.meljennings.co.uk






• Atomic Design

http://smm.zoomquiet.io/data/20110511083224/index.html






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






• 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





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






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!



Ähhhhhhh… aber…




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


http://twitter.com/PatrickLobacher

http://www.lobacher.de

http://www.xing.com/profile/Patrick_Lobacher

http://www.linkedin.com/pub/patrick-lobacher/4/881/171

http://www.slideshare.net/plobacher

http://www.amazon.de/Patrick-Lobacher/e/B0045AQVEA




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


Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)

Internet

Transcript of Responsive Webdesign Workflow – ein praktischer Leitfaden (IPC 2014)