developer week / dwx 2015 - responsice webdesign in a nutshell
TRANSCRIPT
![Page 1: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/1.jpg)
Responsive Webdesign in a Nutshell
Patrick Lobacher Vorstandsvorsitzender +Pluswerk AG
16.06.2015
DWXDeveloperWeek 2015
![Page 2: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/2.jpg)
Disclaimer:
Keine Technik!
Patrick Lobacher GF +Pluswerk GmbH
Slides: www.lobacher.de/dwx15-rwd
![Page 3: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/3.jpg)
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 LobacherVorstandsvorsitzender +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
![Page 4: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/4.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Fullservice Agentur für digitale Kommunikation+[ 10 ] Standorte in Deutschland +[ 130 ] Mitarbeiter +[ 999 ] realisierte Projekte mit Magento und TYPO3
![Page 5: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/5.jpg)
RWD - Quo Vadis
![Page 6: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/6.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Anforderungen an ein Projekt:1. Wichtige Anforderung 1 2. Wichtige Anforderung 2 3. Wichtige Anforderung 3 4. … 5. … 6. … 7. … 8. …. 9. natürlich „responsive“
![Page 7: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/7.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
http://alistapart.com/article/responsive-web-design
![Page 8: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/8.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
RWD = Media Queries + Fluid Grids + Flexible Images
?
![Page 9: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/9.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Responsive Adaptive
Aaron Gustavson / Brad Frost / Rest of World
![Page 10: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/10.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
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, …)
![Page 11: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/11.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
http://themeforest.net/item/travel-island-responsive-jigoshop-ecommerce-wordpress-theme/2283659
![Page 12: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/12.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
![Page 13: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/13.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
> 30 Millionen verkaufte Exemplare in 2015
![Page 14: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/14.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
82%
![Page 15: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/15.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
www.apple.com 5120 x 2880 Pixel
![Page 16: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/16.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
http://www.businessinsider.com/android-fragmentation-2014-818796 Android Geräte
![Page 17: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/17.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
![Page 18: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/18.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
![Page 19: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/19.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
![Page 20: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/20.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
![Page 21: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/21.jpg)
Der RWD Prozess
![Page 22: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/22.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
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)
![Page 23: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/23.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
LastenheftPflichten-
heft Design Frontend
Linearer / Wasserfall-Prozess
QA
![Page 24: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/24.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
RESPONSIVE = REAGIEREND
CONTENT
![Page 25: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/25.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
„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 spezifizieren“ (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
![Page 26: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/26.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
„Stacey Matrix“
FreiheitsgradeWie
vielewenig
Anfo
rder
unge
nW
asbe
kann
tun
beka
nnt
einfach kompliziert
kompliziert
chaotisch
Klassisches Webdesign>> kompliziert <<
Responsive Webdesign>> komplex <<
komplex komplex
komplex komplex
komplex
![Page 27: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/27.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
„Stacey Matrix“
FreiheitsgradeWie
vielewenig
Anfo
rder
unge
nW
asbe
kann
tun
beka
nnt
Wasserfall Wasserfall
Wasserfall
Agil
Klassisches Webdesign>> kompliziert <<
Responsive Webdesign>> komplex <<
Agil Agil
Agil Agil
Agil
![Page 28: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/28.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
![Page 29: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/29.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
• Der Design-Prozess muss sich „radikal“ ändern • Content First • Mobile-First • Kein Layout mehr • Iterativ (Agil)
https://www.flickr.com/photos/gernot/134998970/
![Page 30: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/30.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Frontend Planning / Contract
RWD
Proto- typing
ContentStrategy
DeviceTesting
StyleTileAtomic DesignContent
Testing
CreateContent
ContentWireframe
LinearDesign
![Page 31: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/31.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Content Strategy
• Content Strategy (Consulting)
![Page 32: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/32.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Content Strategy
• Content Strategy (Consulting)
• 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 )
![Page 33: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/33.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Content Strategy
• Content Strategy (Consulting)
![Page 34: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/34.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Content Strategy
• Content Strategy (Consulting)
http://de.slideshare.net/clarissapeterson/content-strategy-for-responsive-websites
![Page 35: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/35.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
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
![Page 36: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/36.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Content Wireframe
![Page 37: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/37.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Content Wireframe
• Content (Reference) 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.
![Page 38: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/38.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Content Wireframe
• Content (Reference) Wireframe
http://trentwalton.com/2011/07/14/content-choreography/http://media.kulturbanause.de/blog/2014/03/mtc2014-slides-content-choreography/index.html#/
![Page 39: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/39.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
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
• …
![Page 40: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/40.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
CreateContent
• Content erstellen (gitbook.io)
![Page 41: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/41.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
CreateContent
• Content erstellen (Pandoc)
![Page 42: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/42.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
CreateContent
• Content erstellen (Dexy / Jekyll)
![Page 43: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/43.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
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/
![Page 44: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/44.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
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://raison.co/design-process/
![Page 45: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/45.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
StyleTileAtomic Design
• Style Tile
http://styletil.es/downloads/Style_Tile_Template.psd.zip
![Page 46: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/46.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
StyleTileAtomic Design
• Atomic Design (Brad Frost)http://bradfrostweb.com/blog/post/atomic-web-design/
![Page 47: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/47.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
StyleTileAtomic Design
• Atomic Design (Brad Frost)
http://patternlab.io/
• Static Site Builder
• PHP
• Mustache
• Compass / SCSS
• …
![Page 48: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/48.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
StyleTileAtomic Design
• Atomic Design (Brad Frost)
![Page 49: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/49.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
LinearDesign
• 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
• Freigabe durch den Kunden!
![Page 50: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/50.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
LinearDesign
• 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)
DEFINIEREWerte & Ziele
ENTDECKEStimmungen & Metaphern
GENERIEREIdeen & Konzepte
ERZEUGEVisuelle Sprache
DESIGN
![Page 51: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/51.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
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!
• Evolutionäre Vorgehensweise
• Freigabe durch den Kunden!
![Page 52: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/52.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Prototyping
• Prototype (Beschleunigung)
• RWD-Framework verwenden, wie Bootstrap oder Foundation
• Präprozessor verwenden
• Browser-Kompatibilität vernachlässigen am Anfang
• Nicht alle Details realisieren
![Page 53: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/53.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
• 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
http://odl-nbg.de/de
![Page 54: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/54.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Frontend Planning / Contract
RWD
Proto- typing
ContentStrategy
DeviceTesting
StyleTileAtomic DesignContent
Testing
CreateContent
ContentWireframe
LinearDesign
![Page 55: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/55.jpg)
Ähhhhhhh… aber…
![Page 56: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/56.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Wir machen das aber immer anders…
Change-Prozess
![Page 57: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/57.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Mit unserem Kunden geht das nicht…Aufklärung und
Erziehung!
![Page 58: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/58.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Coaching / Training
Consulting
![Page 59: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/59.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
![Page 60: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/60.jpg)
![Page 61: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/61.jpg)
Fragen?
Slides: www.lobacher.de/dwx15-rwd
![Page 62: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/62.jpg)
Besten Dank für Eure Aufmerksamkeit!
Besten Dank für Eure Aufmerksamkeit!
pluswerk.ag
![Page 63: Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell](https://reader030.vdocuments.mx/reader030/viewer/2022032503/55beb68abb61eb2b3c8b4702/html5/thumbnails/63.jpg)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015
Responsive Webdesign in a Nutshell
Referenzen (Auszug: +Pluswerk/net-o-graphic/typofaktum/typovision)