Responsive order confirmation emails for mobile devices?

by

How about something like this? This uses a fluid/liquid technique that works on all major clients, including those that do not support media queries (Gmail etc…):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    table td {border-collapse: collapse;}
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#CCCCCC" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center">


<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td align="left" valign="middle" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 24px; color: #353535; padding:3%; padding-top:40px; padding-bottom:40px;">
      Invoice
    </td>
  </tr>
  <tr>
    <td align="center">
      <table width="94%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="70%" align="left" bgcolor="#252525" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #EEEEEE; padding:10px; padding-right:0;">
            Item
          </td>
          <td width="30%" align="right" bgcolor="#252525" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #EEEEEE; padding:10px; padding-left:0;">
            Price
          </td>
        </tr>
        <tr>
          <td width="70%" align="left" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
            Nike Shoes
          </td>
          <td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            $100
          </td>
        </tr>
        <tr>
          <td width="70%" align="left" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
            Spy Sunglasses
          </td>
          <td width="30%" align="right" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            $120
          </td>
        </tr>
        <tr>
          <td width="70%" align="left" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
            Buffalo Jeans
          </td>
          <td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            $80
          </td>
        </tr>
        <tr>
          <td width="70%" align="left" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
            Seiko Watch
          </td>
          <td width="30%" align="right" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            $260
          </td>
        </tr>
        <tr>
          <td width="70%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            <b>TOTAL</b>
          </td>
          <td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
            <b>$560</b>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="left" valign="middle" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 14px; color: #353535; padding:3%; padding-top:40px; padding-bottom:40px;">
      Thanks for shopping with&nbsp;us! <!-- using &nbsp; will prevent orphan words -->
    </td>
  </tr>
</table>


</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table></body></html>

Just be aware that this template doesn’t act fluid when resizing your browser window. It works in all major email clients however.

More Related Contents:

  1. How to design an HTML/CSS signature that will work in Outlook 2016? [duplicate]
  2. My Website is Mirror-flipped on iPhone Devices
  3. How can I “disable” zoom on a mobile web page?
  4. background: fixed no repeat not working on mobile
  5. Make an image responsive – the simplest way [duplicate]
  6. Can you link to a CSS file from an email?
  7. Rounded corners in outlook without images
  8. Auto height on parent container with Absolute/Fixed Children
  9. Can I put a … tag within the body of a HTML file to send in email?
  10. The css padding is not working in outlook
  11. Can Outlook 2010 use a web font in an html email?
  12. Is there an equivalent of CSS max-width that works in HTML emails?
  13. Bold tag breaking the divs?
  14. When to use IMG vs. CSS background-image?
  15. Font Awesome 5 on pseudo elements shows square instead of icon
  16. Center image horizontally within a div
  17. How to change the height of a ?
  18. How can you customize the numbers in an ordered list?
  19. Is it bad to use !important in a CSS property?
  20. How do I make an editable DIV look like a text field?
  21. Style input element to fill remaining width of its container
  22. Wrap text in tag
  23. Using :after to clear floating elements
  24. Bootstrap 3 – How to maximize input width inside navbar
  25. Draw double curved item with beveled edges
  26. Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
  27. Is there any way to add padding to select options via CSS?
  28. CSS Selector for No-Children-But-Not-Empty
  29. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  30. Sizing flex items on the last row

Leave a Comment