Responsive Emails in Imodules

Applying a Progressive Enhancement Approach

December 11, 2014

Previously, I wrote about developing responsive emails. Here is how I create them in iModules, a web-based CRM primarily used by universities. Also see iModules help documents for additional details on the system.

1. Develop HTML email outside of iModules

I prefer using my web development tools rather than the iModules code editor and I design as much as possible in my standard dev environment. Once I have a solid HTML/CSS draft, I’ll begin staging in iModules.

2. Add HTML and Inline CSS to Template

After adding the HTML and inline CSS to a template, update the relative links to reflect the new domain. Save, close the window, reopen, and then poke around the code to see if iModules has stripped out or added any code. One thing I’ve noticed is that the system doesn’t allow inline CSS height value on images (say goodbye to fluid-width images). There is no documentation of what is allowed, so you are going to have to do some trial and error.

3. Test in Gmail

Gmail is a good place to start testing because it ignores external CSS. Based on the Gmail results update the HTML, inline CSS, and the ‘skin builder.’

4. Add External CSS

Once the inline CSS is good enough, add the external CSS and test across devices and clients. For unsuspected issues, I use my browser web tools while viewing the email in a web client to identify iModules’s injected HTML/CSS.

5. Adjust for iModules content

Remember to test the email footers. Each iModules footer is coded differently and may need to be updated to ensure an appropriate layout. Also, the ‘note’ in test emails will probably break the responsive design in small screen layouts.

Learn more about creating effective media, view my Production Remarks.