Tuesday, September 24, 2013

text-size-adjust in Email template

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