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

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

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

www.samsung.com www.opera.com

www.apple.com

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

Der RWD Prozess

• 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

„Stacey Matrix“

Technologie unbekanntbekannt

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

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

Content Wireframe

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

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/

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!

plus-werk.com

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

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)

Wie funktioniert Responsive Webdesign?Wie funktioniert ... · Wie funktioniert Responsive Webdesign?Wie funktioniert Responsive Webdesign? ˜˚˛˝˙ˆ˛ˇ˘˚ ˚ ˚˛ˇ ˆ in 5 Minuten.

Usability-Testing von Responsive Webdesign€¦ · 18 Usability-Testing von Responsive Webdesign Martin Beschnitt Managing Director & Senior UX-Consultant 040 36166-7981 martin.beschnitt@eresult.de

Responsive Webdesign verkaufen

Typografie im Responsive Webdesign

Wie kann mit Hilfe von Responsive Webdesign …...Bachelorarbeit Wie kann mit Hilfe von Responsive Webdesi gn (RWD) die Usability von W ebsites verbessert werden?! eingereicht von

Warum Responsive Webdesign scheitern muss... (MobileTech Conference 2014)

Responsive Webdesign Process

Responsive Webdesign: Prozess, Dialog, Qualität

Responsive Webdesign

Webinale 14: Responsive Webdesign verkaufen / Pluswerk

Souper Tuesday - Responsive Webdesign

Leseprobe Christoph Zillgens Responsive Webdesignfiles.hanser.de/Files/Article/ARTK_LPR_9783446430150_0001.pdf · 7 Was ist Responsive Webdesign? »Responsive Web Design« heißt

Workshop Responsive Webdesign 2015

Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014

€¦ · WEBDESIGN RUMMEL . studiowerbung. werbeagentur Responsive Webdesign Mobile Endgeräte werden immer kleiner, stationäre Bildschirme immer größer. Mit Responsive Webdesign

Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Responsive Webdesign verkaufen - MobileTech Conference 2014

Responsive webdesign mobil optimierte website

Florence Maurice Mobile Webseiten Strategien, Techniken ...files.hanser.de/Files/Article/ARTK_STV_9783446432796_0001.pdf · Responsive Images 267 Responsive Webdesign 17, 19 ff.,

U5 Responsive Webdesign - mediencommunity.de Responsive Webdesign_0.pdf · U5: Responsive Webdesign Vorteile - Mehr Usability - Mehrere Darstellungen auf versch. Endgeräten - Reichweite