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:
- Start to build the newsletter without any
styledeclaration in document
head. Use only inline styles.
- Make a container table with cell of max-width:600px.
- Avoid any sizes in container tables and any tables and wider than about 300px inside containers.
- 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.
Outlook will not use
min-width, but if you add
widthdeclaration your table will grow up to 100% in Outlook.
- 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-widthand 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.
- 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.
- When email looks perfect in both gmail clients and Outlook, start adding
styledeclarations 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.
Thanks for the post! Solved the problem I had with Gmail app.