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?
Yes, you can use bootstarp classes in HTML tag as like a web page.
<button type="button" class="btn btn-success">Success</button>
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>
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?
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.