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

Was nicht passt wird responsive gemacht - Extended Edition

Was nicht passt wird responsive gemacht - Extended Edition

Die überarbeitete Version meiner Responsive Web Design Präsentation, vorgetragen auf dem Learners Meetup der Open Tech School Dortmund

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

September 17, 2014
Tweet

Transcript

  1. Christoph Reinartz EXTENDED VERSION

  2. /* About me */ .me { name: “Christoph Reinartz“; link:

    “http://creinartz.de“; twitter: “@pistenprinz“; location: “Mönchengladbach“; } .job--trv { company: “trivago GmbH“; title: “Front-end Developer“; from: “November 2012“; responsibilities: “Coordination UI-Development“, “Front-end/CSS architecture“; }
  3. Die Ausgangslage

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

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

  6. May the force be with you Auf jedes Device Dein

    Design passen muss! Alles klar!? Auf all den Geräten soll dat laufen?
  7. Abweichung von Ideal Parametern

  8. None
  9. Mobiler traffic

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

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

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

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

  14. None
  15. Bullshit

  16. Bullshit Bullshit Bullshit Bullshit Bullshit

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

    (Screen-Größe) anpasst
  18. 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/
  19. None
  20. Beispiel: trivago • Sprungstufen-basiertes Layout • innerhalb der Breakpoints fixe

    Darstellung • ohne kompletten Relaunch möglich
  21. Desktop, iMac, Laptop

  22. Landscape Tablet, Netbook

  23. IPad, Tablets

  24. Filterleiste einblendbar

  25. Smartphone

  26. 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
  27. Ja guck ma hier! Dat passt selbst auf der Möhre

    da!
  28. None
  29. None
  30. None
  31. Alter Kontext MODERNER BROWSER FOKUSIERT STATIONÄR BEQUEM SCHNELLE VERBINDUNG SCHNELLE

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

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

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

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

  36. None
  37. None
  38. https://www.flickr.com/photos/adactio/5818096043

  39. None
  40. Zutaten nach dem Rezept 
 von Ethan Marcotte ! •

    Relative Maße • Ein flexibles gridbasiertes Layout • Flexible Images und Medien • Media Queries
  41. Sieh das mal relativ! ! ! target / context =

    result Erstellung relativer Maße: Fonts / Grids
  42. EMs nutzen • skalierbare Einheit • 1em = aktuelle Fontgröße

    • 2em = doppelte Fontgröße
  43. Flexible Grids / Maße #page { max-width: 61.75em; /* 988px

    / 16px = 61.75em */ } h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */ } !
  44. None
  45. Flexible / fluid media Fluid Images: max-width http://clagnut.com/sandbox/imagetest/ img, embed,

    object, video { max-width: 100%; } Background-Images: CSS3, MediaQueries
  46. 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" />
  47. 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)" />
  48. Media Queries Mehrere Eigenschaften in einer Query ! @media screen

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

  50. 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
  51. Klassischer Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a- responsive-project/

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

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

  54. Prototype A Prototype is worth
 a thousand meetings

  55. Aus der Praxis

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

  57. Der User schlägt zurück

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

  59. 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/
  60. None
  61. None
  62. None
  63. None
  64. 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/
  65. 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/
  66. Den Ferrari nicht schrotten! http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive- webdesign-schrott-ist/

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

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

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

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

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

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

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

  74. Responsive Images

  75. Responsible RWD

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

  77. Ich habe fertig! ! http://www.levien.com/type/myfonts/inconsolata.html

  78. Danke! Prosit!

  79. Vielen Dank an Senator Film Verleih