Anyone who has ever had to program an email for a marketing campaign knows that getting your email to be cross-browser compatible can be a daunting task. First there are the different email clients such as Hotmail, Yahoo, Gmail, Entourage, and Thunderbird to name a few. Not to mention the various Outlooks and the treacherous Lotus Notes. Then there are the browsers such as Google Chrome, Firefox, Safari and IE and their versions. Finally there are the operating systems like IOS and the multitude of Windows platforms. And don't forget about mobile optimization. Whew, that's a lot of obstacles, and you haven't even opened your HTML editor yet.
Cross-browser compliance for emails can seem like an insurmountable task. In fact, some developers argue that it's more important to program your email according to your target audience browser preference. If you work in email development long enough though, you will eventually need to tackle this challenge. Below are some insights and tips to help meet this challenge head on.
Don't think like a developer. Instead think like an architect. Programming for emails is different than programming for websites or landing pages. Creating cross-browser compatible emails requires you to use the most basic, fundamental HTML programming skills. Think tables and cells instead of divs and p tags. Use inline styles instead of CSS, as clients like Gmail will ignore code in the header.
Watch your spacing. As much as padding and margins are relied on with websites and landing pages, they only work haphazardly across email clients. If you need to add space, use spacer .gifs, divs or the line-height element for extra padding.
Go responsive. With more customers viewing email on a mobile device, it is important to design your email responsively. Start by thinking of your email as a modular layout that will stack to one column when seen on mobile. Add some @media queries and you're all set. Checkout this free ebook from Campaign Monitor for more information on getting started with responsive design.
Test, test, test. Email clients and browsers are constantly updating. An email that worked 3 months ago might have an issue now. Be sure to test on all of the clients and platforms used by your target audience. Litmus is a great tool for checking how your email renders across multiple devices and email clients. You can also validate the accuracy of your code through W3C Validator and W3C MobileOK.
- When a list is required, create a table with at least 2 cells, one for the bullet and the other for the copy. This will allow both elements to line up evenly and will prevent awkward text wrapping issues.
- Be sure to declare the “align” element in you tables and cells and the “valign” element in your cells.
- All images should have an alt and title tag. For spacer .gifs the alt and title tags should be left blank (Example: alt="").
- The height element should only be declared on images. Do not use for tables or cells.
- Include a title in the title tag when using a view as web page feature.
- Add border=”0” to all images.
- Do not use .png images.
- Encode all characters.
Remember, it may take a little more effort, but having a cross-browser compatible email is crucial for your marketing efforts.