Email coding and website coding are not exactly the same thing. Yes, they both use elements of HTML, CSS, images and enriched media, but ISPs and email providers tend to lag behind web browsers when it comes to how content is displayed. Unfortunately, there are no universal standards for email rendering, so creating the perfect design can become a little tricky. Here are seven tips to give your email the best possible appearance across all channels.
Avoid CSS and code with tables.
When possible, standard HTML tables should be used to ensure ideal message rendering. Embedded or external CSS will be stripped out by many email clients, which leads to errors and broken coding. Inline CSS within tables or Span tags are safer and can provide more flexibility. A good rule of thumb is to try to keep your code as basic as possible—think 1997 style coding.
Avoid background images.
They’re not supported in most versions of Microsoft Outlook, and they won’t load in many other email platforms, which results in blank space.
Use Alt attributes on images.
This will provide alternate text that shows up if images are blocked or turned off by default. Alt tags are especially important when viewing image-intensive emails on mobile devices.
Include height and width definitions on images.
Defining image dimensions can speed up message load time and will create a clear structure for the overall message.
Use the Block tag for piecing together images.
The Block tag will protect your design from unwanted breaks or white lines between images. This is useful whenever your design pieces together multiple images to create a seamless appearance.
P tags can create paragraph spacing issues.
Although P tags are very common for paragraph coding, it’s usually safest to use double BR tags to create paragraph breaks and to avoid spacing issues.
Always test.
ISPs and email services are constantly changing, and message rendering defaults can vary, so it’s always a good idea to send yourself a test through as many email platforms as possible. There are also a lot of great tools that allow you to pinpoint design flaws, optimize content and expose potential issues prior to send.
What best practices or design tips have you used when formulating an email marketing message?