Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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…

HTeuMeuLeu

June 09, 2017
Tweet

More Decks by HTeuMeuLeu

Other Decks in Technology

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