We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x
Private

Mac Mail images in Preview not centered

High Priority
52 Views
Last Modified: 2020-05-21
Hi there. Im building emails inside Outlook and when they come across my images appear fine within Outlook. However, when viewed in Mac Mail, my images are not centered when viewing the emails in preview. Only if I double-click and open the emails in Mac Mail that they appear centered.

I've attached 2 screenshots.

Mac-Mail-Preview-image-not-centered.jpgImage center-aligned in Outlook which is correct
Any ideas experts?
Comment
Watch Question

Louis LIETAERSystem Infrastructure Architect
CERTIFIED EXPERT

Commented:
Call Mac support, as behaviour is different in preview or in edit mode. This look like a bug.

I don't think we can further
Eoin OSullivanConsultant
CERTIFIED EXPERT

Commented:
This "problem" does not have a fix.

You're dealing with small anomalies in the rendering engine based on the screen width and the code in the email.

If you turn off the sidebar on Apple Mail which shows the mailboxes [VIEW : Hide Mailbox List]
Make the Apple Mail App full width so that the Preview window is as wide as possible .. does the problem resolve itself?
If you open the email in a Window and shrink the window width down to the same width as the preview pane .. does the image move to the left as per the preview?

If either of the above actions works then you've not got an issue with MacMail at all but more likely the CSS code in the Outlook mail to begin with .. view the RAW SOURCE of the email .. if its HTML you may see the cause for the moving image.



David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
First step will be to run your message through the W3C validator...

https://validator.w3.org/nu/ - any errors/warnings means it's anyone's guess how the message will be rendered across many mail clients.

For correct rendering, ensure 0 errors/warnings in your message.
COwebmasterWeb Manager

Author

Commented:
Eoin OSullivan and David Favor, I'm just building the email straight within Outlook using tables but don't see the option to view edit the html in the email. Where do I go to view and edit the html? There doesn't appear to be an option for that anywhere.
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
1) Just because you're building with Outlook doesn't mean the HTML is correct.

If you require mail which renders correctly in all clients, then you'll build your email outside any mail client + validate the mail + then send the mail.

2) Email Tables - All Spam Classification systems ascribe high penalties to the following...

a) HTML Tables

b) Javascript

c) CSS which sets background + foreground colors of any element within a certain percentage of the same color (used for keyword spamming)

d) HTML syntax errors

3) If you'd like highest Delivery + Inboxing, avoid all items in #2 + set your DMARC policy to p=reject;sp=reject.

Note: You must be very careful setting DMARC policy. If high Delivery/Inboxing is required, open another question about DMARC policy.
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Aside: If you'd like to see just how Outlook produced Email HTML breakage (it's normally very bad).

Email yourself a message, save the HTML component of the message, run the HTML message component through the validator.
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Aside: If you think through this logically, a browser or email client can only render the HTML provided.

If there are many HTML errors, then each tool will invoke it's error recovery logic, where error recovery logic varies wildly.

So with broken HTML you'll never know how HTML will render.

Then... each time any tool updates to a new version... error recovery logic tends to change... so even if you get broken HTML rendering... at some point... the rendering will scramble again...

If you live by email marketing, best adhere to the things to avoid listed above.
COwebmasterWeb Manager

Author

Commented:
Thanks David Favor for your input! For now, I need to build and send out these emails via Outlook desktop application on a Mac BookPro. These are not for marketing purposes but as an internal staff email but I agree with you and would like them to render properly across all client platforms. I would like to build them using html/css but can't find where to add in html/css into Outlook > File > New > Email

I can build an email using html/css but where do I add in the html? I don't see that option anywhere.
Eoin OSullivanConsultant
CERTIFIED EXPERT

Commented:
Bad News .. OUTLOOK on MAC OSX does not have a HTML editor .. you can view the source on a received email but not create new emails and edit the source code.  In effect you need to create the email in a proper web editing tool and send it as an email to your Outlook inbox .. then you can forward it.

There are LOTS of limits on HTML in emails in terms of the code supported and for example all CSS styles need to be in the body of the html code which is not typical for browser web pages.  

If you're comfortable with HTML then you can do this in apps like Atom or one of the hundreds of code editors.
Personally if it’s a rare requirement you might want to try something like BEE - https://beefree.io/bee-free/ or you can use GMAIL which has a better HTML editor features and send the email to your inbox and forward from Outlook.

COwebmasterWeb Manager

Author

Commented:
Thanks Eoin OSullivan. Unfortunately, I can't forward the email I'm building from within Outlook but I can build an html/css email that passes 100% on deliverability is mobile-responsive, inline css for Outlook and passes 100% across 90 of the major platforms out there (tested on Litmus on Email on Acid for example).

The email I'm building within Outlook is probably not even mobile-responsive and I would just like to paste in my HTML code.

So, on a Mac OSX, which is what I'm using, you're saying there is zero chance of me building my email on a third party platform like Litmus then pasting that code into Outlook? Can I import it in as a Email Template or how about installing an Office Add-in that will allow me to paste in my code?

There's got to be something, it's 2020, for crying out loud, lol!!!
Consultant
CERTIFIED EXPERT
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.