Responsive newsletter for Gmail

Creating the newsletter template is the common task for every front-end developer. There are many tools as well as online service that help you make a very stunning snippet of HTML. It will display nicely on almost all device, especially on iOS devices.

I bet that you have heard about responsive newsletter – a type of email that can make use the screen of device and display the content with the most suitable arrangement. Apple products supports this technique quite well: all of the email clients (from native app to web) can understand the style declared in breakpoints – the magic thing that makes the flexibility of web content.

The following table show us what email client support breakpoints (Source: https://www.campaignmonitor.com/dev-resources/guides/mobile/)

Default device email clients

Client Media Query Support
Amazon Kindle Fire Yes
Amazon Kindle Fire HD Yes
Android 2.1 Eclair No
Android 2.2+ Yes
Apple iPhone Yes
Apple iPad Yes
Apple iPod Touch Yes
BlackBerry OS 5 No
BlackBerry OS 6+ Yes
BlackBerry Playbook Yes
Microsoft Windows Mobile 6.1 No
Microsoft Windows Phone 7 No
Microsoft Windows Phone 7.5 Yes
Microsoft Windows Phone 8 No
Microsoft Surface No
Palm Web OS 4.5 Yes
Samsung Galaxy S3+ No

3rd-party email clients

Client Media Query Support
Microsoft Outlook Exchange 3rd party app (Android) No
Gmail mobile app (all platforms) No
Yahoo! Mail mobile app (all platforms) No

WTF? The very famous email service we use every – Gmail doesn’t support it.

I also had to face with this difficulty. In details, my PM assigned me to slice an email and make sure it is responsive on Gmail mobile. It will have 3 columns on desktop but 1 on mobile client. If you tried to create it by any newsletter framework, you will see it isn’t responsive on Gmail mobile. So, how can we go beyond the limit?

At first, I tried but fail. Then she showed me a sample email. I learnt an interesting thing from this. And this is what difficulty I have to find solutions:

  1. Try to break content into rows in mobile device
  2. Try to make it flow full

Answer for 1: Normally, you email is 600 width. If you create 3 col from 3 td tags (200px for each). these tags are wrapped inside a tr tag (100% width+600px max-width). On mobile, the three columns will broken into 3 rows. They looks ugly. This trick will break the col on small devices.

Answer for 2: If you update the inline width of img tag into 100%, you td tends to expand so that it can store fit the img. Even if your newletter doesn’t have img, you can insert an img with content is just a transparent pixel.

->So what do we have now?

-..-

Leave a Reply