An email newsletter may have some similarities with a web page, including how they look, the fact that both usually have a header and a footer, both can be built using HTML etc. That makes some people think that an email and a web page can be designed in pretty much the same way. Wrong!
For a start, emails can be viewed from different browsers, different devices and different email clients. That means different rendering methods, which in turn means that technical constraints need to be taken into account if you want your emails to display correctly from any browser, device and email client.
Here are top 10 tips that will avoid rendering issues and ensure your email displays correctly.
- Avoid background / gradients below text: Outlook provides zero background image support, so make sure that you always use a plain background color.
- Always use system fonts in order to avoid using images for text. Stick to fonts like Arial, Helvetica, Tahoma, Times Roman and Georgia.
- Don’t forget mobile devices!
- A 3-line footer can end up as a 6-line footer in the mobile version, which might not be so nice.
- A very wide and narrow header can be hard to see in a mobile version.
- Multiple columns (in desktop) will probably be reduced to one single column (in mobile).
- To ensure readability on mobile try to use a font size of 14 pixels for body copy and 22 pixels for titles.
- The “plain text” email version is important for two reasons. The Apple Watch is growing in stature and spam filters also want to see plain text versions as alternatives.
- The recommended width for desktop email: 600px.
- If you use too many images the chances are that your email client will flag it as spam, so, most email clients block images by default. Use text for your main message and call to action, and use images to make the email beautiful. Never use images to display your key message!
- Don’t overload the email with content. An email is not a landing page, it is the vehicle that will take your customers to a landing page (where they will find more information).
- Make sure you add clear call to actions.
- Do not hide the ‘Unsubscribe’ button.
- Use a clear, short, recognizable lower case subject line.