Was nicht passt wird responsive gemacht - conference edition

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