Table of Contents
Table of Contents
Email template definition
Design Guide
We have put together best practices into this guide:
Best Practices for SAP emailing.pdf
DOCTYPE
Always set a DOCTYPE at the start of the first HTML block. We recommend
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
LAYOUT
- Avoid using padding or margins
- Always use inline CSS
- Avoid BR, HR, and height tags in your emails
- Use Tables to create general layout of email
- Set wrapper reset styles in "wrapper div"
- This can override a browser or client's default styling of certain elements.
- Be aware of text and font changes per device (mobile especially) and browsers
BACKGROUNDS
- Use the older more basic background HTML tags "background-image" ; "bgcolor" ; "background"
- Always offer reset background colors or fall back background colors to defer to if your specific background isn't supported
IMAGES
- Avoid PNG images -> Try to always use either JPEG or GIF images
- Always provide image dimensions
- Make sure to give ALL of your images 'alt' attributes
- Outlook.com adds some pixels at the end of each image which can rearrange spacing, alignment, or padding. This can be overcome by using img {display:block;}
- Avoid 'float' tags; instead use 'align'
For more information, see:
- How to Code HTML Newsletters
- Defining the DOCTYPE blog
- Embedding images
- DOs and DONTs of HTML email design
- Creating HTML Emails: An Overview for Web Designers
- Getting stared with HTML Emails: Tutorial
- Tips for designing for Outlook