Responsive Webdesign in a Nutshell - webinale 2015

Responsive Webdesign
in a Nutshell 
 
Patrick Lobacher  
Vorstandsvorsitzender +Pluswerk AG
08.06.2015

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

Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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!
• Freigabe durch  
den Kunden!
Device Testing

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/webinale15-rwd

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

Kontakt
Klassisch: 
 
+Pluswerk AG 
Patrick Lobacher 
Solmstr. 6A 
60486 Frankfurt am Main 
 
Fon: +49 89 130 145 20 
 
Email: patrick.lobacher@pluswerk.ag 
Web: www.pluswerk.ag
 
 
 
Twitter:  
www.twitter.com/PatrickLobacher 
 
Facebook:  
www.facebook.com/patrick.lobacher 
 
Blog:
pluswerk.ag/blog 
 
Google+: 
plus.google.com/105500420878314068694 
 
 
 
 
 
XING:  
www.xing.com/proﬁle/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

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

Responsive Webdesign in a Nutshell - webinale 2015

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (17)

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie Responsive Webdesign in a Nutshell - webinale 2015

Ähnlich wie Responsive Webdesign in a Nutshell - webinale 2015 (20)

Mehr von die.agilen GmbH

Mehr von die.agilen GmbH (20)

Responsive Webdesign in a Nutshell - webinale 2015