Learning HMTL & CSS for Marketo Emails

[Erik_Eaton]

Hey team,

I am looking to take my knowledge a step or two further and learn HMTL/CSS (particularly for marketo emails). I have some pretty solid experience just from the few years of working in Marketo and WP, mostly editing code and adding some if needed.

Does any one recommend a particular course or route to learning it?

Thank you,

Erik

[Nicholas_Manojl]

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.

[Lindsay_Garland]

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.  http://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!

[Anonymous]

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.

[Vlad_Dimitrov]

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!

[Anonymous]

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

[Anonymous]

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.

[Natasha_Ness · Accepted solution]

Hey Erik,

If you're trying to brush up on front-end skills (not necessarily Marketo related) and are doing it at your own pace, then I actually recommend SoloLearn: Learn to Code for Free!  Some of what's there might be elementary for sure, but this covers a full spectrum of programming languages and their learning model is really interesting. Oh, and it's FREE, which is obviously nice.

If you or anyone else on your team also want to dive into some more core foundational Marketo concepts, LeadMD/Six Bricks also offers about a dozen courses you can check out here. 

Let me know what you think of SoloLearn, I've certainly really enjoyed it.

[Josh_G]

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

[SanfordWhiteman]

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...

[Trevor_McCurry]

I approve this message.

Sanford Whiteman wrote:

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

Be careful what you wish for. Over time, email and landing page development/maintenance will eat into the time you need to spend as a platform admin.

[Erik_Eaton]

Thanks for the honest feedback. Its not entirely "work based" and more something I would personally like to learn.

[Dave_Roberts]

1. Make a dummy email account.

2. Subscribe like a madman to cool brands that look like they're not stuck in the 90s.

3. Open their emails, study and compare the code.

For both Landing Pages and Email, I'd recommend looking into some kind of framework to work with. I like Bootstrap for Landing Pages, that's a pretty safe bet if you wanted to be able to put some more advanced things into play and then work your way back to understanding how they piece together. For email (IMHO) there's not as much of a clear winner in terms of a framework that I'd recommend -- lots of folks are using the "Fab4" framework but I'm not a fan.

One thing to note w/ learning email code is that it changes OFTEN! Get your running shoes on - just as soon as you've spent a few months getting to the bottom of something crazy that Outlook and Android can't agree upon, something changes in one of the 50+ email clients and you're back to square one -- but if you like a new challenge all the time, this might be right for you, there's always some discovery to be done. I also agree with Sanford here -- unless it's something you want to stay up on, a "little email know-how" isn't going to last as long as a "little LP know-how" might these days.

All that said, there are way more rules and things to think about (in terms of the front-end) with Email and far more limitations in HTML/CSS so it's like a "subset" of what you'd be able to safely deploy for a LP. For me, this was a bit frustrating at first b/c I learned email after webpages and found that I couldn't code things the way I was used to. This pushed me to dig a little deeper into what I didn't know and the more limited "code set" (i.e. tabled design) of email actually became a kind of refining process for me, and that in turn helped me to write better code for webpages. If I could do it all over again, I might learn the basics of Email first -- I think the limited availability of "cutting-edge" technology is a good place to build a foundation and then enhance those techniques for building more sophisticated webpages.

I've used https://www.codecademy.com/  in the past (it's been a while) but I remember that being a nice platform to learn some basics (language) on.

If you end up checking out Bootstrap: https://getbootstrap.com/docs/4.0/getting-started/introduction/ you can also find a bunch of different tutorial-style video on YouTube to help out there.

For email stuff, I got the most value out of the Litmus Builder by "learning-by-doing" and taking good notes. The downside we discovered to this tool is that they charge "per preview" and when you're testing for 40-50 ESPs at a time, this can add up quickly. I got a ton of ideas from google searches and reading thru forums and blogs on Litmus and Email on Acid also, it might be helpful to poke around their resources for some context.

[Grégoire_Miche2]

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

I fully agree with Sanford on this. Unless you become a consultant and producing / fixing email templates becomes a significant part of your work, it's not worth the investment. Buy some templates from specialized vendors or subscribe to a template service, you will save a lot of time, and money

-Greg

[Tom_Kerlin2]

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

[Erik_Eaton]

Definitely, I have peaked at Udemy (which is my usual go to) just wondering if there is any strong recommendations for a particular course.