Hi Everyone, I am designing a new set of emails for my web store. They are appearing perfectly on desktops, but when I look on my mobile phone, they look disorented. Let me give an example: <table id="container" style="height:100%; width:100%;" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table id="alert" border="0" cellpadding="10" cellspacing="0" style="width:100%; background-color:#454545;"> <tr> <td align="center"> <p style="margin:0; color:#fff; font-size:13px;">Your Order #{{var order.increment_id}} has been received!</p> </td> </tr> </table> </td> </tr> <tr> <td> <table id="header" border="0" cellpadding="0" cellspacing="0" style="width:100%; background-color:#595959; color:#FFF;"> <tr> <td align="center" style="padding:20px 0 20px 0"> <table width="700" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"> <a href="{{store url=""}}"><img src="{{var logo_url}}" alt="{{var logo_alt}}" border="0"/></a> </td> </tr> </table> </td> </tr> </table> <table id="nav" style="width:100%; background-color:#AA2A35;" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" style="padding:10px 0 10px 0"> <table border="0" cellpadding="0" cellspacing="0" width="700"> <tr> <td align="center" valign="middle"> <a style="color:#FFF; font-size:12px; text-decoration:none; text-transform:uppercase;" href="http://www.chipcave.com/poker-chips.html" target="_blank">Poker Chips</a> </td> <td align="center" valign="middle"> <a style="color:#FFF; font-size:12px; text-decoration:none; text-transform:uppercase;" href="http://www.chipcave.com/poker-chip-cases.html" target="_blank">Poker Chip Cases</a> </td> <td align="center" valign="middle"> <a style="color:#FFF; font-size:12px; text-decoration:none; text-transform:uppercase;" href="http://www.chipcave.com/poker-playing-cards.html" target="_blank">Poker Playing Cards</a> </td> <td align="center" valign="middle"> <a style="color:#FFF; font-size:12px; text-decoration:none; text-transform:uppercase;" href="http://www.chipcave.com/poker-tables.html" target="_blank">Poker Tables</a> </td> <td align="center" valign="middle"> <a style="color:#FFF; font-size:12px; text-decoration:none; text-transform:uppercase;" href="http://www.chipcave.com/poker-accessories.html" target="_blank">Poker Accessories</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> HTML: Both the logo and alert table in this section only span half or a quarter of the email, instead of spanning across the email 100%. Is this something that I am doing wrong, or something that is up with email clients like Gmail? Thanks in advance, Nick
Probably because there're 2 <table>s which still have width="700"... Anyway, does it have to be designed with <table> ?
Yes, it's an email design. I also tried removing the width="700" and still the problem persists. Here is a screenshot:
Every device/email client combination has different support for HTML. You are using a mix of local attributes which are mostly obsolete and the newer mobile devices that support HTML5 may not recognize; some inline styling which has even more incosistent support cross-client and cross-device. For web pages it is easy because you can use a combination of media queries and browser sniffing to generate alternate code, but email clients do not generally support media queries, so you have the daunting task of documenting what each device/email client combination supports and doing custom coding, and of course no matter what you do the user preferences will still screw it up in some cases. If you really think your email has to be that noisy then you could just put a link in the email to a hosted page where there are fewer limitations, or hand the emailing operation over to companies that handle it for a fee and who already have written the variations in code to support most devices.