Responsive HTML Email Template without using CSS media queries?

Question

I'm looking to design a simple responsive HTML email template without using CSS media queries or flex-box. I would like the middle area of the email to have two columns when on a large screen:

but only have one column with its content centered when on a small screen:

How would you do that without using media queries?

Answer 1

The answer @Gortonington supplied is very good! I'll go into a little more detail and supply some code:

<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
    <tr>
        <td align="center" valign="top" style="font-size:0;">
            <!--[if mso]>
            <table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
            <tr>
            <td align="left" valign="top" width="330">
            <![endif]-->
            <div style="display:inline-block; Margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;">
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                        <td>
                            CONTENT DOES HERE
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if mso]>
            </td>
            <td align="left" valign="top" width="330">
            <![endif]-->
            <div style="display:inline-block; Margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;">
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                        <td>
                            CONTENT DOES HERE
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

This method is called a hybrid approach to reconfigure the layout for different screen sizes for email clients regardless of media query support. At its core, it uses max-width and min-width to impose rigid baselines (allowing some movement) and imposes a fixed, wide width for Outlook who is shackled to desktop anyway. Once a mobile-friendly baseline is set, media queries progressively enhance the email further in clients that support it.

There are a few open source templates that achieve this. I maintain one, whose hybrid template accomplishes what you need.

Answer 2

The best way I have found to accomplish this is to use DIVs inside of a table while using MSO conditionals to control width for desktop Outlook.

Example:

<!--[if (gte mso 9) | (IE) ]><table width="640"><tr><td align="center"><![endif]-->
<table width="100%" align="center">
<tr>
<td align="center">
       <!--[if (gte mso 9) | (IE) ]><table width="100%"><tr><td width="300" align="center"><![endif]-->
    <div style="width:300px; display:inline-block; margin:0 auto; text-align:center;">
    <table align="center" width="100%">
              <tr>
                      <td class="left" align="center">
                        <img border="0" src="yourimage.png" width="280" />
                      </td>
              </tr>
            </table>
            </div>
           <!--[if (gte mso 9) | (IE) ]></td><td width="320" align="right"><![endif]-->
            <div style="max-width:320px; display:inline-block; margin:0 auto;">
            <table align="center" width="100%">
              <tr>
                      <td align="center">Your copy goes here</td>
                      </tr>
                      </table></div>
      <!--[if (gte mso 9) | (IE) ]></td></tr></table><![endif]-->
            </td>
          </tr>
        </table>
      <!--[if (gte mso 9) | (IE) ]></td></tr></table><![endif]-->

The next best way to do it is through TH tags:

<!--[if (gte mso 9) | (IE) ]><table width="640"><tr><td align="center"><![endif]-->
<table width="100%" align="center" style="max-width:640px;">
<tr>
<th align="center" width="300" style="display:inline-block;"><img src="yourimage.png"></th>
<th align="center" width="310" style="display:inline-block;">your copy here</th>
 </tr>
</table>
<!--[if (gte mso 9) | (IE) ]></td></tr></table><![endif]-->

Both of these have issues and will need to be constantly tweaked and manipulated to have them work. But, I have found the TH solution to have many more quirks (e.g. font bolding, random unexplained borders, etc.) and is much less 'customizable' than the div/mso conditional option.

max-width in divs is accepted in most of the clients (ref), except for Outlook desktop, which is handled by the MSO conditionals. If you want even further control, you can also set the divs to a defined width instead of max-width, allowing for an even more controlled environment.

Answer 3

You could accomplish this with the next idea.

You can define a fixed width for each of the columns and a max-width for the parent container, in this case the table itself. The goal is to make the secondary column collapse bellow the first one if not enough space for both.

Check out this example bZWokw on CodePen.

The CSS

.column-1 {float:left; width:200px;}
.column-2 {float:left; width:400px;}
.content { padding:10px; }

The HTML

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td width="100%">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic autem ratione porro perferendis minus itaque ab harum molestiae natus ipsam.</p>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <div class="column-1">
                <div class="content">
                    <img src="http://placehold.it/200x200/" alt="" style="max-width:100%;">
                </div>
            </div>
            <div class="column-2">
                <div class="content">
                    <h2>HAMILTON - The Revolution</h2>
                    <a href="">Review this Product</a>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, esse itaque. Aliquid doloremque tempore, dicta iure consectetur odit vel eveniet minus mollitia reprehenderit incidunt ratione minima aut dignissimos, pariatur in.</p>
        </td>
    </tr>
</table>

Answer 4

You use tables and rely on normal document flow (breif description on that here). There is simply too much to explain here, and while I myself hate link only answers, here you go.

This, IMO, addresses your exact question and is one of the best email template tutorials I have ever read.

"Creating a Future-Proof Responsive Email Without Media Queries"

http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

Edit: Also, this is a great link to verify compatibility of CSS properties in the different email clients:

https://www.campaignmonitor.com/css/

Answer 5

You can get the columns to organize themselves by setting them to display: inline-block. Not sure if all email clients support it, but it should work decently.

jsFiddle

HTML:

<div>Whatever content before</div>

<div class="row">
  <div class="col"><img src="image.jpg" /></div>
  <div class="col">text content</div>
  <div class="col"><img src="image2.jpg" /></div>
</div>

<div>Whatever content after</div>

CSS:

.row {
  text-align: center;
}

.col {
  display: inline-block;
  max-width: 300px;
  text-align: left;
}

Answer 6

You can try: width: 100%; max-width: 400px