SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

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

    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>
    Steve Husting

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Finished

    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>
    Steve Husting

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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...

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Steve Husting

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote 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?

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Steve Husting

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Cool.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •