Formatting issue - email does not look like preview.

SOLVED
Go to solution
Occasional Participant

Formatting issue - email does not look like preview.

I'm having major difficulties getting the format in my meeting invite correct.  I always spend too much time changing font sizes and adding spaces only to have them revert or change to something completely different a couple of saves down the line.  The text editor has a mind of its own!  However -  the big issue is the resulting email.  Once I get the email looking the way it should in the preview, I send out a test email and open it in Outlook and its all jacked up again. 

 

How do I fix this?  I can't send the current email out to colleagues without looking like a moron. 

 

Thanks,

Shelley Broyles

1 ACCEPTED SOLUTION
Marketing Advisor

Hi there, 

When using our Second Generation Editor (2GE) sometimes what you are designing may not be the same design and layout that gets sent out to your contacts.

 

Email programs and mobile devices have unique ways of displaying emails. So, the email design your contacts see may not exactly match what you see when you preview it in Constant Contact which I know can be frustrating. These issues typically arise when you are copying an email multiple times as the HTML code for all of your edits from previous versions may cause these display issues. We recommend creating a new email, in this case, to make sure that you are starting fresh. If you use the same layout for all of your emails you can use the Save as template feature so that your edits to the design of the email will be saved and you can still create a new email to help avoid any display issues. Here’s more info on that.

 

Please see this FAQ with these design tips and you can make your email look better in all email programs (Outlook, Gmail, Yahoo, etc.):  http://conta.cc/2lkiaQZ

Always preview your email before sending whether you are using 2GE or 3GE.  I hope that helps! 

 

 

View solution in original post

575 REPLIES 575

You're encountering rendering issues.

There are three types of email platforms:

  1. Desktop platforms (like Outlook)
  2. Browser platforms (like Gmail)
  3. Mobile platforms (like an email app on an iPhone)

Within each type of email platform, there are over 70 email clients.  Sometimes they don't all display the same the first time around and yeah it sucks.

YMMV The thing I dislike about the Beta templates and that UI (BTW how long can a Beta be called a Beta ?) is that you can not go into the HTML to tweak it like you have to do from time to time.  I've had to scrub projects that I spend hours on because of that reason.  (I've stopped using the "BETA" templates for the time being)

 

Offering FREE Project Consultation
Accredited CTCT Solution Provider
Constant Contact All Star 2009-2010-2011-2012

www.cliquemarketing.biz

 

 

Participant

Hi all. I've been beating my head against a wall here trying to make an existing printed flyer into a CC email for a client. Not the order of things *I* would have chosen, but that's moot at the point. I've done my best workaround and created images for the complicated top and bottom and added copy to the middle section. 

 

Had a heck of a time getting the sections to line up and be the same width (wound up having to get a little jiggy in the HTML), and finally thought I had it but when we ran a test it was fine on all browsers, and in-office Outlook machines except one using Outlook 2013. It decided to make that middle and bottom box considerably wider than the top. 

 

I tried to set the width to be static at 640 in all the boxes, but it keeps changing to 100% (in all areas, for the record, not just the uncooperative one). 

 

Anybody have thoughts on this??? Thanks for the help.

Hi @AndyK59 

 

I'm sorry to hear that you were having display issues when viewing your email in Outlook 2013 but I see that you were able to get in touch with one of our Support Reps who was able to help you. They had you use a new block and that helped with the display.

 

If you have any other questions please let us know!

Regular Participant

When I view in Outlook, the images overlap with the text.

Are you using your own code?  I didn't know CC had "responsive" code available.

 

What template are you using?

 

Offering FREE Project Consultation
Accredited CTCT Solution Provider
Constant Contact All Star 2009-2010-2011-2012

www.cliquemarketing.biz

This is the new mobile template beta (which, as far as I can tell, doesn't allow users to enter their own code). It was one of the business templates. So, not something that we wouldn't expect some bugs with, since it's in beta--but we are not able to use the mobile templates for our newsletter that uses images until this is resolved. I am not sure whether "responsive" is the right word. We are really looking forward to having newsletters that look great on a variety of platforms!

Hello @RuthMNC 

 

Sorry you're having this issue with our beta editor. If you could give me the title of the email you were working on, I would be happy to take a look and see what I can do to help. 

 

Let me know!

Amber Royal
Community & Social Media Support

If you find my post helpful, and it answers your question, please mark it as an "Accepted Solution" by clicking the Accept as Solution button in the bottom right hand corner of this post.
Occasional Participant

In an email I just sent, the font color in only one portion of the email changesd automatically when viewed in various formats. Looking at my Gmail account, the font color changed from white (#ffffff) to a grayish color that is nearly illegible against the black background. What's strange is that it only changed when I looked at it on my desktop (Mozilla and Chrome) but not when I looked at it on my iPhone. In preview mode and in the test email I sent to a coworker, who viewed it in Outlook, the color remained white. After noticing this, I double checked the HTML to see if I goofed up by copying and pasting from the web, but as far as I can tell the html color is the white that I selected (#ffffff).

 

It's a little late to salvage this email, but I'd like to avoid this in the future. What happened and how do I fix it next time?

Sorry to hear you were having trouble with formatting your latest email. Where it sounds like it only changed color on your desktop, you may need to make sure you update all colors through the Colors & Fonts option to match your styles, then add new blocks so you can see the changes reflected within them. 

 

global.PNG

 

 

Another option would be to clear the styles of the block completely and format them again. We have an FAQ here on how you could try this as well. 

 

Let me know if these work for you!

Amber Royal
Community & Social Media Support

If you find my post helpful, and it answers your question, please mark it as an "Accepted Solution" by clicking the Accept as Solution button in the bottom right hand corner of this post.
Occasional Participant

To Whom It May Concern: I sent an email to all my customers (eXcel Promtion-Dealers Plus) and sent a test to be sure it was correct. The test looked perfect and had no issues with the blocks. When I scheduled the email to be sent to my customers they suddenly received something else. The bottom block was split in two and ended up being horizontal to each other rather vertical. The bottom design was originally grey and had company info. The email my customers received had a black line at the bottom with white text that only said "all rights reserved". This is a huge Constant Contact mistake and I hold you accountable for making the email not look as it was shown during the test email. I expect a response explaining the issue and what you are willing to do for Delta Mustad regarding this mishap. Best regards, Haaken

Hi @HaakenJ 
I am very sorry to hear this happened.  I see you called into support and got some information as well. This is a common problem with all email senders since every email client gets the email looking a little different. For example, Outlook won't display background images. I took a look at the email you mentioned and see that email is made of two large images. Are you seeing the image stretch off the page in some browsers or maybe go side to side instead? You mentioned the bottom block split in two, do you have a screenshot and email client of where this happened?

 

Thanks for your help,

Hannah M.
Community and Social Media Support

If you find my post helpful, and it answers your question, please mark it as an Accepted Solution

Are you on Twitter? Follow me here!
Employee

Have you ever created an email masterpiece just to test it to your Outlook account and not see the same results in your preview? One of the issues I see most is when Outlook creates a large gap between content and images that are not visible in the editor.

 

How does this happen? Below I have the explanation.

 

Here is a newsletter I created in our editor:

 

nogap.png

 

As you can see I have no unwanted large gaps on the right side column. But then I send myself a test to Outlook, and this is what I see:

 

2015-03-02_1446.png

 

A gap I did not create! Outlook reads each email much like a word document. If a picture happens to fall at the end of the page, Outlook won’t split the picture in half but instead create something called a Page Break (which is the large white space you see above) and push the content down below the break.

 

How can you avoid this? Here are some steps you can take to resolve this issue:

 

  1. Make the images above the break smaller so the content will fit before the break.
  2. Move the image up within the block.
  3. Above the image you can increase text size to push the image down or decrease text size to pull the image up.
  4. Move the block the image is in away from the page break.

Let us know if you have any additional questions!

 

Do any posts in this forum look different from the account you have? Check out this post in our Toolkit forum

Amber Royal
Community & Social Media Support

If you find my post helpful, and it answers your question, please mark it as an "Accepted Solution" by clicking the Accept as Solution button in the bottom right hand corner of this post.
Participant

I am working on my newsletter and I cant seem to figure out how to make it format correctly on the outlook 2013 appllication. The Preview and Test emails seems to appear normal on all other emails, such as gmail but I cant figure out how to format it correctly, specifically on the outlook application. It is currently a draft and is called "March - 2015 Newsletter OEM". Another issue is the formatting with content and images, because they are all scrambled when viewed on the Outlook application. Please Let me know what I can do.

 

Thankyou,

Hello @PreferSolar_ 

 

Sorry to hear you're experiencing formatting issues, I know getting your email formatted correctly is important! Are you still experiencing formatting issues? I tested that particular email to Outlook 2013 as well and could not duplicate what you were experiencing. If you're still running into this problem, could you reply back with additional information on where exactly in the email you're seeing this problem? 

 

Thank you, 

Amber Royal
Community & Social Media Support

If you find my post helpful, and it answers your question, please mark it as an "Accepted Solution" by clicking the Accept as Solution button in the bottom right hand corner of this post.

Better yet, include a screen capture of the issue.

Occasional Participant

In trying out one of your new mobile responsive templates, there seems to be a glitch with the Social Share icon block when opened in Outlook on desktop. The block stretches out, adding many rows of lines that look like they contain the site URL's if you mouse over them. When I deleted the Social Share, the footer block works fine. Can this be fixed?

Hi @CanopyCU,

I am sorry to hear this is happening. I took a look at your Summer newsletter and couldn't replicate what you are describing. I have Outlook 2010, can you check what version you are sending to?

 

Also, is this the block in question?

2015-05-13_14-16-14.jpg

 

Thanks,

Hannah M.
Community and Social Media Support

If you find my post helpful, and it answers your question, please mark it as an Accepted Solution

Are you on Twitter? Follow me here!
Occasional Participant

Hannah, we got in contact with your phone support and our questions were answered. It's Outlook 2007, by the way.

Thanks for your research and help!

Awesome, glad to hear it!

 

Thanks for the update!

Hannah M.
Community and Social Media Support

If you find my post helpful, and it answers your question, please mark it as an Accepted Solution

Are you on Twitter? Follow me here!
Occasional Participant

Images cut off text in Microsoft Outlook. The first letter on a line does not appear when an image is left aligned with the text. This problem does not appear to affect text with an image that is right aligned.

Hello @ToniR6

 

I tested the latest sent email from your account to my Outlook and could not see the display issues that you mentioned.  I would like to take a further look though, so that we can work towards resolving this for you.  Can you send us the answers to the following questions please? 

 

  • What is the name of the email that you are testing? 
  • Can you send us a screenshot of each issue (the image being cut off and the first letter not appearing in a paragraph)? 
  • Which version of Outlook are you testing to (Hotmail, OWA, 2010, etc.)? 

If you wish to keep any of these answers private, please feel free to email us at social_support(at)constantcontact(dot)com with a reference to this post and your username.