Formatting Issues In Google Apps

Laura Borawski

Recently I have been experiencing formatting issues with NetCommunity emails opened in my Google Apps account. Random sentences will lose their formatting, links won't work, span tags appear, or images won't load. When I fix one issue, another one replaces it. The issues only seem to appear when the email is sent to Google Apps accounts within my office. When the emails are sent to different email providers, the formatting appears how it looks in NetCommunity. The code is clean, and I've removed formatting several times. Has anyone else experienced issues like this?


 

Rebecca Leifert

Hi Laura,

I've been developing email code/design for NetCommunity, Constant Contact, MailChimp, etc since 2011 & it's never the same two weeks in a row. Gmail Apps are the worst to program for since it strips out most of the CSS, only keeps some your properties and some of the ones it does keep...it choses to ignore. It also has "Auto-resize" or "Auto-fit" options that overtake your well written code. I have not doubt your code is clean, but double check to make sure your code contains the declarations Gmail is willing to read/render. Here are some of the most common mistakes I see in email codes that aren't rendering well in Gmail Apps:

• Be sure you inline style everything and apply those same styles to your table cells as well or it may not always stick for Google Apps.
• Also, it doesn't recognize %s for widths, so make sure you're using pixels instead.
• Yes, you may have to have more than one declaration for the same property so it will cover rendering in Gmail App & Outlook (the other beast!)
• Adding a min-width declaration along with a width can help - just be sure they are identical.

I do want to note some specific NetCommunity quirks:

• BBNC likes to place link tags outside of paragraph tags - this may explain your links not working. Bring those tags back in & it should work again.
• If you change anything in BBNC's front editor, it creates a span tag. Best to edit code instead to avoid problems.

I hope this was even a little helpful, I understand how frustrating email coding can be.

Best of luck & let me know how you do!

Laura Borawski

Rebecca,

This is very helpful! Thank you so much!

Best,

Laura

Laura Smith

Annual Giving Coordinator

The College of New Jersey

PO Box 7718, Ewing, NJ  08628
609-771-2188
laura.smith@tcnj.edu

Scott Reuschling

A common issue that I see is with table-based designs; users will often have a table selected when they are linking something, so the anchor tag is placed around the table and the link will not work. Also, the more nested tables that you have, the less likely your email will display properly in all email clients. Some users will insert an image into a table so that they can align it left or right - the table is an additional element that is not needed and complicates the rendering of the email.


I've found that running the source code through Dirty Markup will clean up some of the code and resolve odd issues that you may be experiencing.


I recently added two blog posts regarding emails; while they are geared towards mobile-friendly emails, there is still some good information that you may find useful.

6 Tips For Creating A Mobile-Friendly Email Message (Part 1)
6 Tips For Creating A Mobile-Friendly Email Message (Part 2)


Here are a couple of other resources for you:

CSS Support Guide for Email Clients
Really Good Emails (simplified yet professional designs for inspiration)


There are lots of guides out there, and plenty of free, clean, professional email templates in which you can insert the source code into your own template and customize it for your organization. Or you can purchase templates from some reputable sites online for fairly cheap.


Finally, if you haven't checked out the NetCommunity Road Map webinar, please do so at your convenience. There are a lot of positive changes coming to NetCommunity, including enhancements to email functionality.