Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell

Das Buzzword „RWD“ ist nun mittlerweile flächendeckend angekommen. Aber was heißt das konkret? Reicht es, Inhalt hin und her zu schieben, wenn das Display sich verändert oder ist die Welt des Responsive Webdesigns doch deutlich größer? Und wie setzt man RWD ganz konkret um – in großen und kleinen Projekten, auf Webseiten und auf E-Commerce-Applikationen, auf aktuellen und zukünftigen Devices. Der Vortrag zeigt die ganze Welt des RWD aus Sicht des Prozesses auf und gibt praktische Tipps und Tricks zur profesionellen Umsetzung.

  • Be the first to comment

  • Be the first to like this

Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell

  1. 1. Responsive Webdesign in a Nutshell
 
 Patrick Lobacher 
 Vorstandsvorsitzender +Pluswerk AG 16.06.2015 DWX Developer Week 2015
  2. 2. Disclaimer: Keine Technik! 
 Patrick Lobacher 
 GF +Pluswerk GmbH Slides: www.lobacher.de/dwx15-rwd
  3. 3. 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
  4. 4. 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
  5. 5. RWD - Quo Vadis
  6. 6. 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“
  7. 7. 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
  8. 8. 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
 
 
 
 ?
  9. 9. 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
  10. 10. 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, …)
  11. 11. 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
  12. 12. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell
  13. 13. 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
  14. 14. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell 82%
  15. 15. 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
  16. 16. 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
  17. 17. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell
  18. 18. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell
  19. 19. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell
  20. 20. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell
  21. 21. Der RWD Prozess
  22. 22. 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)
  23. 23. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell Lastenheft Pflichten- heft Design Frontend Linearer / Wasserfall-Prozess QA
  24. 24. 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
  25. 25. 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
  26. 26. 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“ Freiheitsgrade
 Wie vielewenig Anforderungen
 Was bekanntunbekannt einfach kompliziert kompliziert chaotisch Klassisches Webdesign
 
 >> kompliziert << Responsive Webdesign
 
 >> komplex << komplex komplex komplex komplex komplex
  27. 27. 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“ Freiheitsgrade
 Wie vielewenig Anforderungen
 Was bekanntunbekannt Wasserfall Wasserfall Wasserfall Agil Klassisches Webdesign
 
 >> kompliziert << Responsive Webdesign
 
 >> komplex << Agil Agil Agil Agil Agil
  28. 28. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell
  29. 29. 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/
  30. 30. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell FrontendPlanning / Contract RWD Proto- typing Content
 Strategy Device
 Testing StyleTile
 Atomic DesignContent
 Testing Create
 Content Content
 Wireframe Linear
 Design
  31. 31. 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)
  32. 32. 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 )
  33. 33. 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)
  34. 34. 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
  35. 35. 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

  36. 36. 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
  37. 37. 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.

  38. 38. 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#/
  39. 39. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell Create
 Content • 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 • …
  40. 40. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell Create
 Content • Content erstellen (gitbook.io)
  41. 41. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell Create
 Content • Content erstellen (Pandoc)
  42. 42. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell Create
 Content • Content erstellen (Dexy / Jekyll)
  43. 43. 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/
  44. 44. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell 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/
  45. 45. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell StyleTile
 Atomic Design • Style Tile http://styletil.es/downloads/Style_Tile_Template.psd.zip
  46. 46. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell StyleTile
 Atomic Design • Atomic Design (Brad Frost) http://bradfrostweb.com/blog/post/atomic-web-design/
  47. 47. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell StyleTile
 Atomic Design • Atomic Design (Brad Frost) http://patternlab.io/ • Static Site Builder • PHP • Mustache • Compass / SCSS • …
  48. 48. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell StyleTile
 Atomic Design • Atomic Design (Brad Frost)
  49. 49. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell 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 • Freigabe durch den Kunden!
  50. 50. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell 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
  51. 51. 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!
  52. 52. 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
  53. 53. 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
  54. 54. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell FrontendPlanning / Contract RWD Proto- typing Content
 Strategy Device
 Testing StyleTile
 Atomic DesignContent
 Testing Create
 Content Content
 Wireframe Linear
 Design
  55. 55. Ähhhhhhh… aber…
  56. 56. 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
  57. 57. 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!
  58. 58. 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
  59. 59. Responsive Webdesign verkaufen (c) 2015 - Patrick Lobacher | Responsive Webdesign in a Nutshell | www.pluswerk.ag | 16.06.2015 Responsive Webdesign in a Nutshell
  60. 60. Fragen? Slides: www.lobacher.de/dwx15-rwd
  61. 61. Besten Dank für Eure Aufmerksamkeit! Besten Dank für Eure Aufmerksamkeit!
 
 pluswerk.ag
  62. 62. 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)

×