Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell

Responsive Webdesign
in a Nutshell 
 
Patrick Lobacher  
Vorstandsvorsitzender +Pluswerk AG
16.06.2015
DWX
Developer
Week 2015

Disclaimer:
Keine Technik!
 
Patrick Lobacher  
GF +Pluswerk GmbH
Slides: www.lobacher.de/dwx15-rwd

Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Veröffentlichungen:
Patrick Lobacher 
Vorstandsvorsitzender +Pluswerk AG
• 44 Jahre, glücklich verheiratet, wohnhaft in
München
• Selbständig im Bereich Webentwicklung seit 1994
• Autor von 10 Fachbüchern und > 60 Fachartikeln
zum Thema Webentwicklung & Consulting
• Mitglied im TYPO3 Education Committee
• Speaker, Trainer, Consultant, Coach, Nerd

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

Anforderungen an ein Projekt:
1. Wichtige Anforderung 1
4. …
5. …
6. …
7. …
8. ….
9. natürlich „responsive“

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

RWD = Media Queries +
Fluid Grids +
Flexible Images 
 
 
 
?

Responsive 
Adaptive
Aaron Gustavson / Brad Frost / Rest of World

Responsive? 
• "Reagierend" auf die Bildschirmbreite („El Clasico“)
• "Reagierend" auf die Bildschirmhöhe („Above the fold“)
• "Reagierend" auf die Geräteklasse (Desktop, Laptop, Smartphone,…)
• "Reagierend" auf das Device (Device Specific Bugs/Features)
• "Reagierend" auf die Übertragungsgeschwindigkeit (LTE, 3G, Edge)
• "Reagierend" auf die Bewegungsgeschwindigkeit (jActivity,…)
• „Reagierend“ auf „Connectivity“ (Offline first)
• "Reagierend" auf den Content! (Sprachen, A/B-Tests, …)

http://themeforest.net/item/travel-island-responsive-jigoshop-ecommerce-wordpress-theme/2283659

> 30 Millionen verkaufte Exemplare in 2015

82%

www.apple.com 5120 x 2880 Pixel

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

Normaler Ablauf in Agenturen 
3 Breakpoints (4 Darstellungen)
15 Seitentypen
3 Designvorschläge
= 270 PSD Dateien
=> bei 8h je PSD = 108.000 EUR
(Multivarianten / Sprachen / Prozesse)

Lastenheft
Pﬂichten-
heft
Design Frontend
Linearer / Wasserfall-Prozess
QA

RESPONSIVE = REAGIEREND
CONTENT

„Die Anforderungen an ein neues System sind solange nicht
vollständig bekannt, bis die Nutzer damit gearbeitet
haben“ (Humphrey)
Vier Thesen zu interaktiven Systemen
„Es ist unmöglich, ein interaktives System vollständig zu
speziﬁzieren“ (Wegner)
„Unsicherheiten existieren in allen Stufen der Softwareentwicklung
und sind unausweichlich“ (Ziv)
Pro Phase in der eine Anforderung geändert wird, steigt der
Aufwand zur Realisierung um die Größenordnung 10x

„Stacey Matrix“
Freiheitsgrade 
Wie
vielewenig
Anforderungen 
Was
bekanntunbekannt
einfach kompliziert
kompliziert
chaotisch
Klassisches
Webdesign 
 
>> kompliziert <<
Responsive
Webdesign 
 
>> komplex <<
komplex komplex
komplex komplex
komplex

„Stacey Matrix“
Freiheitsgrade 
Wie
vielewenig
Anforderungen 
Was
bekanntunbekannt
Wasserfall Wasserfall
Wasserfall
Agil
Klassisches
Webdesign 
 
>> kompliziert <<
Responsive
Webdesign 
 
>> komplex <<
Agil Agil
Agil Agil
Agil

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

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

Content 
Strategy
• Content Strategy (Consulting)

Content 
Strategy
• Consulting / Workshop
• 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-Audit / Content-Planung / Content-Produktion / Content-
Management )

Content 
Strategy
http://de.slideshare.net/clarissapeterson/content-strategy-for-responsive-websites

Content 
Wireframe
• Content (Reference) Wireframe
Hauptnavigation
Logo Suche & Links
Überschrift
Inhalt
Footer
Irgendein Plugin
• Welcher Inhalt ist wo
• Nur Rechtecke
• Kein Design!
• Mobile ﬁrst!
• Für jeden Major-Breakpoint
• Für jeden Seitentyp
• Für jeden Inhaltstyp
• Content Choreographie

Content 
Wireframe

Content 
Wireframe
• www.axure.com
• balsamiq.com
• getwirefy.com  
(Atomic Design)
• codecondo.com/free-wireframe-
tools/
• http://www.creativebloq.com/
wireframes/top-wireframing-
tools-11121302
• …u.s.w.

Content 
Wireframe
http://trentwalton.com/2011/07/14/content-choreography/http://media.kulturbanause.de/blog/2014/03/mtc2014-slides-content-choreography/index.html#/

Create 
Content
• Content erstellen
• Identiﬁzierung 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 (Dexy / Jekyll)

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://raison.co/design-process/

StyleTile 
Atomic Design
• Style Tile
http://styletil.es/downloads/Style_Tile_Template.psd.zip

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

StyleTile 
Atomic Design
http://patternlab.io/
• Static Site Builder
• PHP
• Mustache
• Compass / SCSS
• …

StyleTile 
Atomic Design

Linear 
Design
• Linear Design
• Anreichern des Content Dummys mit dem Basis Design
(CSS) aus dem Moodboard/StyleTile/AtomicDesign
• Farben, Schriften, Größen, vertikale Abstände
• Weitere Elemente wie: Listen, Links, Tabellen,
Blockquotes, …
• Anfangs linear - noch nicht positioniert
• Dient dazu, um zu sehen, wie „richtiger/realer“
Content wirkt und aussieht

Linear 
Design
• Linear Design
• Beschäftigung mit dem
Design in den
verschiedenen Geräten
• Verständnis über das
Medium aufbauen
• Experimentieren
• Starke Zusammenarbeit mit
der Technik (Webserver)
bzw. Frontend (Markup)
DEFINIERE 
Werte & Ziele
ENTDECKE 
Stimmungen & Metaphern
GENERIERE 
Ideen & Konzepte
ERZEUGE 
Visuelle Sprache
DESIGN

Prototyping
• Prototype (Design im Browser)
• Produktion eines Clickdummys mit  
HTML5/CSS3/JavaScript/...
• Dies führt zum ﬁnalen Layout - daher muss hier auf
die Positionierung geachtet werden
• Interaktiver Prozess mit dem Designer und dem
Kunden!
• Evolutionäre Vorgehensweise

Prototyping
• Prototype (Beschleunigung)
• RWD-Framework verwenden, wie Bootstrap oder
Foundation
• Präprozessor verwenden
• Browser-Kompatibilität vernachlässigen am
Anfang
• Nicht alle Details realisieren

• Device testing
• Test muss auf realen Testgeräten
durchgeführt werden - keine Simulatoren
möglich!
• Carrier / Device Bugs /  
Performance
• Gehe zu Open Device Labs (ODL)
• Für das Testen gibt es Tools!
Device Testing
http://odl-nbg.de/de

Wir machen das aber
immer anders…
Change-Prozess

Mit unserem Kunden
geht das nicht…
Aufklärung und
Erziehung!

Coaching / Training
Consulting

Fragen?
Slides: www.lobacher.de/dwx15-rwd

Besten Dank für Eure
Aufmerksamkeit!
Besten Dank für Eure
Aufmerksamkeit! 
 
pluswerk.ag

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

Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell

Semelhante a Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell (20)

Mais de die.agilen GmbH

Mais de die.agilen GmbH (17)

Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell