In our email, we see the footer font-size is not as we expected even if I specified !important in inline style. After google a bit, it turns out there is property called text-size-adjust to controle this. By default, Apple Mail’s minimum font size comes into play on the iPhone and iPad. By adding the this property to your CSS styles (text-size-adjust: 100% or none), you can
override the default font sizes on Webkit-based email clients, thus
avoiding layout glitches on the iPhone and iPad:
As this property is non-standard, it must be used prefixed: -moz-text-size-adjust, -webkit-text-size-adjust, and -ms-text-size-adjust.
If -webkit-text-size-adjust is explicitely set to none, Webkit-based desktop and tablet browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
Email template seems a piece of cake, but it is indeed not. We should be patient to use old school HTML coding skills and use popular email campaign tools to verify and test it.
Don't forget the followings:
1. Image styles
2. W3C HTML validator
3. Table for structures
4. Inline styles, no short-cut CSS
5. Testing across email clients
https://litmus.com/interactive-testing
https://templates.campaignmonitor.com/build/
https://litmus.com/blog/16-tips-troubleshooting-html-email
http://www.ruanyifeng.com/blog/2013/06/html_email.html
No comments:
Post a Comment