My @media only code isn't working for a responsive email template

Question

0.00/5 (No votes)

See more:

My goal is to have different font sizes in email messages opened with desktops and phones. I'm testing my code using colors rather than font sizes because they are easier to distinguish. The color should be red on desktops and tablets and green on phones.

Here are the devices and applications where my code works, and the text is green:
1. The native mail app on the iPhone 6S 9.2
2. The native mail app on an LG Leon (Android)

Here are the devices and applications where my code does not work, and the text is either red (the same as on a desktop) or black:
1. The gmail app on the iPhone 6 9.1
2. The gmail app app on the ZTE Axon with Android 5
3. The gmail app on the Samsung Galaxy S6 with Android 4
3. The native app on the Nokia Lumia 929 8.1 Windows phone

I'm having other problems during testing that are leading me to believe that some email providers (like gmail) are ignoring anything between style; tags, but that's the way everyone is doing this according to the very many examples of code I have.

Here is the code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title> 
  
</head>
 
<body>
<style>
         td { font-family:verdana; font-size:16px; color:#e51b24; } 
         @media only screen and (min-device-width: 320px) and (max-device-width: 541px) {
        td { color: #0ade27 !important; }
        }
  </style>
  
  <table class="content" align="left" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 540px;">
          <tr>
            <td style="text-align:justify;">[VERSION 15. Mobile features: Green font #0ae27. Desktop features specified in style section: font-family:verdana; font-size:16px; color:#e51b24;. Desktop features specified inline in td: text-align:justify;. Line-height is unspecified. Alignment is left. Content class is empty. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est.]
            </td>
          </tr>
        </table> 
  </body>
</html>

Posted 8-Jan-16 4:53am

afmarcom

Updated 8-Jan-16 6:25am

v3

Add a Solution

Comments

Maciej Los 8-Jan-16 11:09am

This is not well formed question. "Not working" is not descriptive at all...
This just in: Gmail DOES support embedded styles![^]
css - Styling HTML email for Gmail - Stack Overflow[^]

afmarcom 8-Jan-16 12:27pm

I don't know a better to way to word my subject line, but I have added some clarifying language to the body of my question. Thanks for the links; I hadn't seen the EmailOnAcid one.

Sergey Alexandrovich Kryukov 8-Jan-16 11:22am

Can you use JavaScript in your mail application? Then you could read the client side of the browser window. It's not as good as CSS, but if this is what your want...
—SA

afmarcom 8-Jan-16 12:20pm

From everything I've been reading, JavaScript is generally not supported by email clients. To reach the widest audience with the best possible look (like properly-sized fonts and graphics) you have to use very old-fashioned code, mainly HTML.

Sergey Alexandrovich Kryukov 8-Jan-16 12:25pm

I asked because your code sample looks nothing but HTML. I don't say it should support JavaScript in your environment, just checking. But you know, when you are working with some unusual HTML processor, not a known Web browser, you don't know what is it compliant to. :-(
—SA

afmarcom 8-Jan-16 12:30pm

If I understand you correctly, I agree: Each email client AND each email provider AND each operating system can affect the way email messages are displayed. It's very frustrating. I can make templates that look great on a desktop, AND I can make templates that look great on a phone, but there is no way to know which device a reader will use to open the message! Most people use both.

Sergey Alexandrovich Kryukov 8-Jan-16 12:38pm

Strictly speaking, the OS and other environment detail should not affect the rendering of mail messages much. This is all just a mess. With HTML, the standards and browser compliance tend to show the signs of going out of the historical mess, but this work is way too far from completion. With e-mail, this is tens and tens of different standards, and nothing went according to a certain plan, and I see no signs of putting it all in any order. In practice, it's still possible to interpret what's in a mail correctly, of the content is at least somewhat compliant to the standard. As to the detail such as font size...
—SA

Richard Deeming 8-Jan-16 11:24am

You might want to take a look at Zurb Foundation for Emails[^], which claims to support any email client, including Outlook.

afmarcom 8-Jan-16 12:15pm

I have downloaded and tried many boilerplates. I didn't know Zurb had one, which is funny because I've been reading tutorials by Zurb. I will try their boilerplates, but I'd still like to know what is going on (or NOT going on!) above.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Yuriy Loginov · Answer 1 · 2016-01-08T11:45:00

Solution 1

Each email client has it's own quirks, even though your HTML may be perfectly valid in a browser an email client may simply ignore it or do something funky with it. I found the best way to test email layouts was using this site: Email Testing and Email Marketing Analytics - Litmus[^]

Posted 8-Jan-16 11:45am

Yuriy Loginov