What do you think YOU'RE doing?
Are you a developer looking to custom code your email templates using CSS (Cascading Style Sheets) - while maximizing the integrity of your layout or desired design? "Good luck," says the old school (i.e. here comes the hurt).
Fortunately, JangoMail has some solutions. So, we prepared a simple list of "do it" and "don't even think about it" guidelines to ensure your designs look as good and function as well within your emails (and mail services like Gmail and Outlook) as they would on your typically more stylized web pages.
Do it
- Use tables for layouts, because they're more consistently supported
- Put your CSS code inline with your content (i.e. <span style="font-family:Arial, Helvetica, Sans-Serif; font-size: 9px; color:#000000;">your content...</span>. Already created a template? Use this tool to move all of your CSS inline.
- Set and fix your template width by assigning width, cell padding and cell spacing for all tables and table cells
- Add whitespace around an image by using hspace and vspace tag attributes, as not all email services support margin and padding inline styles
- Always include a link so recipients can view your email within a web browser, and "_blank" in links to prompt the opening of a new browser window or tab when viewed within browser-based email services
- Include a visible link to your website and an eye-catching 'forward to a friend" button
Don't even think about it
- Count on external or embedded style sheets, as many email services cut everything above the body tag and disable external style sheets
- Use positioning and floats
- Incorporate JavaScript into your email - it can trigger spam filters
- Assign attributes to the <body> tag, as most email services won't acknowledge them
- Use background images (background color is okay)
- Include CSS shorthand or CSS properties for positioning (nested tables work better)
Until next time, have a great rest of the week!
