| Months back when I was trying to make responsive emailer for mobile device it seemed to be easy for Anroid application with help of Media Queries and CSS 3. But comparatively it was quiet tough making responsive email for Gmail App. As Gmail App does not support Media Queries and CSS 3 and also as Gmail App is considered to be one of the most popular mail client it is not advisable to make non responsive email designs for Gmail App. Initially I found it bit difficult to manage multiple column layout in a single table but after some R&D I came to the conclusion that making responsive email for Gmail App is not a Herculean task. We can make it possible by following the following basic steps though not with 100% accuracy but with a minimum of 80% accuracy.
1. No other tables should be fixed under the main table. If we use any fix size table, width should be in percentage only. 2. Lay out is one of the important factor to optimize email in Gmail App. Comparatively multiple column layouts are quite difficult to optimize for Gmail App. Below image can be considered as an example.  For example if 5 different objects are considered in a single image then Gmail App will automatically scale it down for mobile device. But if the same 5 objects are considered with image + text and are kept in a single table in 5 different columns then in this case Gmail App will not consider it and will preview the email without optimizing . To avoid this we can insert 5 different tables align=”left” and width=”20%” ( width can vary as per layout). Once this is done the email will appear on Gmail App one below another as shown in the image.
3. Images play a very important role making a mailer responsive in Gmail App. Different images with different width can be used in different layouts. But scaling in Gmail App has to be done in such a way that width should be less <= 300px
Cited above are 5 different images in a row. If all the 5 images are kept in different column it will not work in GmailApp. To make it optimize either use 6 images as a single image or keep 6 images in a single Then it will come one below another. Feel free to share any further tips you might have tried to make emails responsive for Gmail App.
About the Author: |
|||||||
