响应式HTML电子邮件模板

Question

I'm a Software Developer (mainly Frontend), so I'm used to code in a responsive way.

Now I stumbled upon a task to create an email template and did a bit of a research. What I found out that you have very limited ways to achieve things which are quite basic in software development.

Could someone who has experience with developing email templates answer the following questions:

• Can e-mails be developed in a responsive way (ie. with Bootstrap Grid columns, layout breakpoints etc.)? I've read in some threads that in order to support all clients I need to use a table layout.

• Can I use CSS tags as in a normale app? (Meaning, not only inline, but also have a seperate style tag)?

• For fonts and spacing: Can I use em or rem instead of pixels? I would like to cover screens which do not use the default font layout.

• I found a bootstrap library for emails which seems to solve all these issues and support many email clients: https://bootstrapemail.com/ . Can someone tell me if this solves the issues?

Answer 1

1. Can e-mails be developed in a responsive way (ie. with Bootstrap Grid columns, layout breakpoints etc.)?

Yes, you can use bootstarp classes in HTML tag as like a web page.

<button type="button" class="btn btn-success">Success</button>

2. Can I use CSS tags as in a normale app? (Meaning, not only inline, but also have a seperate style tag)?

Yes, You can use style tag for styling but not sure about external css.

<style type="text/css">
    body {
        width: 100%;
        background-color: #ffffff;
    }
</style>

3. For fonts and spacing: Can I use em or rem instead of pixels? I would like to cover screens which do not use the default font layout.

In my opinion, using px is the best way when coding for HTML email. You can also read more about In email templates, should font-size be in pt or px?

4. Bootstrap for Email Templates

It is a best way to develop custom and responsive email templates. It is supported many Email Clients like Yahoo, Gmail, AOL Mail, Outlook, Apple mail, etc... Essay to use and lot of examples available online.

Answer 2

• Using css as normal apps might not work for every client, it's best to work inline and also you can use internal css for stacking on devices.
• Pixel is the best option for emails
• Personally, I never used Bootstrap 4 emails but it can be used as it supports lots of email clients

I have added my working code that supports almost every client. You can review the code. Hope it'd help you to understand emails better!

Here is the link: https://codepen.io/nazifa1022/pen/dxNNBg