15 Replies Latest reply on Apr 5, 2018 7:17 PM by Nicholas Manojlovic

    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

        • Re: Learning HMTL & CSS for Marketo Emails
          Tom Kerlin

          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

          • Re: Learning HMTL & CSS for Marketo Emails
            Sanford Whiteman

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

            2 of 2 people found this helpful
              • Re: Learning HMTL & CSS for Marketo Emails
                Grégoire Michel

                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

                1 of 1 people found this helpful
                • Re: Learning HMTL & CSS for Marketo Emails
                  Erik Eaton

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

                    • Re: Learning HMTL & CSS for Marketo Emails
                      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.

                    • Re: Learning HMTL & CSS for Marketo Emails
                      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.

                    • Re: Learning HMTL & CSS for Marketo Emails
                      Josh Gilchrist

                      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

                      • Re: Learning HMTL & CSS for Marketo Emails
                        Natasha Ness

                        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.

                        1 of 1 people found this helpful
                        • Re: Learning HMTL & CSS for Marketo Emails
                          Julie Loiselle

                          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.

                          • Re: Learning HMTL & CSS for Marketo Emails
                            Jen Jonasson

                            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

                            • Re: Learning HMTL & CSS for Marketo Emails
                              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!

                              • Re: Learning HMTL & CSS for Marketo Emails
                                Bear Files

                                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.

                                1 of 1 people found this helpful
                                • Re: Learning HMTL & CSS for Marketo Emails
                                  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!

                                  1 of 1 people found this helpful
                                  • Re: Learning HMTL & CSS for Marketo Emails
                                    Nicholas Manojlovic

                                    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.