SlideShare uma empresa Scribd logo
1 de 9
Baixar para ler offline
< Monkey Style >




  EMAIL
  JITSU
Email Design and Coding Tactics from the Ancient Web
                 Masters of the 1990s




                  http://www.mailchimp.com
So, young grasshopper. You think you can compete
  in MailChimp’s bloodsport of HTML email design?

                            ---

           You make me laugh, silly nerd.

                            ---

Coding HTML emails is a mysterious, complicated art
form. The modern web design warrior is spoilt with
CSS-3, and css positioning and silly, fancy-pantsy
 "grids" and such. We have become fat and lazy with
    technology and the safety of "standards."

                            ---

Conquering HTML email coding and design requires a
  fundamental mastery of the ancient art of web
            design coding, circa 1999.

                            ---

   such techniques are not taught in today’s web
                 design schools.

                            ---

          School. Ha. You make me laugh.

                            ---

Lucky for you, those ancient, secret techniques have
 been documented by the historians at MailChimp…




                   http://www.mailchimp.com
Combat tip #1
   Think Like Monkey. Code Like Monkey.
Take off that beanie and put that Zeldman book down, you hippie. There are
no standards in HTML email. Email programs are all over the place in terms
of how they render HTML. You will need to think different. Fight different.
Yes, you will need to resort to dirty “street” style tactics to make your email
designs look consistent. Medieval stuff like:

      Table layout. No CSS Positioning. Not only that, but…

      Embedded Tables (gasp!) Shim-GIFs (double gasp!)

      Videos, Flash, ActionScript, DHTML, JavaScript, and all that other fancy-
      schmancy stuff is not going to work. Most anti-virus software block them from
      working inside email apps.

   Oh yeah. You’ll want to hand-code everything. No WYSIWYGs.
   Luckily, once you get into the swing of things, you’ll enjoy how fun this
   raw, bare-knuckle way of HTML email coding can be.




                               http://www.mailchimp.com
Combat tip #2
    Never Underestimate Your Opponent
Unlike the world of web design, where you deal with 3 or 4 major browsers,
there are dozens of different email readers out there. To design great looking
HTML emails, one must know how to deal with email readers.

      Webmail apps render differently from Desktop apps. Mainly, webmail apps
      restrict CSS more, to keep your code from interfering w/their operation. Inline-
      CSS is the only reliable way to stylize HTML emails.

      Most email apps use some form of preview pane. In general, you have either 250-
      px in width (and lots of height), or 250-px in height (and lots of width) to include
      your most important elements, like logo, top story, etc.

      In general, Microsoft Outlook is the worst to design for. They chose to use
      Microsoft Word as their HTML email rendering engine, instead of IE. Don’t ask.




                                http://www.mailchimp.com
Combat tip #3
          Learn To Fall. Gracefully.
Once you have achieved black belt status, your journey has not ended. In
fact, it has only just begun. You’ve mastered the basics, but the rules are
always changing. So your design and code must fail gracefully.

      Take your HTML email template, and fill it with lots of real content. Turn off
      CSS. Turn off images, because so many email apps display emails with images off
      by default. Does the message still get across? If not, you have failed. Go back to
      page 1.

      Email applications always change their rendering techniques. You can kill
      yourself learning all their tactics, or learn to keep things simple and failsafe.

      Use MailChimp’s Inbox Inspector to test your designs.




                                 http://www.mailchimp.com
Final rule
                    Forget The Rules
Style does not happen until you have learned to break all the rules that you
know to be true, but in your own creative way. And you cannot break the
rules until you first learn them. After you’ve achieved enlightenment through
strict and relentless practice of “the rules,” it is time to develop your own
style.

But none of that “Cobra Kai, sweep the leg” crap.

Good luck, grasshopper.




                              http://www.mailchimp.com
WEAPONS
Just cheat by downloading a few basic templates, then build on to them from
there.

MailChimp Inbox Inspector – preview your email design renderability across 20+
major email programs and spam filters.

Automated A/B testing – In case you want to test your work in real-world
scenarios. Here’s how to use dynamic content merge tags to test the design.

Automagic CSS inliner tool

All the different ways you can import your HTML emails into MailChimp without
using our built-in WYSIWYG



                   TACTICS
Email Marketing 101 video series in MailChimp Academy (covers design and
coding basics, other technical issues)

Email Design presentation on Slideshare (a much more boring form of the above
video)

MailChimp’s Email Marketing Guide (65 pages) – this is an older guide, but since
HTML email hasn’t changed in ages, it still applies. Pretty much everything you
need to know.

Most common HTML email design mistakes




                          http://www.mailchimp.com
6-1. ShimGif-su Strike Pose. The right hand represents width (earth); the left hand
represents height (sky). Legs are positioned with negative space, representing transparency,
invisibility (wind).




                                http://www.mailchimp.com

Mais conteúdo relacionado

Destaque

Podglądaj, popisz (się), podziękuj - #Techklub Kraków
Podglądaj, popisz (się), podziękuj - #Techklub KrakówPodglądaj, popisz (się), podziękuj - #Techklub Kraków
Podglądaj, popisz (się), podziękuj - #Techklub KrakówMichal Serwinski
 
Jak zbierać pieniądze w Internecie i zaangażować w to internautów?
Jak zbierać pieniądze w Internecie i zaangażować w to internautów?Jak zbierać pieniądze w Internecie i zaangażować w to internautów?
Jak zbierać pieniądze w Internecie i zaangażować w to internautów?Michal Serwinski
 
Jak dziękować za wsparcie? O roli wdzięczności w budowaniu relacji z darczyńcami
Jak dziękować za wsparcie? O roli wdzięczności w budowaniu relacji z darczyńcamiJak dziękować za wsparcie? O roli wdzięczności w budowaniu relacji z darczyńcami
Jak dziękować za wsparcie? O roli wdzięczności w budowaniu relacji z darczyńcamiMichal Serwinski
 
Portafolio de ingles ayala juan
Portafolio de ingles   ayala juanPortafolio de ingles   ayala juan
Portafolio de ingles ayala juanJonathan Ayala
 
Życie... is there any app for that? ;-)
Życie... is there any app for that? ;-)Życie... is there any app for that? ;-)
Życie... is there any app for that? ;-)Michal Serwinski
 
Our ideas + your resources = great help. We can do it together!
Our ideas + your resources = great help. We can do it together!Our ideas + your resources = great help. We can do it together!
Our ideas + your resources = great help. We can do it together!Michal Serwinski
 
UniqueSoft Overview
UniqueSoft OverviewUniqueSoft Overview
UniqueSoft Overviewbmskelly
 
Service charge & ground rent arrears
Service charge & ground rent arrearsService charge & ground rent arrears
Service charge & ground rent arrearsAmberBoniface
 
Is the person working for you an employee?
Is the person working for you an employee? Is the person working for you an employee?
Is the person working for you an employee? AmberBoniface
 

Destaque (10)

Podglądaj, popisz (się), podziękuj - #Techklub Kraków
Podglądaj, popisz (się), podziękuj - #Techklub KrakówPodglądaj, popisz (się), podziękuj - #Techklub Kraków
Podglądaj, popisz (się), podziękuj - #Techklub Kraków
 
Jak zbierać pieniądze w Internecie i zaangażować w to internautów?
Jak zbierać pieniądze w Internecie i zaangażować w to internautów?Jak zbierać pieniądze w Internecie i zaangażować w to internautów?
Jak zbierać pieniądze w Internecie i zaangażować w to internautów?
 
Jak dziękować za wsparcie? O roli wdzięczności w budowaniu relacji z darczyńcami
Jak dziękować za wsparcie? O roli wdzięczności w budowaniu relacji z darczyńcamiJak dziękować za wsparcie? O roli wdzięczności w budowaniu relacji z darczyńcami
Jak dziękować za wsparcie? O roli wdzięczności w budowaniu relacji z darczyńcami
 
Portafolio de ingles ayala juan
Portafolio de ingles   ayala juanPortafolio de ingles   ayala juan
Portafolio de ingles ayala juan
 
Życie... is there any app for that? ;-)
Życie... is there any app for that? ;-)Życie... is there any app for that? ;-)
Życie... is there any app for that? ;-)
 
Our ideas + your resources = great help. We can do it together!
Our ideas + your resources = great help. We can do it together!Our ideas + your resources = great help. We can do it together!
Our ideas + your resources = great help. We can do it together!
 
UniqueSoft Overview
UniqueSoft OverviewUniqueSoft Overview
UniqueSoft Overview
 
A true story
A true storyA true story
A true story
 
Service charge & ground rent arrears
Service charge & ground rent arrearsService charge & ground rent arrears
Service charge & ground rent arrears
 
Is the person working for you an employee?
Is the person working for you an employee? Is the person working for you an employee?
Is the person working for you an employee?
 

Último

SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 

Último (20)

SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 

Email Jitsu

  • 1.
  • 2. < Monkey Style > EMAIL JITSU Email Design and Coding Tactics from the Ancient Web Masters of the 1990s http://www.mailchimp.com
  • 3. So, young grasshopper. You think you can compete in MailChimp’s bloodsport of HTML email design? --- You make me laugh, silly nerd. --- Coding HTML emails is a mysterious, complicated art form. The modern web design warrior is spoilt with CSS-3, and css positioning and silly, fancy-pantsy "grids" and such. We have become fat and lazy with technology and the safety of "standards." --- Conquering HTML email coding and design requires a fundamental mastery of the ancient art of web design coding, circa 1999. --- such techniques are not taught in today’s web design schools. --- School. Ha. You make me laugh. --- Lucky for you, those ancient, secret techniques have been documented by the historians at MailChimp… http://www.mailchimp.com
  • 4. Combat tip #1 Think Like Monkey. Code Like Monkey. Take off that beanie and put that Zeldman book down, you hippie. There are no standards in HTML email. Email programs are all over the place in terms of how they render HTML. You will need to think different. Fight different. Yes, you will need to resort to dirty “street” style tactics to make your email designs look consistent. Medieval stuff like: Table layout. No CSS Positioning. Not only that, but… Embedded Tables (gasp!) Shim-GIFs (double gasp!) Videos, Flash, ActionScript, DHTML, JavaScript, and all that other fancy- schmancy stuff is not going to work. Most anti-virus software block them from working inside email apps. Oh yeah. You’ll want to hand-code everything. No WYSIWYGs. Luckily, once you get into the swing of things, you’ll enjoy how fun this raw, bare-knuckle way of HTML email coding can be. http://www.mailchimp.com
  • 5. Combat tip #2 Never Underestimate Your Opponent Unlike the world of web design, where you deal with 3 or 4 major browsers, there are dozens of different email readers out there. To design great looking HTML emails, one must know how to deal with email readers. Webmail apps render differently from Desktop apps. Mainly, webmail apps restrict CSS more, to keep your code from interfering w/their operation. Inline- CSS is the only reliable way to stylize HTML emails. Most email apps use some form of preview pane. In general, you have either 250- px in width (and lots of height), or 250-px in height (and lots of width) to include your most important elements, like logo, top story, etc. In general, Microsoft Outlook is the worst to design for. They chose to use Microsoft Word as their HTML email rendering engine, instead of IE. Don’t ask. http://www.mailchimp.com
  • 6. Combat tip #3 Learn To Fall. Gracefully. Once you have achieved black belt status, your journey has not ended. In fact, it has only just begun. You’ve mastered the basics, but the rules are always changing. So your design and code must fail gracefully. Take your HTML email template, and fill it with lots of real content. Turn off CSS. Turn off images, because so many email apps display emails with images off by default. Does the message still get across? If not, you have failed. Go back to page 1. Email applications always change their rendering techniques. You can kill yourself learning all their tactics, or learn to keep things simple and failsafe. Use MailChimp’s Inbox Inspector to test your designs. http://www.mailchimp.com
  • 7. Final rule Forget The Rules Style does not happen until you have learned to break all the rules that you know to be true, but in your own creative way. And you cannot break the rules until you first learn them. After you’ve achieved enlightenment through strict and relentless practice of “the rules,” it is time to develop your own style. But none of that “Cobra Kai, sweep the leg” crap. Good luck, grasshopper. http://www.mailchimp.com
  • 8. WEAPONS Just cheat by downloading a few basic templates, then build on to them from there. MailChimp Inbox Inspector – preview your email design renderability across 20+ major email programs and spam filters. Automated A/B testing – In case you want to test your work in real-world scenarios. Here’s how to use dynamic content merge tags to test the design. Automagic CSS inliner tool All the different ways you can import your HTML emails into MailChimp without using our built-in WYSIWYG TACTICS Email Marketing 101 video series in MailChimp Academy (covers design and coding basics, other technical issues) Email Design presentation on Slideshare (a much more boring form of the above video) MailChimp’s Email Marketing Guide (65 pages) – this is an older guide, but since HTML email hasn’t changed in ages, it still applies. Pretty much everything you need to know. Most common HTML email design mistakes http://www.mailchimp.com
  • 9. 6-1. ShimGif-su Strike Pose. The right hand represents width (earth); the left hand represents height (sky). Legs are positioned with negative space, representing transparency, invisibility (wind). http://www.mailchimp.com