Responsive html email on android nexus 5 (4.4.2) native mail app

Question

I've a test layout which uses tables for displaying two columns and media queries which stacks the two columns to one on email clients which support media queries. I am sticking with tables instead of divs as we need to support Outlook as well :(. The layout works great in Android 4.3 and below (the columns stack up) but blows up on Nexus 5 (Android 4.4.2). The two columns still show up next to each other with the second column being completely squished. It seems like 4.4.2 does not support display block at td. Has anyone else experienced this? If yes, is there any work around for this? By the way, it seems like only display block and display:inline-block are not supported on Nexus 5, if I set the tds to display:none in my media query, they are hidden on the screen. Below is a basic html email template which doesn't work:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0;width:device-width">
    <!-- So that mobile webkit will display zoomed in -->
    <title>Email template</title>
    <!-- disable auto telephone linking in iOS -->
    <meta name="format-detection" content="telephone=no">
    <style type="text/css">
        @media screen and (max-width:640px) {
            table[class="container"] {
                width: 100%!important;
            }

            td[class="cell"] {
                background-color: #cc3333;
                width: 100%!important;
                display: block!important;
            }
        }
    </style>
</head>
<body>
    <table width="640" align="center" cellpadding="0" cellspacing="0" class="container">
        <tr>
            <td class="cell">Hello world</td>
            <td class="cell">Hello world</td>
        </tr>
    </table>
</body>
</html>

Edit 1/14 So using tables as block elements works. Since the tables are floated (using align) they wrap in case the width is less than 640px. Now the only issue is, when the two tables wrap, since their width is set to 320px the text doesn't reflow to 100% on devices with native resolution of more than 320px but less than 640px (say iPhone in landscape mode which is 480px) but instead wraps at 320px (leaving around 160px of white space on the right). I know I can change the width using media query but unfortunately it doesn't work on Gmail app (grrh). Any thoughts/suggestions? Simple table structure -

<table align="center" style="width: 640px;max-width:100%"  cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table align="left" style="width:49%;" border="1">
                <tr>
                    <td style="max-width: 100%">long text which should take about 480px
                    </td>
                </tr>
            </table>
            <table style="width:49%;max-width: 100%" align="left">
                <tr>
                    <td style="width:100%;">long text which should take about 480px
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

I did find one way of dealing with it, using tables and applying block on them as suggested here http://stackoverflow.com/questions/17674172/equivalent-to-float-in-outlook. This does seem to work, still open for any other suggestions though. — Sachin, Jan 13 '14 at 07:18
The link above is a floating technique that doesn't require media queries to function. It ideally suits if you have 2 equal sized columns, although you can always tweak them in media queries after the fact. But stand alone, IMHO it is a far superior technique to media queries as it works on Gmail and other clients with no MC support. (I may be biased as the person who wrote it) — John, Jan 13 '14 at 14:19
@John - I concur, given that majority of folks with gmail would use the gmail app rather than the native email app! — Sachin, Jan 14 '14 at 08:09
The problem with the table method is that it fundamentally breaks on outlook, especially as the complexity of the table increases, so isn't an all round solution. :( — niaccurshi, Jan 29 '14 at 14:08
niaccrushi: I agree. Actually, using tables breaks the layout forward/replying responsive mails from/to Outlook. The reason being you control table spacing using mso-table-rspace/lspace styles, which are stripped out by webmails when you are forwarding the message. This causes mostly your tight n-column layout to wrap in Outlook. Outlook adds
after every table which has text, resulting in a horrible cascade effect when it is forwarded from Outlook to a webmail. Perhaps, forwarding/replying back to a newsletter is a fringe case but it's strange that nobody actually cares. — Sachin, Feb 01 '14 at 06:18

score 1 · Accepted Answer · answered Jan 13 '14 at 09:36

1

I think, that it will be better to use only table for your css styles, because td tag is more unpredictable

you can find a good example of 2-columns layout here:
http://www.campaignmonitor.com/guides/mobile/responsive/

answered Jan 13 '14 at 09:36

Slawa Eremin

5,264
18
28

that's what I've been doing now - changing to tables instead of using tds for block elements. The only downside is with two tables being horizontal, I am not able to come up with a strategy where Column 2 content is vertically aligned to bottom wrt first column – Sachin Jan 13 '14 at 09:58
I know this was awhile ago, but I had the same issue recently. I have two tables, one aligned left and one aligned right. In a media query, to get the tables to aligned horizontally below each other, I set float to none and margin to center the tables: `table { float:none !important; margin:0 auto !important; }` – josh1978 Sep 30 '15 at 19:29

score 0 · Answer 2 · answered Oct 13 '15 at 07:44

I might be a little late for the party, but for those that still encounter this problem and need a solid solution while keeping their code clean, here is one:

Use your best practice, just instead of using <td>'s for multi-column layouts, use <th>'s. And put a align="left" and font-weight: normal; on them to overwrite it's standard styles.

<th>'s still behave responsive in 4.4, while <td>'s do not.

I hope this helps.

P.S. And if you also want mobile for gmail app, you might also want to try the responsive mobile-first variant: http://julie.io/writing/responsive-layout-email-ux-munich-newsletter/

score 0 · Answer 3 · answered Feb 01 '17 at 20:30

Please try gmail android app hack and use th instead of td. I use this layout code for email template. This code shows two columns on all email client except iphone. This code shows two block contents on iphone.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0;width:device-width">
    <!-- So that mobile webkit will display zoomed in -->
    <title>Email template</title>
    <!-- disable auto telephone linking in iOS -->
    <meta name="format-detection" content="telephone=no">
    <style type="text/css">
        .gmailfix {display:none;display:none!important;}

        @media only screen and (max-width: 640px) {
            *[class].ablock { 
                display:block !important; 
                text-align:center;
                background-color: #cc3333;
                width: 100%!important;
                display: block!important;
            }
        }

        @media screen and (max-width:480px) {
            .tblock{
                display: block !important;
                text-align: center !important;
                max-width:600% !important;
                width:100% !important;
            }
        }

    </style>
</head>
<body>
<div class="gmailfix" style="white-space:nowrap;line-height:0;">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</div>
    <table align="center" style="width: 640px;max-width:100%"  cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table class="tblock" style="width:100%;">
                <tr>
                    <th class="ablock">long text which should take about 480px
                    </th>                
                    <th class="ablock">long text which should take about 480px
                    </th>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

Responsive html email on android nexus 5 (4.4.2) native mail app

3 Answers3