La technique des Fab Four

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…

A6201a057eac39e2b97a5a58d5f8601e?s=128

HTeuMeuLeu

June 09, 2017
Tweet

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

  8. None
  9. None
  10. sans media queries ? Comment agrandir une colonne sur mobile

  11. F L E X B O X

  12. None
  13. .grid { display: flex; flex-wrap: wrap; flex-direction: row; } !

    .grid > * { flex: 1 1 auto; }
  14. .grid { display: flex; }

  15. None
  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

  39. None
  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
  43. None
  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

  46. None
  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
  54. None
  55. Support Apple Mail Gmail Outlook.com
 (2015) Thunderbird Orange AOL

  56. Support sur Outlook.com (version 2015)

  57. None
  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)

  69. None
  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

  80. None
  81. None
  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