Hotmail now FORCING users to use Outlook.com setup?

Last time I used Hotmail to do some inbox testing, I got a popup asking if I wanted to switch to the new Outlook.com layout/view/whatever you want to call it. I said no, and was able to continue using Hotmail.

Today, however, I logged in to hotmail.com and was instantly taken to an Outlook.com view, without any consent or action on my end.

Has anyone else experienced this? I only ask because a fix I had for Hotmail is now no longer needed if Outlook.com is replacing it completely. Conversely, I need to find a fix for Outlook.com which I did not need to worry about for Hotmail in regards to line-height.

In this post, I am not looking for solutions - I am only looking to see if others are experiencing being forced to Outlook.com or not, and whether there is a way to revert that or not. I want to update our teams on whether or not we need to continue supporting Hotmail officially. I'm leaning towards no, but I want confirmation that I'm not the only one experiencing this.

Your response is much appreciated! :)

roshodgekiss roshodgekiss, 3 years ago

Hi erikwoods, the impression I got after talking to an Outlook.com staffer a few months ago is that the migration to Outlook.com is inevitable. Outlook.com's quirks are definitely the ones to defend your templates from, from here forward. Sorry for the bad news! :P


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
erikwoods erikwoods, 3 years ago

Thank you for the confirmation, Ros.

erikwoods erikwoods, 3 years ago

Ros,
Having said that.... NOW I am curious about some solutions to some problems I've been seeing with regards to line-height.

I know line-height is an issue that comes up a LOT and is talked about a lot. Previously, my solution for Hotmail was to put line-height on <td> as well as <font> tags within those <td>s. Now, however, it doesn't seem to be quite a good solution with Outlook.com. Or perhaps that was always the case and I simply neglected to recognize it until now.

It seems that the only way to ensure proper line-height (in theory) is to set it on EVERYTHING, inline. So if you have this:

<font>
  <b>bold text</b>
  more text
  <i>italicized text</i>
</font>

You should really be doing this:

<font style="line-height: Zpx">
  <b style="line-height: Zpx">bold text</b>
  more text
  <i style="line-height: Zpx">italicized text</i>
</font>

Is there a better solution I am unaware of? I've been coding emails since around 2006 and I feel like everything I know has to be questioned constantly. I see posts everywhere about solutions for several things but they often become outdated rather quickly.

roshodgekiss roshodgekiss, 3 years ago

Hi erikwoods, what you've said above seems pretty reasonable, however if you're inlining your CSS, I wonder if the following would be just as effective:

body, p { line-height: zpx; }

I guess it really depends how finicky you need to be here. Taking a look at our monthly newsletter, we only set line-height on p and heading tags.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
erikwoods erikwoods, 3 years ago

We do it inline for Gmail.
It seems now, however, that we may also have to do it in an embedded stylesheet for Outlook.com, because they have

* { line-height: 140%; }

or whatever. This is nothing new, actually. I think Hotmail had this as well. But the problem now is that unless you have one line-height for everything, you've got to give class names to all sizes which are different and define those in the embedded stylesheet - just to take care of that problem. Or you have to do it inline on EVERY tag.

Am I wrong?

Please keep in mind that I do not use Campaign Monitor's tools which automatically move embedded styles to inline styles. I cannot rely on it for the work I do.

Thanks for your help.

roshodgekiss roshodgekiss, 3 years ago

But the problem now is that unless you have one line-height for everything, you've got to give class names to all sizes which are different and define those in the embedded stylesheet - just to take care of that problem. Or you have to do it inline on EVERY tag.

Hi eric, you're right - personally I'd stick to using classes & inlining your CSS for greater control/more manageable code. Instead of applying an inline style to every <p>, <br> etc, you'd be better off with the following:

.article p { line-height: xpx; }
.article h3 { line-height: ypx; }
...

<td class="article">
   <h3>Here's a title</h3>
   <p>Lorem ipsum article text</p>
</td>

Using * { ... } or inlining everything upfront is just going to slow you down along the way. Whereas it only takes a moment to use Premailer at the end, or whichever service you're using :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
erikwoods erikwoods, 3 years ago

Unfortunately I can't use something like Premailer due to reasons I won't get into, so I'm stuck doing things inline. You bring up a good point though.

For Outlook.com, I could probably still do an embedded stylesheet for everything inside of the different sizes of content, since I only really need inline CSS for Gmail.

Since we tend to have multiple font sizes and line-heights in our emails, I'll likely end up doing something along these lines:

<style>
    * {
        line-height: 16px;
    }

    .header * {
        line-height: 12px;
    }

    .footer * {
        line-height: 14px;
    }
</style>

<table>
<td class="header">
    <font style="line-height: 12px;">
        Header copy.
    </font>
</td>
<td>
    <font style="line-height: 16px;>
        Everything else.
    </font>
</td>
<td class="footer">
    <font style="line-height: 14px;">
        Footer copy.
    </font>
</td>

It is largely untested but should work in theory, right?

I will do this test and let you know what I find. Thanks for your feedback and suggestions. Always appreciated.

roshodgekiss roshodgekiss, 3 years ago

Hi erikwoods, we're on your side - let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
erikwoods erikwoods, 3 years ago

This seemed to do the trick! At least, it seems to be fine for all of the email clients I need to support at the time of this writing.

<style type="text/css" media="all">
    .masthead * { line-height: 26px; }
</style>


<table class="masthead" bgcolor="#00365b" border="0" cellpadding="0" cellspacing="0" width="560">
    <tr>
        <td width="24"></td>
        <td valign="middle" width="212">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td height="10" width="100%"></td>
                </tr>
                <tr>
                    <td width="100%">
                        <font color="#ffffff" face="Arial, Verdana, sans-serif" style="color: #ffffff; font-family: Arial, Verdana, sans-serif; font-size: 24px; line-height: 26px;">
                            <b>Lorum adoloru un consequet loro dolum nsequet dolum.</b>
                        </font>
                    </td>
                </tr>
                <tr>
                    <td height="16" width="100%"></td>
                </tr>
                <tr>
                    <td width="100%">
                        <a href="http://example.com"><img alt="Lorem Ipsum Dolor Sit" border="0" height="30" src="images/cta_primary.gif" style="display: block;" width="212" /></a>
                    </td>
                </tr>
                <tr>
                    <td height="10" width="100%"></td>
                </tr>
            </table>
        </td>
        <td width="24"></td>
        <td valign="top" width="300"><a href="http://example.com"><img alt="Right image." border="0" height="258" src="images/masthead.jpg" style="display: block;" width="300" /></a></td>
    </tr>
</table>

I would be interested to know if CM or anyone else can find any problems with this solution to line-heights (or anything else weird or tedious with my code they may find).

roshodgekiss roshodgekiss, 3 years ago

Brilliant, erikwoods - if we do make a breakthrough in this regard, we'll be sure to let you know. Have a great week!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098