Save 37% off PRO during our Black Friday Sale! »

Was nicht passt wird responsive gemacht - conference edition

Was nicht passt wird responsive gemacht - conference edition

the slides from my responsive presentation at code.talks 2014 in hamburg

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

October 10, 2014
Tweet

Transcript

  1. Christoph Reinartz CONFERENCE EDITION

  2. @pistenprinz

  3. Die Ausgangslage (c) Senator Film Verleih

  4. https://www.flickr.com/photos/glenscott/509720363

  5. https://www.flickr.com/photos/lukew/10430507184/

  6. Abweichung von Ideal Parametern

  7. None
  8. Mobiler traffic

  9. Mobiler „clickout“ share

  10. Der klassische Ansatz • 2 Webseiten • Desktop-Seite • speziell

    auf mobile Geräte angepasste mobile Seite • Redirect auf m. * je nach User-Agent
  11. Die mobile Site...

  12. Die mobile Site...

  13. None
  14. Bullshit

  15. Bullshit Bullshit Bullshit Bullshit Bullshit

  16. Bullshit Bullshit Bullshit Bullshit Bullshit Kein Bullshit

  17. https://www.flickr.com/photos/janitors/10081142374

  18. https://www.flickr.com/photos/scaar/8473324580

  19. https://www.flickr.com/photos/shebalso/12341492965

  20. Der responsive Ansatz Eine Webseite, die sich automatisch dem Device

    (Screen-Größe) anpasst
  21. Beispiel: The Boston Globe • Full „fluid“ responsive • fluid

    innerhalb der Breakpoints • funktioniert gut bei textlastigen Seiten http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
  22. None
  23. Beispiel: trivago • Sprungstufen-basiertes Layout • adaptives Layout • innerhalb

    der Breakpoints fixe Darstellung • ohne kompletten Relaunch möglich
  24. Desktop, iMac, Laptop

  25. Landscape Tablet, Netbook

  26. IPad, Tablets

  27. Filterleiste einblendbar

  28. Smartphone

  29. Eine Definition Responsive web design isn’t your site working on

    phones and tablets. It’s about your site working everywhere. https://twitter.com/ScottKellum
  30. Ich würde sagen dat passt! (c) Senator Film Verleih

  31. None
  32. None
  33. None
  34. None
  35. Alter Kontext MODERNER BROWSER FOKUSIERT STATIONÄR BEQUEM SCHNELLE VERBINDUNG SCHNELLE

    CPU EFFIZIENTE EINGABE
  36. 960 https://www.flickr.com/photos/tomwachtel/14015354802

  37. 2007 https://www.flickr.com/photos/dahlstroms/6750733205

  38. http://maddesigns.de/responsive-workflow/#11

  39. Android Fragmentation http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

  40. None
  41. https://www.flickr.com/photos/adactio/5818096043

  42. None
  43. Zutaten nach dem Rezept 
 von Ethan Marcotte ! •

    Relative Maße • Ein flexibles gridbasiertes Layout • Flexible Images und Medien • Media Queries
  44. EMs nutzen • skalierbare Einheit • 1em = aktuelle Fontgröße

    • 2em = doppelte Fontgröße body {font-size: 100%} body {font-size: 150%} font-size: 12px Textbeispiel Textbeispiel font-size: 1em Textbeispiel Textbeispiel
  45. None
  46. Sieh das mal relativ! ! ! target / context =

    result Erstellung relativer Maße: Fonts / Grids
  47. Flexible Grids / Maße 960px 200px target / context =

    result (200 / 960) * 100 = 20,83%
  48. Flexible / fluid media Fluid Images: max-width http://clagnut.com/sandbox/imagetest/ img, embed,

    object, video { max-width: 100%; }
  49. Flexible / fluid media

  50. Flexible / fluid media

  51. Flexible / fluid media

  52. Media Types CSS 2.1 Media Types ! <link rel="stylesheet" type="text/css"

    href="core.css" media="screen" /> ! <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  53. Media Queries CSS3 Nicht nur Device Typen sondern Devicegerätetypische Eigenschaften

    abfragen ! <link rel="stylesheet" type="text/css" href="style.css" media="screen and (device-width: 480px)" />
  54. Media Queries Mehrere Eigenschaften in einer Query ! @media screen

    and (max-device-width: 480px) 
 and (resolution: 192dpi) { 
 .column { float: none; } }
  55. Viewport https://www.flickr.com/photos/mendhak/2252824493

  56. Viewport-Metatag <meta content="width=device-width, initial-scale=1.0" name="viewport" /> Mit Viewport-Metatag viewport-width =

    device-width ! Ohne Viewport-Metatag Default-Canvas ~980px http://bkaprt.com/rwd/29
  57. Klassischer Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a- responsive-project/

  58. Responsive Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a- responsive-project/

  59. 59 https://www.flickr.com/photos/the-magic-tuba-pixie/5806342006 Prototype

  60. Prototype A Prototype is worth
 a thousand meetings

  61. Aus der Praxis (c) Senator Film Verleih

  62. A/B Testing https://www.flickr.com/photos/esparta/4482887906

  63. Der User schlägt zurück

  64. Der User schlägt zurück Nicht mit uns !

  65. Der User schlägt zurück https://www.flickr.com/photos/95284782@N06/8880500036

  66. Jawohl, dat passt! (c) Senator Film Verleih

  67. The Truth… Your visitors don’t give 
 a shit if

    your site 
 is responsive. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  68. None
  69. None
  70. None
  71. So doch nicht !!

  72. Mobile Strategie You May Be Losing Users 
 If Responsive

    Web Design Is Your Only Mobile Strategy http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/
  73. Page Sizes 72% of responsive websites deliver the same number

    of bytes regardless of screen size, even on slow mobile network connections. 
 http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
  74. Den Ferrari nicht schrotten! http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive- webdesign-schrott-ist/

  75. Verbesserungen https://www.flickr.com/photos/91173606@N00/3448611327

  76. Gleiche URL, aber andere Struktur https://www.flickr.com/photos/chrisdlugosz/3402955869

  77. Mobile First Ansatz wählen https://www.flickr.com/photos/pixel_boogie/3451813645

  78. Content First https://www.flickr.com/photos/klara/4236116910

  79. Performance messen / verbessern https://www.flickr.com/photos/aussiegall/286709039

  80. Auf echten Devices testen https://www.flickr.com/photos/hysysk/4042285394

  81. Conditional loading https://www.flickr.com/photos/webethere/8708630443

  82. Responsive Images

  83. Responsible RWD

  84. http://bradfrostweb.com/ blog/post/beyond-squishy- the-principles-of-adaptive- design/ Responsible RWD

  85. Ich habe fertig! !

  86. Danke! Prosit! (c) Senator Film Verleih

  87. Vielen Dank an Senator Film Verleih