[code check] Why doesn't this simple responsive template work?

**StevenHu** · May 6, 2013 09:15

I borrowed the following responsive design email template for my own use. In a nutshell, two 320px tables are enclosed by a 640px table (because email design uses old-school HTML, and not floating divs). If the email is viewed on mobile, then it (should) read the @media-only styles (which compresses the width of the outer table) and stack the two inner tables. When I narrow the screen in Chrome, the two tables remain side-by-side. Why? What's wrong with the code?

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Newsletter</title>

<style type="text/css">
    @media only screen and (max-device-width: 480px) { 
    /* mobile-specific CSS styles go here */
	/* Attribute selectors are being used to avoid an unusual glitch in Yahoo! Mail. */
        table[class=contenttable] { 
            width: 320px !important;
        }
    }

</style>

</head>

<body>
<!-- template based on http://www.campaignmonitor.com/guides/mobile/responsive/ -->

<table class="contenttable" width="640" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td> <!-- encloses two 320px tables -->

    <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
      <tr>
        <td><p style="text-align:center; font-family:Arial,Verdana,sans serif;font-size:1.3em">
		<span style="color:#9c120c; font-weight:bold;">NEW! </span><span style="color:#054281;font-weight:bold;">
		Product name goes here</span></p>
		</td>
      </tr>
    </table>
	
    <table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
      <tr>
        <td><p style="text-align:center; font-family:Arial,Verdana,sans serif;font-size:1.3em">
		<span style="color:#9c120c; font-weight:bold;">NEW! </span><span style="color:#054281;font-weight:bold;">
		Product name goes here</span></p>
		</td>
      </tr>
    </table>
	
    </td> <!-- END encloses two tables -->
  </tr>
</table>

</body>

</html>

**StevenHu** · May 6, 2013 11:03

This works in the browser:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Newsletter</title>

<style type="text/css">
@media only screen and (max-device-width: 639px) { 
    /* mobile-specific CSS styles go here */
	/* Attribute selectors are being used to avoid an unusual glitch in Yahoo! Mail. */
        table[class=contenttable] { 
            width: 100% !important;
        }
		table[class=innerTable] { 
            width: 100% !important; align: left !important;
        }
		img[class=largeImage] { 
            width: 100% !important;
        }
    }

	
  @media only screen and (min-width: 640px) { 
    /* larger screen styles go here */
        table[class=contenttable] { 
            width: 640px !important;
        }
		table[class=innerTable] { 
            width: 320px !important; 
        }
		img[class=largeImage] { 
            width: 100% !important;
        }
    }
</style>

</head>

<body>
<!-- template based on http://www.campaignmonitor.com/guides/mobile/responsive/ -->
<table class="contenttable" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
      <tr>
        <td bgcolor="#054281"><p style="text-align:center;font-family:Arial,Verdana,sans serif; color:#ffffff; font-weight:bold; letter-spacing:.2em; font-size:1.3em; vertical-align:middle;">
		NEW PRODUCTS
		</p>
</table>

<table class="contenttable" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
    <td> <!-- encloses two 320px tables -->

    <table class="innerTable" border="0" cellspacing="0" cellpadding="20" align="left">
      <tr>
        <td><p style="text-align:center; font-family:Arial,Verdana,sans serif;">
		<span style="color:#9c120c; font-weight:bold;">NEW! </span><span style="color:#054281;font-weight:bold;">
		Product Heading</span></p>
		<img class="largeImage" src="product-image1.jpg" title="Product Heading" alt="Product Heading" style="width:350px; max-width:100%; border:0; display:block;align:center;">
		<p style="font-family:Arial,Verdana,sans serif; font-size:1em;">
		<em>May 2, 2013 - </em>Product copy goes here. Product copy goes here. Product copy goes here. Product copy goes here. Product copy goes here. Product copy goes here. Product copy goes here.
		</p>
		<p>
		<a href="#"><img class="largeImage" align="center" src="click-here" alt="Right-click here to download images." style="width:250px; max-width:100%; "></a></p>
		</td>
      </tr>
    </table>

    <table class="innerTable" border="0" cellspacing="0" cellpadding="20" align="left">
      <tr>
        <td><p style="text-align:center; font-family:Arial,Verdana,sans serif;">
		<span style="color:#9c120c; font-weight:bold;">NEW! </span><span style="color:#054281;font-weight:bold;">
		Product Heading</span></p>
		<img class="largeImage" src="product-image2.jpg" title="Product Heading" alt="Product Heading" style="width:350px; max-width:100%; border:0; display:block;align:center;">
		<p style="font-family:Arial,Verdana,sans serif; font-size:1em;">
		<em>May 2, 2013 - </em>Product copy goes here. Product copy goes here. Product copy goes here. Product copy goes here. Product copy goes here. Product copy goes here. Product copy goes here.
		</p>
		<p>
		<a href="#"><img class="largeImage" align="center" src="click-here.jpg" alt="Right-click here to download images." style="width:250px; max-width:100%;"></a></p>
		</td>
      </tr>
    </table>
	
    </td> <!-- END encloses two tables -->
  </tr>
</table>

</body>

</html>

**Stomme poes** · May 9, 2013 02:13

Hi Steve.

If the email is viewed on mobile, then it (should) read the @media-only styles (which compresses the width of the outer table) and stack the two inner tables.

I'm not sure if mobiles have all gotten so much better than the examples starting on slide 87 of http://www.slideshare.net/bryanriege...e-web-by-yiibu and the page looks simple so I'm surprised you're not going for the mobile-first approach (worried about phones with IE?).

In any case I believe that in your first example code, the td holding the two tables is just doing what table cells do: expanding to enclose its content. Tables for whatever reason don't have much problem with running off the page.

What I don't understand is why, even in a td, two tables (who are blocks but their block display is "table" so different rules than other blocks) weren't considered with an inherent newline between them like other blocks. I can't remember the last time I had several tables all next to each other as siblings so I might be wrong and they might always try to stack alongside each other if they're widths are small enough...

**StevenHu** · May 9, 2013 07:36

I failed to explain that this needs to first work in email clients, and those mobile email clients need to allow the inner tables to stack. Several email clients, like Outlook, do not read @media queries, so the stacking-table idea is used.

**Stomme poes** · May 11, 2013 03:31

Originally Posted by Steven

Several email clients, like Outlook, do not read @media queries, so the stacking-table idea is used.

Correct, so what you have now is no CSS being read at all by those email clients. That's why I wondered why not mobile-first.

Or does your actual page have regular CSS in addition to the @media css?

**StevenHu** · Yesterday 07:29

I have already gone back to stacking tables throughout, so no matter the width of the email client, the content is stacked and sized to fit. Works great in Outlook now, and still sizes nicely in mobile.

User Tag List

Thread: [code check] Why doesn't this simple responsive template work?

Thread Tools

Display

Hybrid View

[code check] Why doesn't this simple responsive template work?

Finished

Bookmarks

Bookmarks

Posting Permissions