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, 4 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, 4 years ago

Thank you for the confirmation, Ros.

erikwoods erikwoods, 4 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, 4 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, 4 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, 4 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, 4 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, 4 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, 4 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, 4 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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free