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

Thinking Outside the table

HTeuMeuLeu
July 27, 2016
Programming
0
580

Thinking Outside the table

Email constraints can be frustrating for a web developer (damn you, [insert your most loathed email client here]). But aside from annoying bugs, these constraints are sometimes here for very important security reasons. These constraints can also be a fuel for brand new ideas and techniques unique to emails. From a goofy email that evolves as you forward it, to a brand new technique to build responsive email without media queries, this talk will guide you inside the mind of an email geek.

Read the full transcript here: https://emails.hteumeuleu.com/thinking-outside-the-table-at-tedc16-a58a76c7c625

HTeuMeuLeu

July 27, 2016
Tweet

More Decks by HTeuMeuLeu

See All by HTeuMeuLeu
Think Like an Email Geek
hteumeuleu
1
77
Des bonnes pratiques de l'intégration d'e-mails
hteumeuleu
1
800
The Current State of Email Clients
hteumeuleu
1
480
The Great Mess of Alternative Text
hteumeuleu
0
2.1k
Email Camera #EmailHacks at Litmus Live 2017
hteumeuleu
0
380
Les campagnes inspirantes et les dispositifs innovants de demain
hteumeuleu
1
800
La technique des Fab Four
hteumeuleu
0
620
Le blues des préfixes navigateurs
hteumeuleu
0
39
Comment sortir l'intégration d'e-mails de la préhistoire ?
hteumeuleu
5
2.6k

Other Decks in Programming

See All in Programming
Go1.19から始めるGCのチューニング方法
hagatake
0
110
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 YUMEMI.grow合同LT会in横浜 @Kaito-Dogi
doggy
1
370
Load gem from browser
ledsun
2
540
what's new in Material Design で気になったトピック
punchdrunker
1
280
SpringIO_19-05-2023.pdf
ancaghenade
0
120
ざっくりつかむLangChainのメンタルモデル [説明欄にソースあり]
sagawa23
6
920
複雑性に立ち向かうためのサーバーサイドコード分割 / JJUG CCC 2023 Spring
hirokunimaeta
1
260
Compose로 Android&Desktop 멀티플랫폼 만들기
pangmoo
0
110
M5Stack用の指紋認証デバイスを試す
ufoo68
0
120
Evolving a microservice architecture: how to right-size your services
cer
PRO
0
750
次なるルーターパッケージ選定のしざまと決め手について
yuzuy
2
290
Firebase A/B TestingとRemote Config
を最大限に活用する方法
mukky620
1
370

Featured

See All Featured
The Language of Interfaces
destraynor
149
21k
Thoughts on Productivity
jonyablonski
52
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
13
1.7k
GraphQLとの向き合い方2022年版
quramy
23
11k
Statistics for Hackers
jakevdp
787
210k
Pencils Down: Stop Designing & Start Developing
hursman
115
10k
Why You Should Never Use an ORM
jnunemaker
PRO
49
8.1k
A Philosophy of Restraint
colly
195
15k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
How GitHub Uses GitHub to Build GitHub
holman
466
280k
Facilitating Awesome Meetings
lara
35
4.8k
The Invisible Side of Design
smashingmag
292
49k

Transcript

  1. Litmus Conf
    London, 2016/07/27

    View Slide

  2. Rémi Parmentier
    @HTeuMeuLeu

    View Slide

  3. THINKING
    OUTSIDE
    THE

    View Slide

  4. Super Mail Forward
    Part I

    View Slide

  5. View Slide

  6. View Slide

  7. What happens when
    you forward an email?
    (from a webmail)

    View Slide

  8. View Slide

  9. Not much more
    than when the webmail
    receives it in the first place.

    View Slide

  10. .cell {
    color: white;
    background: green url(image.jpg);
    }

    View Slide

  11. .cell {
    color: white;
    }

    View Slide

  12. AOL Yahoo Outlook.com Gmail

    View Slide

  13. AOL Yahoo Outlook.com Gmail
    AOL

    View Slide

  14. !


    AOL
    Yahoo
    Outlook.com
    Gmail


    <br/>* [aria-labelledby="step1"],<br/>.step2,<br/>.step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View Slide

  15. !


    AOL
    Yahoo
    Outlook.com
    Gmail


    <br/>* [aria-labelledby="step1"],<br/>.step2,<br/>.step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View Slide

  16. !


    AOL
    Yahoo
    Outlook.com
    Gmail


    <br/>* [aria-labelledby="step1"],<br/>.step2,<br/>.step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View Slide

  17. View Slide




  18. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.aolReplacedBody * [aria-labelledby="step1"],<br/>.aolReplacedBody .step2,<br/>.aolReplacedBody .step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.aolReplacedBody .step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.aolReplacedBody .step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View Slide




  19. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.aolReplacedBody * [aria-labelledby="step1"],<br/>.aolReplacedBody .step2,<br/>.aolReplacedBody .step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.aolReplacedBody .step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.aolReplacedBody .step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View Slide




  20. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.aolReplacedBody * [aria-labelledby="step1"],<br/>.aolReplacedBody .step2,<br/>.aolReplacedBody .step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.aolReplacedBody .step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.aolReplacedBody .step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View Slide




  21. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.aolReplacedBody * [aria-labelledby="step1"],<br/>.aolReplacedBody .step2,<br/>.aolReplacedBody .step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.aolReplacedBody .step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.aolReplacedBody .step1 {<br/>background:grey url(&quot;<a href="spacer.gif&quot" target=_blank>spacer.gif</a>;)!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View Slide




  22. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.aolReplacedBody * [aria-labelledby="step1"],<br/>.aolReplacedBody .step2,<br/>.aolReplacedBody .step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.aolReplacedBody .step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide

  23. Yahoo

    View Slide




  24. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.yiv113aolReplacedBody * [aria-labelledby="step1"],<br/>.yiv113aolReplacedBody .yiv113step2,<br/>.yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide




  25. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>#yui_123456789 .yiv113aolReplacedBody * [aria-labelledby="step1"],<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide




  26. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>#yui_123456789 .yiv113aolReplacedBody * [aria-labelledby="step1"],<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide




  27. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>#yui_123456789 .yiv113aolReplacedBody * .filtered99999,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide




  28. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>#yui_123456789 .yiv113aolReplacedBody * .filtered99999,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide




  29. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>#yui_123456789 .yiv113aolReplacedBody * .filtered99999,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide

  30. Outlook.com

    View Slide




  31. AOL
    Yahoo
    Outlook.comGmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide




  32. AOL
    Yahoo
    Outlook.comGmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide




  33. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide




  34. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide




  35. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide

  36. Gmail

    View Slide




  37. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View Slide




  38. AOL
    Yahoo
    Outlook.com
    Gmail



    CSS
    HTML

    View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. AOL fixed their bug.
    The good news is…

    View Slide

  55. View Slide

  56. View Slide

  57. Webmail security
    Part II

    View Slide

  58. href="http://example.com">
    …

    View Slide


  59. …

    View Slide


  60. …

    View Slide

  61. View Slide

  62. View Slide

  63. Why java-script ?

    View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. onload
    ✖

    View Slide

  69. onanimationend

    View Slide

  70. <br/>@keyframes bar {}<br/>

    View Slide

  71. <br/>@keyframes bar {}<br/>.foo { animation:bar; }<br/>

    View Slide

  72. <br/>@keyframes bar {}<br/>.foo { animation:bar; }<br/>

    View Slide

  73. <br/>@keyframes bar {}<br/>.foo { animation:bar; }<br/>

    View Slide

  74. View Slide

  75. I reported this bug
    and all I got was a lousy thank you.

    View Slide

  76. How do you
    filter JavaScript
    out of an email ?
    Use a white list.

    View Slide

  77. View Slide

  78. No class, no id
    No on mobile<br/>No media queries on mobile<br/>

    View Slide

  79. There are two hard things in
    Computer Science:

    cache invalidation 

    and naming things.
    “
    — Phil Karlton
    ”

    View Slide

  80. There are three hard things in
    Computer Science:

    cache invalidation 

    and naming things
    and responsive emails.
    “
    ”

    View Slide

  81. It's hard
    to code responsive emails.

    View Slide

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

    View Slide

  83. View Slide

  84. View Slide

  85. without media queries?
    How can we make a column grow on mobile

    View Slide

  86. F L E X B O X

    View Slide

  87. Source : https://emails.hteumeuleu.com/using-flexbox-in-an-email-4b1aa7a69886

    View Slide

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

    View Slide

  89. .grid {
    display: flex;
    }

    View Slide

  90. Source : https://emails.hteumeuleu.com/using-flexbox-in-an-email-4b1aa7a69886

    View Slide

  91. without media queries?
    How can we make a column grow on mobile

    View Slide

  92. without media queries
    and without flexbox?
    How can we make a column grow on mobile

    View Slide

  93. Three ideas
    that put me on track

    View Slide

  94. Three ideas
    1. Gmail CSS support

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  98. Source : http://emailweekly.co/

    View Slide

  99. .main {
    width: calc(100% - 200px);
    }

    View Slide

  100. 200px calc(100% - 200px)

    View Slide

  101. 200px calc(100% - 200px)

    View Slide

  102. Three ideas
    2. Responsive typography

    View Slide

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

    View Slide

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

    View Slide

  105. Three ideas
    3. « Size matters »

    View Slide

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

    View Slide

  107. min-width,
    width
    and max-width
    Which is the strongest one ?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  111. Source : https://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths

    View Slide

  112. View Slide

  113. Bingo !

    View Slide

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

    View Slide

  115. The Fab Four Technique
    Part III

    View Slide

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

    View Slide

  117. View Slide

  118. There are three hard things in
    Computer Science:

    cache invalidation 

    and naming things
    and responsive emails.
    “
    ”

    View Slide

  119. The Fab Four Technique

    View Slide

  120. Above 480px

    View Slide

  121. Below 480px

    View Slide

  122. max$width:100%;/
    min$width:25%;/
    width:calc((480px/$/100%)/*/480);
    Below breakpoint width
    Above breakpoint width
    Breakpoint

    View Slide

  123. max$width:100%;/
    min$width:25%;/
    width:calc((480px/$/100%)/*/480);
    with a 500px parent
    500px
    125px
    500px

    View Slide

  124. max$width:/
    min$width:/
    width:
    with a 500px parent
    500px
    125px
    $9600px

    View Slide

  125. max$width:/
    min$width:/
    width:
    avec un parent à 500px
    500px
    $9600px
    125px

    View Slide

  126. max$width:100%;/
    min$width:25%;/
    width:calc((480px/$/100%)/*/480);
    with a 400px parent
    400px
    100px
    400px

    View Slide

  127. max$width:100%;/
    min$width:25%;/
    width:calc(
    with a 400px parent
    400px
    100px
    38400px

    View Slide

  128. max$width:100%;/
    min$width:25%;/
    width:calc(
    avec un parent à 400px
    200px
    38400px
    400px

    View Slide

  129. max$width:100%;/
    min$width:25%;/
    width:calc((480px/$/100%)/*/480);

    View Slide

  130. max$width:50%;/
    min$width:25%;/
    width:calc((480px/$/100%)/*/480);

    View Slide

  131. View Slide

  132. Support
    Apple Mail
    Gmail Outlook.com

    (2015)
    Thunderbird Orange AOL

    View Slide

  133. Support for
    Outlook.com
    (2015 version

    View Slide

  134. View Slide

  135. width:calc((480px/$/100%)/*/480);

    View Slide

  136. width:calc(480px/*/480/$/100%/*/480);

    View Slide

  137. Support for 

    older WebKit
    Safari 6 and less
    Android 4 and less

    View Slide

  138. max$width:100%;/
    min$width:25%;/
    width:calc(480px/*/480/$/100%/*/480);

    View Slide

  139. max$width:100%;/
    min$width:25%;/
    width:$webkit$calc(480px/*/480/$/100%/*/480);/
    width:calc(480px/*/480/$/100%/*/480);

    View Slide

  140. Graceful degradation

    without calc()

    View Slide

  141. display:inline$block;/
    min$width:120px;/
    width:25%;

    View Slide

  142. 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

  143. 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

  144. Support for
    Outlook.com
    (2016 version

    View Slide

  145. View Slide

  146. 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

  147. /
    / …/

    View Slide

  148. width:calc(480px/*/480/$/100%/*/480);

    View Slide

  149. width:calc(230400px/$/48000%);

    View Slide

  150. 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

  151. min$width:120px;/
    width:25%;/
    max$width:100%;">/
    / …/

    View Slide

  152. Constraints
    drive creativity.

    View Slide

  153. Thank you !
    @HTeuMeuLeu
    emails.hteumeuleu.com
    tilt-studio.fr

    View Slide