Gmail iPhone App Responsive Newsletter Coding

Current Gmail desktop web client and iPhone application remove style declarations from the document head, so  you must build a fluid layout to comply to the phone screen size. Otherwise gmail app will use the declared size of newsletter, commonly it is 600px. And all texts will become too small to read.

Remember, the main problem with such layout will remain the old MS Outlook, so check it often. A basic code for such a fluid layout can be found @zurb. And if you really need to have a responsive email design for gmail iPhone app:

1. Start to build the newsletter without any style declaration in document head. Use only inline styles.
2. Make a container table with cell of max-width:600px.
3. Avoid any sizes in container tables and any tables and wider than about 300px inside containers.
4. If a table doesn’t have enough content to fill up the horizontal space (i.e. about 600px width)  it’ll take less space in gmail desktop client. To fix add inline style to such table, in real life it can be less than 100%, to have some padding etc.

   min-width:100%; max-width:100%;

   Outlook will not use min-width, but if you add width declaration your table will grow up to 100% in Outlook.

5. Make images CSS up to 100% width, but also put their width in HTML without height (better compatibility for many clients).

   <img src="images/congrats.jpg" alt="Congrats" width="600"
   style="display:block; max-width:100%; width:100%;
   height:auto !important;" />

   If their width is less than 300px you can use their real width as max-width and make width in percents to resize for smaller devices:

   <img src="images/video.png"
   alt="Video" border="0" width="301"  style="max-width:301px;
   width:70%; height:auto !important;" />

   Images can break your layout on mobiles, so take care.

6. If you notice long URLs or unbreakable email addresses in your content add some .breakWords class and also inline style, like:

   -ms-word-break: break-all; 
   word-break: break-all; 
   word-break: break-word; 
   -webkit-hyphens: auto; 
   -moz-hyphens: auto; 
   hyphens: auto;

   Long unbreakable text will ruin your layout in phone mail client.

7.  When email looks perfect in both gmail clients and Outlook, start adding style declarations into the message code head. Still check all other clients and gmail, especially iPhone gmail application.

This are my main tips for making a gmail compatible newsletter. One max-width declaration in container and no width declarations for other elements should do the job.