Outlook 2013 - Having it's own ways...

User 2490574 Photo


Registered User
20 posts

G'day all -

Thought I better test my newsletter design before sending it to a few hundred recipients, and I am glad I did.
The design looks great [if I may say so myself] in RED; shows correctly on Androids and iPhones, and even Firefox, Safari, Opera and IE seem to be ok with it. All showing green lights so far.

However, Outlook seems to think its necessary to 'adjust' some line heights. Whatever I tried - including some extreme heights such as 500% - Outlook remains stubborn and disobedient. It looks like it prefers 100% and little else.

Searched the web for a solution of course, and found some threads that advise the inclusion of .ExternalClass strings within CSS. So far I haven't had any luck in resolving the issue, most likely because I am not 'getting' it.

So, could anyone help me bring Outlook back under control by telling me how to override its tendencies to interfere with the line heights of my design?

Thanks in advance!
User 340457 Photo


Registered User
41 posts

Raymond,

I'm having the same problem as well. It is the showstopper preventing me from implementing a template I've designed in RED.

Right now, I'm using a template that is provided by my list service (Aweber) and the line heights are > 100%, so I know that it's possible. I just haven't dug in yet to find out why Aweber's template works and RED's does not.

David
User 103173 Photo


VP of Software Development
0 posts

For both of you here, having your project files and screenshots would be EXTREMELY helpful. This way we can see what you are describing. Remember the more information you share with us, the better we can help you. ;)

We have done extensive testing with all the Outlook's and RED works very nicely with them. Being able to look at your specific projects allows us to see how you setup your email.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2490574 Photo


Registered User
20 posts

That's me too, David.

Scott - it would have been handy if I'd attached screen shots in the first place; wasn't sure if this was a known issue.

Assumptions..assumptions.

Please find them at http://www.gblcg.org/tempdoc/RED_lineheight-issue.pdf as one pdf page that shows the same RED layout presented in three different channels: RED, Browser [Opera, Firefox, IE, Safari and Chrome all seem to agree on how layout needs to be shown] and, finally, Outlook 2013.

Sent you code as well.
Attachments:
User 232214 Photo


COO
827 posts

This is a known issue with Outlook and why we have the default line-height for paragraphs at 1.7. You can work around this by using text elements instead of paragraphs. It is less semantic, but Outlook does not 'auto-add' space to this element so it does the job.

We might be able to add yet another invisible hack to Responsive Email Designer in some future version that makes this work with paragraphs as well ;)
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2490574 Photo


Registered User
20 posts

Thanks Bob -

I used the Text Element instead of Paragraph. I may have a play-around with the latter now.

May i safely conclude that it's best to leave line heights otherwise to 1.0 for all other elements until that hack is found and included in a next version?
User 232214 Photo


COO
827 posts

Raymond den Otter wrote:

May i safely conclude that it's best to leave line heights otherwise to 1.0 for all other elements until that hack is found and included in a next version?


Well, it's not something that will break a design or anything. If you're using fluid layouts — and you should for email and website where you can't predict the viewers screen size — text will 'flow down' and add height that way. But you never know how much exactly since you don't know the exact screen width or resolution...

Therefor the best approach is to let the 'fixed dimension thinking' go and create spacious designs that are easy to read (large enough fonts, enough contrast and line height) and click (links and buttons that can be clicked with a finger), no matter what the device or screen that is being used.

Sorry for getting philosophical here :lol:
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2490574 Photo


Registered User
20 posts

Hahaha...

Happens to be that I quite like receiving philosophical answers Bob - especially when I can understand them and prove to be useful.

Perhaps a shared trait among those with Dutch surnames...?

Thanks mate - I am all good.

Just over the moon with your products; very happy & impressed.
User 232214 Photo


COO
827 posts

Raymond den Otter wrote:
Hahaha...

Happens to be that I quite like receiving philosophical answers Bob - especially when I can understand them and prove to be useful.

Perhaps a shared trait among those with Dutch surnames...?

Thanks mate - I am all good.

Just over the moon with your products; very happy & impressed.


That's great to hear Jason, all of it :lol:

Thanks!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.