diff --git a/README.md b/README.md index 2a751c1cea73bb06e4e74cc2e64e84fe880f79e4..4cef908a93989f424ea0bb061803d5dafb827e9c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,24 @@ # Email design ## General tips +- Avoid using divs and flexbox; stick to <table> elements with inline styles for reliable rendering. +- A width of around 600px ensures readability on most screens (do not go above 600px) +- Stick to common fonts like Arial, Helvetica, Verdana, or Times New Roman to avoid rendering issues. +- Always include a plain text alternative to improve deliverability and accessibility +- Most email clients, including Outlook, Gmail, Yahoo Mail, and Apple Mail, do not support embedded videos (e.g., <video> tags). -## Supported CSS in emails +## Supported CSS in Outlook +- Outlook does not support border-radius or background images in normal CSS +- Outlook ignores 'style' blocks, so always use inline styles +- Outlook does not respect max-width, so define fixed widths +- Use VML (Vector Markup Language) for these elements. + +- Example for a rounded button: + +_<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://yourlink.com" style="height:50px; width:200px; v-text-anchor:middle;" arcsize="50%" fillcolor="#007BFF" strokecolor="#007BFF"> + <w:anchorlock/> + <center style="color:#ffffff; font-family:sans-serif; font-size:16px;">Click Here</center> +</v:roundrect>_ ## Tools for email preview +- Use tools like Litmus or Email on Acid to check how your email looks across different email clients.