Post on 02-Jan-2017
transcript
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 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
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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
RWD - Quo Vadis
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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“
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
http://alistapart.com/article/responsive-web-design
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
RWD = Media Queries + Fluid Grids + Flexible Images
?
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Responsive Adaptive
Aaron Gustavson / Brad Frost / Rest of World
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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, …)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
http://themeforest.net/item/travel-island-responsive-jigoshop-ecommerce-wordpress-theme/2283659
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
> 30 Millionen verkaufte Exemplare in 2015
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
82%
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
www.apple.com 5120 x 2880 Pixel
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
http://www.businessinsider.com/android-fragmentation-2014-818796 Android Geräte
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Der RWD Prozess
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
LastenheftPflichten-
heft Design Frontend
Linearer / Wasserfall-Prozess
QA
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
RESPONSIVE = REAGIEREND
CONTENT
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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/
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Frontend Planning / Contract
RWD
Proto- typing
ContentStrategy
DeviceTesting
StyleTileAtomic DesignContent
Testing
CreateContent
ContentWireframe
LinearDesign
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Content Strategy
• Content Strategy (Consulting)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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 )
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Content Strategy
• Content Strategy (Consulting)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Content Strategy
• Content Strategy (Consulting)
http://de.slideshare.net/clarissapeterson/content-strategy-for-responsive-websites
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Content Wireframe
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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.
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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#/
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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
• …
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
CreateContent
• Content erstellen (gitbook.io)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
CreateContent
• Content erstellen (Pandoc)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
CreateContent
• Content erstellen (Dexy / Jekyll)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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/
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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/
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
StyleTileAtomic Design
• Style Tile
http://styletil.es/downloads/Style_Tile_Template.psd.zip
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
StyleTileAtomic Design
• Atomic Design (Brad Frost)http://bradfrostweb.com/blog/post/atomic-web-design/
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
StyleTileAtomic Design
• Atomic Design (Brad Frost)
http://patternlab.io/
• Static Site Builder
• PHP
• Mustache
• Compass / SCSS
• …
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
StyleTileAtomic Design
• Atomic Design (Brad Frost)
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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!
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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!
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.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
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Frontend Planning / Contract
RWD
Proto- typing
ContentStrategy
DeviceTesting
StyleTileAtomic DesignContent
Testing
CreateContent
ContentWireframe
LinearDesign
Ähhhhhhh… aber…
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Wir machen das aber immer anders…
Change-Prozess
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Mit unserem Kunden geht das nicht…Aufklärung und
Erziehung!
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Coaching / Training
Consulting
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Fragen?
Slides: www.lobacher.de/webinale15-rwd
Besten Dank für Eure Aufmerksamkeit!
Besten Dank für Eure Aufmerksamkeit!
pluswerk.ag
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Kontakt
Klassisch:+Pluswerk AGPatrick LobacherSolmstr. 6A60486 Frankfurt am Main Fon: +49 89 130 145 20 Email: patrick.lobacher@pluswerk.ag Web: www.pluswerk.ag
Twitter: www.twitter.com/PatrickLobacherFacebook: www.facebook.com/patrick.lobacherBlog: pluswerk.ag/blogGoogle+: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
Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 08.06.2015
Responsive Webdesign in a Nutshell
Referenzen (Auszug: +Pluswerk/net-o-graphic/typofaktum/typovision)