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

Responsive E-Mails

Aimeos
August 18, 2019
Programming
0
640

Responsive E-Mails

You found IE6 was horrible? Then you haven't worked with Outlook & Co!
Learn how you can create responsive easily using MJML

Aimeos

August 18, 2019
Tweet

More Decks by Aimeos

See All by Aimeos
PHP Map
aimeos
1
130
GraphQL vs. JSON:API
aimeos
1
210
gigacommerce
aimeos
0
3.1k
High performance e-commerce in Laravel
aimeos
0
920
E-Commerce in TYPO3 mit Aimeos (Deutsch)
aimeos
0
440
Aimeos - high performance e-commerce in TYPO3
aimeos
0
300
Aimeos e-commerce components
aimeos
1
210
E-Commerce in TYPO3 - Reloaded
aimeos
0
300
Micro services as architectural concept
aimeos
0
690

Other Decks in Programming

See All in Programming
useSyncExternalStoreを使いまくる
ssssota
6
1k
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
240
【re:Growth 2024】 Aurora DSQL をちゃんと話します！
maroon1st
0
770
layerx_20241129.pdf
kyoheig3
2
290
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
260
これが俺の”自分戦略” プロセスを楽しんでいこう！ - Developers CAREER Boost 2024
niftycorp
PRO
0
190
あれやってみてー駆動から成長を加速させる / areyattemite-driven
nashiusagi
1
200
Jakarta EE meets AI
ivargrimstad
0
230
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
190
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
N.E.X.T LEVEL
pluu
2
300
たのしいparse.y
ydah
3
120

Featured

See All Featured
Side Projects
sachag
452
42k
Making Projects Easy
brettharned
116
5.9k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Fireside Chat
paigeccino
34
3.1k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Designing for Performance
lara
604
68k
Producing Creativity
orderedlist
PRO
341
39k
Designing Experiences People Love
moore
138
23k
KATA
mclloyd
29
14k

Transcript

  1. Responsive E-Mails

  2. Web HTML5, CSS3 E-Mail HTML4+, CSS?

  3. Problem …

  4. Gründe Sicherheit + WTF?

  5. Lösung

  6. <!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><!--[if !mso]><!-- → <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-→

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style type="text/css">#outlook a { padding:0; } .ReadMsgBody { width:100%; } .ExternalClass { width:100%; } .ExternalClass * { line-height:100%; } body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; } table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; } img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none; -ms-interpolation-mode:bicubic; } p { display:block;margin:13px 0; }</style> <!--[if !mso]><!--><style type="text/css">@media only screen and (max-width:480px) { @-ms-viewport { width:320px; } @viewport { width:320px; } }</style> <!--<![endif]--><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml> <![endif]--><!--[if lte mso 11]><style type="text/css"> .outlook-group-fix { width:100% !important; }</style>

  7. MJML Foundation

  8. Gründe für MJML Einfacher Kürzere Toolchain Schnellere Ergebnisse API, App,

    NPM, Editor-Plugins, ...

  9. <mjml> <mj-head> ... </mj-head> <mj-body> ... </mj-body> </mjml>

  10. Header

  11. <mj-head> <mj-font name="Noto" href="..." /> <mj-style inline="inline"> .logo img {

    max-width: 300px; margin: auto } .blue-text h1 { color: #103050; } .btn td, .btn a { background-color: #ba9a5a; } </mj-style> </mj-head>

  12. Body

  13. <mj-body> <mj-section> <mj-column> <mj-image css-class="logo" src="..." /> <mj-text css-class="blue-text"> <h1>Hello

    World!</h1> </mj-text> <mj-button css-class="btn" href="..."> Click me</mj-button> </mj-column> </mj-section> </mj-body>

  14. Responsives Spaltenlayout

  15. <mjml> <mj-body> <mj-section> <mj-column>column one</mj-column> <mj-column> column two</mj-column> <mj-column>column three</mj-column>

    </mj-section> </mj-body> </mjml>

  16. Tabellen

  17. <mj-table css-class="order"> <tr> <th></th><th>Name</th> <th>Qty</th><th>Price</th> </tr> <tr> <td><img width="100" src="...</td>

    <td>Demo product</td> <td>1</td><td>100,00 €</td> </tr> </mj-table>

  18. CSS

  19. <mjml> <mj-head> <mj-style inline="inline"> .logo img { max-width: 300px; margin:

    auto } </mj-style> </mj-head> <mj-body> <mj-section><mj-column> <mj-image css-class="logo" src="..." /> </mj-column></mj-section> </mj-body>

  20. <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;"> <tbody><tr><td style="width:550px;"> <img height="auto" src="…"

    style="max-width: 300px; margin: auto; border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%;" width="550"> </td></tr></tbody> </table>

  21. Ergebnis

  22. None

  23. Aimeos

  24. Open Source E-Commerce Framework

  25. aimeos.org github.com/aimeos

  26. Laravel Slim a micro framework for PHP

  27. Vollständiges Shopsystem Vergleichbar mit Magento Core

  28. Sendet E-Mails für Zahlungs- und Lieferstatus Produktupdates Abonnements Gutscheine Zugangsdaten

  29. None

  30. Aimeos Twitter: @aimeos facebook.com/Aimeos