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 full-size slide

  2. Rémi Parmentier
    @HTeuMeuLeu

    View full-size slide

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

    — Phil Karlton

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  9. F L E X B O X

    View full-size slide

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

    View full-size slide

  11. .grid {
    display: flex;
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Premièrement
    Le support CSS de Gmail

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Source : http://emailweekly.co/

    View full-size slide

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

    View full-size slide

  22. calc(100% - 50px);

    View full-size slide

  23. calc(100% * 50px);

    View full-size slide

  24. calc(100% / 50px);

    View full-size slide

  25. calc(100% / 4);

    View full-size slide

  26. Deuxièmement
    Typographie responsive

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. La technique 

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

    View full-size slide

  37. 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 full-size slide

  38. La technique 

    des Fab Four

    View full-size slide

  39. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Support
    Apple Mail
    Gmail Outlook.com

    (2015)
    Thunderbird Orange AOL

    View full-size slide

  47. Support sur
    Outlook.com
    (version 2015)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. Support sur 

    les vieux WebKit
    Safari 6 et moins

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. Dégradation
    gracieuse sans calc()

    View full-size slide

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

    View full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

  57. 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 full-size slide

  58. Support sur
    Outlook.com
    (version 2016)

    View full-size slide

  59. 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 full-size slide

  60.  
      …  

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. 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 full-size slide

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

    View full-size slide

  65. Épilogue
    Décembre 2015
    Recherches

    View full-size slide

  66. Épilogue
    Décembre 2015
    Recherches

    View full-size slide

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

    View full-size slide

  68. Element
    Queries

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. Element
    Queries

    View full-size slide

  74. Merci !
    @HTeuMeuLeu
    www.hteumeuleu.fr

    View full-size slide