Search code examples
htmlcssresponsive-designhtml-tablehtml-email

Responsive Html Email Template

I am coding html email that should be good enough to render perfectly in all mobiles. I am expert in coding emails for desktop etc. and this email renders perfectly in all email clients and browsers, but I have to make it perfect for mobiles. My code structure is as follows: 

<table>
<tr>
 <td width="200"> <table>complete left table </table></td>
 <td width="200"> <table>complete middle table </table></td>
 <td width="200"> <table>complete right table </table></td>

</tr>
 </table>

To make it good for mobiles I know I will need media queries but don't know to use it, can someone refer me related tutorial that may help me to do my specific case. Please see attached image, left is for desktops, right is for Mobiles:

enter image description here

Solution

  • Update: This answer has a big list of email resources including responsive design links

    Here are some resources on responsive design:

    And here is a good template to get you started: