La technique des Fab Four

Intégrer des e-mails responsive, c'est difficile. Et ça impose de travailler avec un support de CSS minimal, souvent sans media queries. Voici la présentation d'une technique un peu tordue permettant d'optimiser du contenu sur mobile, sans media queries. Et un premier pas vers des Element Queries…

Transcript

1. Best Of Web Vendredi 9 juin 2017
2. Rémi Parmentier @HTeuMeuLeu
3. Il y a deux choses compliquées en informatique : l'invalidation d'un cache et nommer les choses. “ — Phil Karlton ”
4. Il y a trois choses compliquées en informatique : l'invalidation d'un cache et nommer les choses et faire des e-mails responsive. “ ”
5. C'est compliqué de faire des e-mails responsive.
6. Apple Mail Gmail Outlook Yahoo! Orange Android Support de @media sur mobile en 2016 iOS Android Webmail mobile iOS Android Outlook.com Android 4 iOS 9 iOS 8 iOS 7 Webmail mobile iOS Android Office 365 Android 5+ ✔ ✔ ✔ ✔
7. Source : http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
10. sans media queries ? Comment agrandir une colonne sur mobile
11. F L E X B O X
13. .grid { display: flex; flex-wrap: wrap; flex-direction: row; } ! .grid > * { flex: 1 1 auto; }
14. .grid { display: flex; }
16. sans media queries ? Comment agrandir une colonne sur mobile
17. sans media queries et sans flexbox ? Comment agrandir une colonne sur mobile
18. Trois idées qui m'ont mis la puce à l'oreille
19. Premièrement Le support CSS de Gmail
20. .hero { background: url(image.jpg) 0 0; background-size: cover; }
21. .hero { background: url(image.jpg) 0 0; }
22. .hero { background: url(image.jpg) 0 0 / cover; }
23. .hero { background: radial-gradient( circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% ); }
24. Source : http://emailweekly.co/
25. .column { width: calc(100% - 50px); }
26. calc(100% - 50px);
27. calc(100% * 50px); ✖
28. calc(100% / 50px); ✖
29. calc(100% / 4);
30. Deuxièmement Typographie responsive
31. Source : http://madebymike.com.au/writing/precise-control-responsive-typography/
32. font-size: calc( 12px + (24 - 12) * ( (100vw - 400px) / ( 800 - 400) ));
33. Troisièmement « La taille ça compte »
34. Source : http://goetter.tumblr.com/post/64119638003/quiz-parce-que-la-taille-%C3%A7a-compte
35. min-width, width et max-width C'est qui le plus fort ?
36. min-width: ; width: ; max-width: ; 160px 320px 480px
37. 320px min-width: ; width: ; max-width: ; 160px 480px
38. 480px min-width: ; width: ; max-width: ; 320px 160px
40. Bingo !
41. width,! min-width,! max-width,! & calc()
42. La technique 
 des Fab Four Illustrations by Elias Stein : https://dribbble.com/shots/2012203-Paul-George
44. Il y a trois choses compliquées en informatique : l'invalidation d'un cache et nommer les choses et faire des e-mails responsive. “ ”
45. La technique 
 des Fab Four
47. max-­‐width:100%;   min-­‐width:25%;   width:calc((480px  -­‐  100%)  *  480); En dessous du point de rupture Au dessus du point de rupture Le point de rupture
48. max-­‐width:100%;   min-­‐width:25%;   width:calc((480px  -­‐  100%)  *  480); avec un parent à 500px 500px 125px 500px
49. max-­‐width:   min-­‐width:   width: avec un parent à 500px 500px 125px -­‐9600px
50. max-­‐width:   min-­‐width:   width: avec un parent à 500px 500px 125px -­‐9600px avec un parent à 500px
51. max-­‐width:100%;   min-­‐width:25%;   width:calc((480px  -­‐  100%)  *  480); avec un parent à 400px 400px 100px 400px
52. max-­‐width:100%;   min-­‐width:25%;   width:calc( avec un parent à 400px 400px 100px 38400px
53. max-­‐width:100%;   min-­‐width:25%;   width:calc( avec un parent à 400px 400px 200px 38400px avec un parent à 400px
55. Support Apple Mail Gmail Outlook.com
 (2015) Thunderbird Orange AOL
56. Support sur Outlook.com (version 2015)
58. width:calc((480px  -­‐  100%)  *  480);
59. width:calc(480px  *  480  -­‐  100%  *  480);
60. Support sur 
 les vieux WebKit Safari 6 et moins
61. max-­‐width:100%;   min-­‐width:25%;   width:calc(480px  *  480  -­‐  100%  *  480);
62. max-­‐width:100%;   min-­‐width:25%;   width:-­‐webkit-­‐calc(480px  *  480  -­‐  100%  *  480);   width:calc(480px  *  480  -­‐  100%  *  480);
63. Dégradation gracieuse sans calc()
64. display:inline-­‐block;   min-­‐width:120px;   width:25%;
65. max-­‐width:100%;   min-­‐width:25%;   width:-­‐webkit-­‐calc(480px  *  480  -­‐  100%  *  480);   width:calc(480px  *  480  -­‐  100%  *  480); display:inline-­‐block;   min-­‐width:120px;   width:25%;
66. max-­‐width:100%;   min-­‐width:calc(25%);   width:-­‐webkit-­‐calc(480px  *  480  -­‐  100%  *  480);   width:calc(480px  *  480  -­‐  100%  *  480); display:inline-­‐block;   min-­‐width:120px;   width:25%;
67. max-­‐width:100%;   min-­‐width:-­‐webkit-­‐calc(25%);   min-­‐width:calc(25%);   width:-­‐webkit-­‐calc(480px  *  480  -­‐  100%  *  480);   width:calc(480px  *  480  -­‐  100%  *  480); display:inline-­‐block;   min-­‐width:120px;   width:25%;
68. Support sur Outlook.com (version 2016)
70. <div  style="display:inline-­‐block;     min-­‐width:120px;   width:25%;   max-­‐width:100%;     min-­‐width:-­‐webkit-­‐calc(25%);     min-­‐width:calc(25%);     width:-­‐webkit-­‐calc(480px  *  480  -­‐  100%  *  480);   width:calc(480px  *  480  -­‐  100%  *  480);">     …   </div>
71. <div  style="">     …   </div>
72. width:calc(480px  *  480  -­‐  100%  *  480);
73. width:calc(230400px  -­‐  48000%);
74. <div  style="display:inline-­‐block;     min-­‐width:120px;   width:25%;   max-­‐width:100%;     min-­‐width:-­‐webkit-­‐calc(25%);     min-­‐width:calc(25%);     width:-­‐webkit-­‐calc(230400px  -­‐  48000%);   width:calc(230400px  -­‐  48000%);">     …   </div>
75. <div  style="display:inline-­‐block;     min-­‐width:120px;   width:25%;   max-­‐width:100%;">     …   </div>
76. Épilogue Décembre 2015 Recherches
77. Épilogue Décembre 2015 Recherches
78. Février 2016 Publication sur Medium Septembre 2016 Gmail supporte les media queries
79. Element Queries
82. @media (max-width:1024px) { .column { width: 25%; } } ✖
83. @media (max-width:1024px) { .main .column { width: 25%; } ! .side .column { width: 50%; } }
84. Source : https://alistapart.com/article/container-queries-once-more-unto-the-breach
85. .column { width: 25%; } ! .parent:(max-width:480px) .column { width: 50%; }
86. Element Queries
87. Merci ! @HTeuMeuLeu www.hteumeuleu.fr