Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Responsive emails on Gmail app (Android)

I have created a responsive email template which works in all web clients, all versions of outlook, apple mail, thunderbird, iOS, HTC's 'Mail' app and nearly everything else minus Lotus notes.

Is does not work forthe Gmail app on Android. I am pretty sure this is because gmail strips out all the css in header (which contains the media query) so it to show the standard web version but the window is mobile size, so it shows about 300px half the email. Is there anyway to force it to use the media query? Failing that is there a way to change viewport? What would be the best fall back option?

Thanks!

like image 999
user1370288 Avatar asked Nov 28 '12 11:11

user1370288


People also ask

Does Gmail support responsive emails?

All Gmail mobile apps now support responsive email.

Does Gmail app support media queries?

From 30 September 2016, Gmail supports Responsive Email (it can now support media queries). NOTICE: In October 2016, these changes (Gmail supports Media Queries) were still ongoing. For instance, Gmail still didn't support Media Queries in IOS and Android app.

How do I make my email responsive?

Responsive email design best practicesStick to a single column layout. Less shifting and moving makes it easier for your audience to read your content. At minimum, use 13- or 14-pt font for the body text and no smaller than 20-pt for the titles. This will make your email much more readable on a small screen.


1 Answers

There is no workaround using media queries as they can't be inlined. Unfortunately there is no solution for Gmail regarding responsive email (assuming responsive=media queries).

Here are the alternatives:

  1. Fluid layout - A percentage based layout - usually a single column email that is 100%. You can add max-width workarounds to limit its width on desktops. This is 100% supported in all major clients and is the best technique for HTML email in my opinion.
  2. Aligned tables - this is more 'adaptive' than responsive. Works the same as floating divs. HTML's align="left" attribute in a table works more consistently in major email clients, as float has limited support.
  3. Keep to the left - Simply design your email with all the important stuff to the left side. Devices will always show the left most 300 or so pixels, so a split column, text left, image right layout may be appropriate.

You can find several examples of fluid and float/align here.

like image 72
John Avatar answered Sep 21 '22 13:09

John