Skip to content Skip to sidebar Skip to footer
Home / Css / Email / Html / Mobile

Responsive Order Confirmation Emails For Mobile Devices?

Post a Comment
I've never seen an amazing order confirmation / invoice email. Even the best html5 websites send terrible order confirmation emails (sometimes in plain text). I believe this is bec

Solution 1:

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 HTMLPUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><title></title><styletype="text/css">#outlooka {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, .ExternalClassp, .ExternalClassspan, .ExternalClassfont, .ExternalClasstd, .ExternalClassdiv {line-height: 100%;} /* Hotmail */tabletd {border-collapse: collapse;}
    @mediaonly screen and (min-width: 600px) { .maxW { width:600px!important; } }
  </style></head><bodystyle="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;"leftmargin="0"topmargin="0"marginwidth="0"marginheight="0"bgcolor="#FFFFFF"><tablebgcolor="#CCCCCC"width="100%"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdvalign="top"><!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]--><tablewidth="100%"class="maxW"style="max-width: 600px; margin: auto;"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdvalign="top"align="center"><tablewidth="100%"border="0"cellpadding="0"cellspacing="0"bgcolor="#FFFFFF"><tr><tdalign="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><tdalign="center"><tablewidth="94%"border="0"cellpadding="0"cellspacing="0"><tr><tdwidth="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><tdwidth="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><tdwidth="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><tdwidth="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><tdwidth="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><tdwidth="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><tdwidth="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><tdwidth="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><tdwidth="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><tdwidth="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><tdwidth="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><tdwidth="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><tdalign="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.

Solution 2:

You can use liquid layout so set all width and to be in percentage. I would also look into grid layouts or column layouts.

So far most big sites like eBay Google and so on still use tables to send out their emails. Tables are are still useful and used widely but with the new css3 like flex, column-count, grids .. tables will probably deprecate in the future.

Again the new CSS3 features are still in testing so not compatible on all browsers.

http://www.w3schools.com/css/css3_multiple_columns.asphttp://www.w3schools.com/cssref/css3_pr_box-flex.asp

Post a Comment for "Responsive Order Confirmation Emails For Mobile Devices?"