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

Transcript

1. Responsive E-Mails
   

   View Slide

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

   View Slide

3. Problem
   …
   

   View Slide

4. Gründe
   Sicherheit
   +
   WTF?
   

   View Slide

5. Lösung
   

   View Slide

6. View Slide

7. MJML
   Foundation
   

   View Slide

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

   View Slide

9. 
   
   ...
   
   
   ...
   
   
   

   View Slide

10. Header
    

    View Slide

11. 
    
    
    .logo img { max-width: 300px; margin: auto }
    .blue-text h1 { color: #103050; }
    .btn td, .btn a { background-color: #ba9a5a; }
    
    
    

    View Slide

12. Body
    

    View Slide

13. 
    
    
    
    
    Hello World!
    
    
    Click me
    
    
    
    

    View Slide

14. Responsives
    Spaltenlayout
    

    View Slide

15. 
    
    
    column one
    column two
    column three
    
    
    
    

    View Slide

16. Tabellen
    

    View Slide

17. 
    
    Name
    QtyPrice
    
    
    

    View Slide

18. CSS
    

    View Slide

19. 
    
    
    .logo img { max-width: 300px; margin: auto }
    
    
    
    
    
    
    
    

    View Slide

20. style="border-collapse:collapse;border-spacing:0px;">
    
    style="max-width: 300px; margin: auto;
    border: 0; display: block; outline: none;
    text-decoration: none; height: auto;
    width: 100%;" width="550">
    
    
    

    View Slide

21. Ergebnis
    

    View Slide

22. View Slide

23. Aimeos
    

    View Slide

24. Open Source
    E-Commerce Framework
    

    View Slide

25. aimeos.org
    github.com/aimeos
    

    View Slide

26. Laravel
    Slim
    a micro framework for PHP
    

    View Slide

27. Vollständiges Shopsystem
    Vergleichbar mit Magento Core
    

    View Slide

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

    View Slide

29. View Slide

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

    View Slide