Responsive emails on Gmail app (Android)

email gmail responsive-design html-email
user1370288 picture user1370288 · Nov 28, 2012 · Viewed 15k times · Source

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!

Answer

John picture John · Nov 28, 2012

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.

Related questions

Send email using the GMail SMTP server from a PHP page

I am trying to send an email via GMail's SMTP server from a PHP page, but I get this error: authentication failure [SMTP: SMTP server does no support authentication (code: 250, response: mx.google.com at your service, [98.117.99.235] SIZE 35651584 8BITMIME STARTTLS …

Read More
Sending email in .NET through Gmail

Instead of relying on my host to send an email, I was thinking of sending the email messages using my Gmail account. The emails are personalized emails to the bands I play on my show. Is it possible to do …

Read More
Sending email through Gmail SMTP server with C#

For some reason neither the accepted answer nor any others work for me for "Sending email in .NET through Gmail". Why would they not work? UPDATE: I have tried all the answers (accepted and otherwise) in the other question, but …

Read More