Using the HTML email template editor
Working with responsive emails is a tricky business. Creating responsive emails in Zoho CRM has an extra layer of difficulty. Using the html template editor you can add your own css media queries, but those queries are very limited. Below are a few tips and suggestions on how to create your own responsive emails, despite Zoho’s limitations.
Zoho HTML editor limitations
First, let’s explain what the limitations are with Zoho’s HTML template editor. You can add media queries, but only specific ones. You can use max-width but if you try to get fancy, for instance, and use webkit-device-pixel-ratio (to target iPhones) then Zoho will strip that part of the media query.
Zoho says they have a solution coming (5 years late): see the following thread https://help.zoho.com/portal/community/topic/responsive-mobile-enabled-html-email-templates but until then we need work arounds.
Increase your max-width mobile query
This seems basic, but the “normal” query for targeting mobile is `@media (max-width: 680px)` (or 480px) however this doesn’t work with mobile devices with higher pixel ratios (like iPhones).
I found I can target iPhones and most mobile devices by using the following media query
`@media (max-width: 960px) {}`Create responsiveness without media queries
I followed this excellent tutorial Creating Future Proof Responsive Emails without Media Queries, see link below.
“It’s called the fluid hybrid method, sometimes referred to as the spongy method of email development. The fluid part refers to the fact that we use lots of percentages. The hybrid part is because we also use max-width to restrict some of our elements on larger screens.” — quoted from article above
I need a responsive 3 column layout for my email. Below, I will summarize how to structure your html. The above article will fill in all the gaps and explain what you need for different column layouts.
HTML: Use a table for the outer html structure and divs for the columns.
CSS styles
- Set a max-width to your outer table, like 800px
- Calculate the inner columns to be a percentage of that outer width
- Columns should be display: inline-block, with a max and min width
The outer table style: max-width: 800px; width: 100%;
td.columns: text-align: center; width: 100%; max-width: 100%;
The individual columns (.column): display: inline-block;width: 100%;max-width: 367px;min-width: 200px;text-align: left;vertical-align: top;
The individual column’s max-width can be a percentage or a set pixel width.
If you cannot add media queries in your email template, the above will allow enough responsiveness that your template will look good on mobile.
I hope these brief suggestions can help you create responsive emails in Zoho CRM. If you have any additional tips or tricks, please leave a comment!
Tips/Tricks
- Use Inliner to inline your css: https://www.campaignmonitor.com/resources/tools/css-inliner/
- Use the HTML editor not the drag-n-drop editor in Zoho (which means you will have to create all the html yourself, but you will have full control)
- Send out a test email: https://putsmail.com/tests/new
Resources
- Understanding Media Queries in email: https://litmus.com/blog/understanding-media-queries-in-html-email
- Creating Future Proof Responsive Emails without Media Queries https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
- Zoho email HTML template editor: https://help.zoho.com/portal/kb/articles/email-template-editor
Robin Hjelmeir is a magical Unicorn specializing as a front-end developer, whom lives in two worlds fantasy and reality. Find her on twitter @RobinHjelmeir
Want to build something magical? Contact us!
Twitter: @UnicornHQ
Website: http://www.unicornagency.com
