HTML email 2-coulmn layout

Hi everyone!

I'm designing a weakly digest type of email and I need to create a layout with images on the left and some paragraphs on the right. Each side should take half the space, kinda like a bootstrap grid.

I read that you are supposed to use only table elements in HTML emails. Is that still true? Can't I target only the most popular email clients and use a more modern CSS approach?

Comments 5

  • I did some more research and it turns out the tables approach is the only way to go.

    Lucky enough I found this template which saved me a lot of time. I only had to customize it a bit and it works pretty well.

  • If it is for html emails, you still have to use the html tables and safer to write your css inline.
    You can make responsive html email templates etc. Just takes a little more time and thought going in to the tables.

    Here is a basic 2 coloumn layout and responsive html email I made for a company.
    The code is commented.
    https://bitbucket.org/richard_taimalie/healthpathways

    If you have any questions, just let me know ( Hope it helps)
    Cheers
    Richard

  • Hi there,

    If you want to be sure that the email design will look okay in different email clients you should use templates like those:
    http://foundation.zurb.com/emails/email-templates.html

    Yes, you should use html tables for sure and inline the styles.

  • Hello! ✌🏻

    If its for email design, I would recommend going for some kind of framework since they are easier to deal with than actual tables.

    Here are a few awesome email frameworks:

    All of them will help you, but I prefer MJML or Foundation for emails. Personally I ❤️ MJML the most because it has an awesome online editor, a mac application and an amazing CLI. Anyways, use the best you see fit.

    PS: When styling you can always create classes in a < style > tag and reference them in each element later. Although I find it better to do this only for the main structure and do inline styles for specific elements.

    Hope this helps
    Cheers!

    D698NDM.jpg