How can any message sent to a Gmail account be built responsively in Luminate Online?

Coralie Meade Rodriguez

I wondered if anyone has any thoughts on how email messages in Luminate Online can be coded to use the new responsiveness that Gmail released.  From my understanding of the newest releases, the embedded styles need to be placed between the < head > tags on the page and not in the body.  Has anyone found a way to do this in Luminate?  Are there any workarounds that can be used?


Does anyone know if there are any plans to open up this section of a message in a future product release?

Jeremy Reynolds

Coralie Rodriguez:

I wondered if anyone has any thoughts on how email messages in Luminate Online can be coded to use the new responsiveness that Gmail released.  From my understanding of the newest releases, the embedded styles need to be placed between the < head > tags on the page and not in the body.  Has anyone found a way to do this in Luminate?  Are there any workarounds that can be used?


Does anyone know if there are any plans to open up this section of a message in a future product release?

You can go ahead and put the raw styles into the CSS page of the stationary. That'll insert them just after the head tag. It's not ideal, but it works generally from what I've seen.


The other thing you should do is inline your code. For an explanation of that (and a couple of links to tools that can uglify your code), check out Litmus' blog post on the topic.


If you've got a developer around, it's worth taking a look at ZURB's Foundation for Emails. It's easily the most exciting thing I've seen in years for emails, but definitely not for the faint of heart.

Grace Rose Khalsa

Jeremy Reynolds:

Coralie Rodriguez:

I wondered if anyone has any thoughts on how email messages in Luminate Online can be coded to use the new responsiveness that Gmail released.  From my understanding of the newest releases, the embedded styles need to be placed between the < head > tags on the page and not in the body.  Has anyone found a way to do this in Luminate?  Are there any workarounds that can be used?


Does anyone know if there are any plans to open up this section of a message in a future product release?

You can go ahead and put the raw styles into the CSS page of the stationary. That'll insert them just after the head tag. It's not ideal, but it works generally from what I've seen.


The other thing you should do is inline your code. For an explanation of that (and a couple of links to tools that can uglify your code), check out Litmus' blog post on the topic.


If you've got a developer around, it's worth taking a look at ZURB's Foundation for Emails. It's easily the most exciting thing I've seen in years for emails, but definitely not for the faint of heart.

 

I have been searching the forums for current or at least recent posts on building mobile-friendly/responsive emails in Luminate, and this seems to be the most recent there is. I have tried the suggestion Jeremy makes here, to put code into the stationery's CSS, but no matter what I do, the code doesn't seem to be called in, at all. That is, when I look at a test email on my phone, for instance, it simply looks and behaves the same as it does in my desktop browser.


All this to ask, does anyone have CSS code they're currently using in an email stationery that DOES work, that they'd be willing to share?


Thanks!

Gurukarm


Edited to add: PS - I'm not talking about specifically Gmail responsive; I need to be able to make this stationery overall-responsive, not client-dependent, if at all possible.

Erik Leaver

Gurukarm Khalsa:

Jeremy Reynolds:

Coralie Rodriguez:

I wondered if anyone has any thoughts on how email messages in Luminate Online can be coded to use the new responsiveness that Gmail released.  From my understanding of the newest releases, the embedded styles need to be placed between the < head > tags on the page and not in the body.  Has anyone found a way to do this in Luminate?  Are there any workarounds that can be used?


Does anyone know if there are any plans to open up this section of a message in a future product release?

You can go ahead and put the raw styles into the CSS page of the stationary. That'll insert them just after the head tag. It's not ideal, but it works generally from what I've seen.


The other thing you should do is inline your code. For an explanation of that (and a couple of links to tools that can uglify your code), check out Litmus' blog post on the topic.


If you've got a developer around, it's worth taking a look at ZURB's Foundation for Emails. It's easily the most exciting thing I've seen in years for emails, but definitely not for the faint of heart.

 

I have been searching the forums for current or at least recent posts on building mobile-friendly/responsive emails in Luminate, and this seems to be the most recent there is. I have tried the suggestion Jeremy makes here, to put code into the stationery's CSS, but no matter what I do, the code doesn't seem to be called in, at all. That is, when I look at a test email on my phone, for instance, it simply looks and behaves the same as it does in my desktop browser.


All this to ask, does anyone have CSS code they're currently using in an email stationery that DOES work, that they'd be willing to share?


Thanks!

Gurukarm


Edited to add: PS - I'm not talking about specifically Gmail responsive; I need to be able to make this stationery overall-responsive, not client-dependent, if at all possible.

 

Hi, 

Here's a link to a gist that contains the code for a responsive advocacy/donation email that I used in LO: https://gist.github.com/erikleaver/6269805


Note, this instance of Luminate has been shut down so the images won't display. And this example has the stationary and the body included together. But you could easily separate the two parts.


Best,

Erik