Learning HMTL & CSS for Marketo Emails

Learn how to use an email dev framework like Foundation for Emails. You can outsource all the hacks and workarounds to the framework developers and concentrate on the designs.

Hey Erik,

In the same boat! I've take the free classes at Codecademy and some from Coursera and they both helped me learn more about basic HTML. However, creating Marketo templates that are responsive and work in most ESPs is a whole different ballgame. I've learned the most from taking free email templates (Litmus has great ones as they are already styled to render correctly) and trying to convert them to Marketo templates using Marketo resources and Jenna Mobly's tutorials.  jennamolby.com/10-things-you-should-know-about-the-new-marketo-email-editor/ is a great place to start. I've found it to be a slow process but have learned quite a bit. Definitely share any resources you find!

Hey Eric, I've had success creating html email code in Mailchimp's free editor then exporting it as a template. Mailchimps' easy interface also gives you excellent control over mobile-only styling like font sizes.

Hi Eric,

I highly recommend Zurb's Responsive Email Masterclass​.  I went though their class with very basic understanding of HTML and CSS and I came out of it creating a custom template that we now use for all of our email communication.  It doesn't teach you how to code emails from scratch (which would be a major pain anyways), but rather you use their framework to code your email and then it spits out the fully responsive and inlined HTML and CSS at the very end.

When you combine what they teach you in the class with Marketo's docs on how to mark up modules and editable areas you can easily create a very solid template. 

I'd say if you already have HTML and CSS experience, this will be the way to go.  It's about $500 for the option with office hours which are very helpful if you get stuck.

Another contender in this space thats worth checking out in MJML.io.  They have good documentation if you want to experiment with that, but I found Zurb's framework more compatible with Marketo in the end.

I'm happy to answer any questions you may have as you go though the process!

Hi Erik, I've learned a lot from w3schools W3Schools Online Web Tutorials . They offer free tutorials and have a great search engine - I've run into issues in Marketo where if I bold something, change a paragraph or line break, or add an image, the whole rendering will fail. This has helped me tremendously to fix these items myself rather than involve my web dev team.

Also recommended to me is TutsPlus - they offer training and possibly certification or testing as well. I haven't had a chance to log in yet but I would really like to add this to my skill set sometime soon.

Best,

Jen

Hi,

I had a subscription to Lynda.com. It's well worth the personal investment. I used it to learn, study and take the HTML, CSS and Javascript test 70-480. I passed.

Hey Erik,

If you haven't seen this page on Marketo specific email template syntax, it might be a good place to start.

Email Template Syntax - Marketo Docs - Product Documentation

Perhaps controversial opinion: don't bother unless you want to make it your main job.

Markup and styling for email is a distinct specialty that'll teach you methods that shouldn't be used on web pages (even if they "work" there as well).  It would be better to think of the email technologies as distinct: "SMTPML" & "SMTPCSS". 

And SMTPML & SMTPCSS are converging on HTML & CSS at a snail's pace. You can't really learn all 4 at the same time, because the moment you learn something cool on the CSS side -- tested in IE10-11 and all other modern browsers -- you'll realize it still can't be used in SMTPCSS.

There are true email masters out there, and IMO they're the only ones who should be trusted to author SMTPML/SMTPCSS without checking Litmus/Email on Acid every 2 minutes.

Up to you of course, but I can't help thinking it's the wrong move: if you're already situated as a Marketo power user/admin, use trusted peeps for email and level up in some other technology...

Hi Erik,

Have you considered any online courses (moocs) provided by sites like Coursera, Udemy and/or Udacity? I would start there! Otherwise the best way to learn is just to keep practicing.

-Tom