If you’re in the business of creating or editing responsive eDM (email coding), you know a template that works across all email clients and devices is worth its weight in gold.
Your stunning email that renders beautifully on Mac Apple Mail might look like a dog’s breakfast on Outlook. Android might add its own padding and throw an image off-centre just for fun, and gmail likes to spice things up by ignoring margins.
These are all great applications with really nice interfaces, don’t get me wrong. They just
ruin my life necessitate a bit of extra HTML & CSS work to look good on all devices and platforms.
My secrets for infallible responsive email coding :
- Vigilance is key – test, test, and TEST again!
- Test on the native platforms where possible – not just using a 3rd party render like Email on Acid or Litmus (our top picks).
- Don’t forget tables; email coding is very different from coding a web page. Always use a container table with a flexible width by using percentages (eg width:100%;) instead of setting fixed pixels (eg width:650px;). Same with media queries – use percentages, try avoid using the height parameter for anything but images.
- Responsive Images- flexible width, flexible height. For images that are wider than the standard viewports, (eg 480px for portrait mobile), you should use a flexible width percentage in your media query (eg width:60%) and height:auto!important; You don’t want your image to stretch and distort, you want it to remain responsive.
- Include ‘fixes’ for each of the troublesome browsers in the <head> of your code. Outlook, gmail and *insert obscure internal mailing system* as a start. These are snippets of code which you can find in any trustworthy Google search. Just ensure you know how to use them, and make sure you test them!
- Keep a glossary of ‘fixes’ for different email clients and their subsequent releases. That way you always have the most up to date code and you’re not caught out when outlook 2018 spring release comes along.
- Don’t trust open source codes without testing – these are being released in open source platforms regularly, like Github. Eg ‘fix for margins on gmail’, give them a go if you have time but be sure they are well supported and come from a trustworthy source.
- Always test the unique break points of your template using a browser developer tool responsive mode. Some will look terrible at 480px, others at 510px. Manually resize your viewport to see where the template ‘breaks’ (aka looks awful) and use those break points for your media queries.
- Because media queries are not supported by all platforms/devices, you should look into hybrid email coding. This means your template will have a fluid layout on platforms where media queries are not supported AND work like a charm on those that do too. Psst Litmus keep a pretty good tab of which browsers do and don’t support media queries.
Use hybrid coding and continue to optimise. What might be a fix and work perfectly one day, might not work in the next release, or on another platform. Future proof your template.
Or for those who would simply rather invest…
RMS have a couple of template packages for guided hybrid templates already optimised across platforms ready to go and even multi-step forms to match! Once you do a cost-benefit analysis, it’s often a case of engaging some experts to ensure you’re not wasting time that could be spent executing the campaign today!