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
120
GraphQL vs. JSON:API
aimeos
1
200
gigacommerce
aimeos
0
3.1k
High performance e-commerce in Laravel
aimeos
0
910
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
680

Other Decks in Programming

See All in Programming
Програмиране с Rust, ФМИ, 2024
nikolads
0
120
Piniaの現状と今後
waka292
2
520
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
210
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
150
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
140
GPU Hash Table | レイトレ合宿10
yknishidate
0
330
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
850
個人開発で使ってるやつを紹介する回
yohfee
1
730
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
230
sqlcを利用してsqlに型付けを
kamiyam
0
250
Why I Choose NetBeans for Jakarta EE
ivargrimstad
0
850
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
140

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
260
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Cost Of JavaScript in 2023
addyosmani
44
5.9k
BBQ
matthewcrist
85
9.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
Automating Front-end Workflow
addyosmani
1365
200k
Into the Great Unknown - MozCon
thekraken
31
1.4k
A Tale of Four Properties
chriscoyier
156
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
26
710
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k

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