8

Ask DN: What's the optimal way to develop a newsletter template?

2 years ago from , ui/ux @ anagrama.com — mim.st

So I am in the brink of starting to develop a newlsetter template for the first time. But since there are some variations in rendering via email I would like to ask the DN Community what are the best practices to do so.

I've read in some articles that i.e. DIV elements should not be used primarily for sectioning content but tables instead.

Also would like to know if font-embedding is as straight forward as it is in a browser.

Thank you guys!

7 comments

  • Jimmy OfisiaJimmy Ofisia, 2 years ago (edited 2 years ago )

    Back then, I just used a base template, customized it, inlined its CSS, then tested it. Now, I just compose using a newsletter editor. There is also a good resource to start.

    Tables are recommended for backward compatibility purposes.

    3 points
  • Calum SmithCalum Smith, 2 years ago

    Also would like to know if font-embedding is as straight forward as it is in a browser.

    Mark my words: nothing is as straightforward in emails as it is in a browser. Suffice it to say that HTML in Outlook is like opening a webpage in Microsoft Word—because they literally use the same layout engine.

    If by font embedding you mean @font-face, then I believe it's impossible outside Apple Mail. And you're right not to use divs—you pretty much have to use tables for anything where you want control over the layout.

    Campaign Monitor has some great resources on what you can get away with. A bunch of it hasn't been updated in a couple years, but luckily that's not very long in email-land.

    2 points
  • Marcel Neumann, 2 years ago

    A few years ago I made a template based on Mailchimp's that we still use, but it hasn't been updated in years and there are other options nowadays.

    Recently I've been looking at some semi-automated solutions that use custom code to build the table layouts for you: Foundation for Emails and MJML made by the guys at MailJet.

    I still haven't used any of those for any real email work, but I want to give MJML a try. It takes care of adding conditional html comments targeting Outlook and it even makes responsive email possible on Gmail's official app (although that will not be a problem anymore since Google recently announced media queries support for Gmail).

    I recommend you check both of them out, see how their code works and use the one that best fits your needs :)

    0 points
  • Michael AMichael A, 2 years ago

    Save yourself a headache and use Bryn Jackson's Mailchute. It makes the whole process super easy. I just finished up a newsletter at Sigstr using Mailchute for the first time and it was great. I've written a few emails before but this definitely made things easier.

    Also, keep in mind that Litmus has free testing - for Outlook '13, Gmail (Chrome), and iPhone 6s Mail. Pretty useful for sure - and beyond those I would test the Gmail mobile app. Luckily for you, Gmail, notorious for being one of the most problematic clients to deal with, just added support for tons of new stuff including media queries

    Lastly, Campaign Monitor, Litmus, Email On Acid, and Mailchimp have plenty of awesome resources such as supported css properties for each client by Mailchimp.

    Emails can be frustrating to write but it's definitely super rewarding to have a finished product! Hope this helps!

    0 points
  • Piero BorgoPiero Borgo, 2 years ago

    Take a look at EDM Designer

    0 points