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

Options
Coralie Meade Rodriguez
Coralie Meade Rodriguez
Ancient Membership Loyalty Badge Inquirer Level 1 Praiser Level 1
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions
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?
Tagged:

Comments

  • Jeremy Reynolds
    Jeremy Reynolds
    Ancient Membership 100 Comments 25 Likes Name Dropper

    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
    Grace Rose Khalsa
    Ninth Anniversary 10 Comments 25 Likes Photogenic

    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
    Erik Leaver Blackbaud Employee
    Ancient Membership 250 Likes 100 Comments Photogenic

    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

Categories