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
   

   View Slide

2. Rémi Parmentier
   @HTeuMeuLeu
   

   View Slide

3. Il y a deux choses compliquées
   en informatique :
   l'invalidation d'un cache
   et nommer les choses.
   “
   — Phil Karlton
   ”
   

   View Slide

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.
   “
   ”
   

   View Slide

5. C'est compliqué
   de faire des e-mails responsive.
   

   View Slide

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+
   ✔
   ✔
   ✔
   ✔
   

   View Slide

7. Source : http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
   

   View Slide

8. View Slide

9. View Slide

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

    View Slide

11. F L E X B O X
    

    View Slide

12. View Slide

13. .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    }
    !
    .grid > * {
    flex: 1 1 auto;
    }
    

    View Slide

14. .grid {
    display: flex;
    }
    

    View Slide

15. View Slide

16. sans media queries ?
    Comment agrandir une colonne sur mobile
    

    View Slide

17. sans media queries
    et sans flexbox ?
    Comment agrandir une colonne sur mobile
    

    View Slide

18. Trois idées
    qui m'ont mis la puce à l'oreille
    

    View Slide

19. Premièrement
    Le support CSS de Gmail
    

    View Slide

20. .hero {
    background: url(image.jpg) 0 0;
    background-size: cover;
    }
    

    View Slide

21. .hero {
    background: url(image.jpg) 0 0;
    }
    

    View Slide

22. .hero {
    background: url(image.jpg) 0 0 / cover;
    }
    

    View Slide

23. .hero {
    background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%,
    #d6249f 60%, #285aeb 90%
    );
    }
    

    View Slide

24. Source : http://emailweekly.co/
    

    View Slide

25. .column {
    width: calc(100% - 50px);
    }
    

    View Slide

26. calc(100% - 50px);
    

    View Slide

27. calc(100% * 50px);
    ✖
    

    View Slide

28. calc(100% / 50px);
    ✖
    

    View Slide

29. calc(100% / 4);
    

    View Slide

30. Deuxièmement
    Typographie responsive
    

    View Slide

31. Source : http://madebymike.com.au/writing/precise-control-responsive-typography/
    

    View Slide

32. font-size: calc( 12px + (24 - 12) * ( (100vw -
    400px) / ( 800 - 400) ));
    

    View Slide

33. Troisièmement
    « La taille ça compte »
    

    View Slide

34. Source : http://goetter.tumblr.com/post/64119638003/quiz-parce-que-la-taille-%C3%A7a-compte
    

    View Slide

35. min-width,
    width
    et max-width
    C'est qui le plus fort ?
    

    View Slide

36. min-width: ;
    width: ;
    max-width: ;
    160px
    320px
    480px
    

    View Slide

37. 320px
    min-width: ;
    width: ;
    max-width: ;
    160px
    480px
    

    View Slide

38. 480px
    min-width: ;
    width: ;
    max-width: ;
    320px
    160px
    

    View Slide

39. View Slide

40. Bingo !
    

    View Slide

41. width,!
    min-width,!
    max-width,!
    & calc()
    

    View Slide

42. La technique 

    des Fab Four
    Illustrations by Elias Stein : https://dribbble.com/shots/2012203-Paul-George
    

    View Slide

43. View Slide

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.
    “
    ”
    

    View Slide

45. La technique 

    des Fab Four
    

    View Slide

46. View Slide

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
    

    View Slide

48. max-­‐width:100%;  
    min-­‐width:25%;  
    width:calc((480px  -­‐  100%)  *  480);
    avec un parent à 500px
    500px
    125px
    500px
    

    View Slide

49. max-­‐width:  
    min-­‐width:  
    width:
    avec un parent à 500px
    500px
    125px
    -­‐9600px
    

    View Slide

50. max-­‐width:  
    min-­‐width:  
    width:
    avec un parent à 500px
    500px
    125px
    -­‐9600px
    avec un parent à 500px
    

    View Slide

51. max-­‐width:100%;  
    min-­‐width:25%;  
    width:calc((480px  -­‐  100%)  *  480);
    avec un parent à 400px
    400px
    100px
    400px
    

    View Slide

52. max-­‐width:100%;  
    min-­‐width:25%;  
    width:calc(
    avec un parent à 400px
    400px
    100px
    38400px
    

    View Slide

53. max-­‐width:100%;  
    min-­‐width:25%;  
    width:calc(
    avec un parent à 400px
    400px
    200px
    38400px
    avec un parent à 400px
    

    View Slide

54. View Slide

55. Support
    Apple Mail
    Gmail Outlook.com

    (2015)
    Thunderbird Orange AOL
    

    View Slide

56. Support sur
    Outlook.com
    (version 2015)
    

    View Slide

57. View Slide

58. width:calc((480px  -­‐  100%)  *  480);
    

    View Slide

59. width:calc(480px  *  480  -­‐  100%  *  480);
    

    View Slide

60. Support sur 

    les vieux WebKit
    Safari 6 et moins
    

    View Slide

61. max-­‐width:100%;  
    min-­‐width:25%;  
    width:calc(480px  *  480  -­‐  100%  *  480);
    

    View Slide

62. max-­‐width:100%;  
    min-­‐width:25%;  
    width:-­‐webkit-­‐calc(480px  *  480  -­‐  100%  *  480);  
    width:calc(480px  *  480  -­‐  100%  *  480);
    

    View Slide

63. Dégradation
    gracieuse sans calc()
    

    View Slide

64. display:inline-­‐block;  
    min-­‐width:120px;  
    width:25%;
    

    View Slide

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%;
    

    View Slide

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%;
    

    View Slide

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%;
    

    View Slide

68. Support sur
    Outlook.com
    (version 2016)
    

    View Slide

69. View Slide

70. 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);">  
      …  
    
    

    View Slide

71.  
      …  
    
    

    View Slide

72. width:calc(480px  *  480  -­‐  100%  *  480);
    

    View Slide

73. width:calc(230400px  -­‐  48000%);
    

    View Slide

74. 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%);">  
      …  
    
    

    View Slide

75. min-­‐width:120px;  
    width:25%;  
    max-­‐width:100%;">  
      …  
    
    

    View Slide

76. Épilogue
    Décembre 2015
    Recherches
    

    View Slide

77. Épilogue
    Décembre 2015
    Recherches
    

    View Slide

78. Février 2016
    Publication sur Medium
    Septembre 2016
    Gmail supporte les media queries
    

    View Slide

79. Element
    Queries
    

    View Slide

80. View Slide

81. View Slide

82. @media (max-width:1024px) {
    .column {
    width: 25%;
    }
    }
    ✖
    

    View Slide

83. @media (max-width:1024px) {
    .main .column {
    width: 25%;
    }
    !
    .side .column {
    width: 50%;
    }
    }
    

    View Slide

84. Source : https://alistapart.com/article/container-queries-once-more-unto-the-breach
    

    View Slide

85. .column {
    width: 25%;
    }
    !
    .parent:(max-width:480px) .column {
    width: 50%;
    }
    

    View Slide

86. Element
    Queries
    

    View Slide

87. Merci !
    @HTeuMeuLeu
    www.hteumeuleu.fr
    

    View Slide