Editing the Blank Stationery for the new email builder?

Daryl Bunker · January 2023

I've been playing around with the new email builder and one of the big flaws I'm finding is that it doesn't handle multiple images in the same row/column very well. I have an email set up that looks pretty good, but in the footer I'm trying to add social icons and this is where the new tool seems to be struggling, so I thought I would skip adding the footer into the email builder and instead add it to the stationery code. I created a duplicate of the “Blank responsive” stationery that is recommended, but when I try to add anything to the html it seems to break the template. Columns that were responsive are no longer resizing or stacking.

It seems odd because there's very little html in the stationery to begin, and I'm adding a new table below the content. I even tried a very simple table with a row and column with a text link, and that alone will stop the template from being responsive. It looks and works fine on desktop (in gmail), but on mobile I'm seeing problems.

Is there a trick to adding onto this particular stationery? I watched the webinar about the new tool and I believe they mentioned that you could copy the stationery and make changes to it. Just wondering if anyone else has run into this or found a solution? Thanks!

Elizabeth Favre · February 2023

@Daryl Bunker
Good morning! I am sorry to hear this is causing trouble. I'd love to address this in the help docs in case it is also causing trouble for other people.

I'm curious about what the root cause could be. When you are adding the table to the html, are you using a standard <table><th><tr><td> format? Or are you using a table with special formatting such as described here.
Thanks so much for your valuable input!

Daryl Bunker · February 2023

Hi @Elizabeth Favre

I've tried using the standard table setup and I've tried wrapping everything in a div (including the overflow as mentioned in that link) and neither have worked. I even tried adding a single div with a simple text link and I run into the same problem, it's stops the rest of the content from being responsive.

Update: I thought I would start fresh to rule out any issues I might have caused to the stationery. I have an email that looks good/is responsive using the “Blank responsive” provided stationery. I copied that stationery, published the copy, made a copy of my email message and changed the stationery to the copy I just made/published. No changes have been made to the email or stationery copies. When I send a test message, it is NOT responsive.

Elizabeth Favre · February 2023

@Daryl Bunker
I feel like we should have a nice little badge for you for all your sleuthing ?
Would you mind sending the email to me at elizabeth.favre@blackbaud.com?
I asked one of our rock star devs about this and was told:

In particular, we use a .layoutRowTable class for each table row and a .columnCell class to cells within each row, and we have responsive styles set up for those to make them stack properly. That might be some of the key information he needs to set up his table to make it more responsive.

Thank you so much for your time and patience!

Daryl Bunker · February 2023

@Elizabeth Favre
Elizabeth, I just sent you the test message, the subject line starts out “2023 eNewsletter …”.

This email is using a brand-new, exact copy of the “Blank responsive” stationery. The CSS/HTML has not been changed at all. When I look at it on mobile (gmail) it is not responsive. But if I change the stationery to the LO provided “Blank responsive”, and do another test, it's fully responsive.

Elizabeth Favre · February 2023

@Daryl Bunker
Good morning! I did not receive the email, but that is probably due to a safety filter on my email. I will play a little here on my end and see if I can replicate what you are describing. Thanks!

Daryl Bunker · February 2023

@Elizabeth Favre

Hi Elizabeth, thanks for continuing to look into this. Were you able to replicate the issue on your end? I tried in another instance of LO and got the same results. I built a really simple email with only a few rows, one of which was a two-column. Again, using the Blank responsive stationery works fine, but making an exact copy of the stationery and using it stops it from being responsive.

Elizabeth Favre · February 2023

@Daryl Bunker
I apologize. I got distracted with some other items and this fell off my radar. I'm going to work on this right now and get right back to you. Sorry!

Daryl Bunker · February 2023

@Elizabeth Favre

No problem, completely understandable. Let me know what you find out, thanks!

Elizabeth Favre · February 2023

@Daryl Bunker
Good morning. I'm really sorry but I was not able to replicate the problem on my end. I have a slightly different test environment though. I recommend you open a support ticket and see if the support people can help you out. We have some really awesome support staff.
Good luck and thank you so much for patience and for bringing this to our attention!

Gwendolyn Chambers · March 2023

@Daryl Bunker

Hi Daryl, I would be interested to hear if you got a resolution from support on this. I'm eager to use the new email builder but the limitations still seem too great and I also need to build a footer that has icons and/or buttons.

Stephanie Hennessy · March 2023

@Daryl Bunker - I haven't gotten around to testing any of this, but throwing it out there in case you are still actively working on this. I'm wondering if your copied Blank Stationery is getting these CSS files injected, where potentially the default Blank Stationery does not get them injected, and that's what breaks the responsiveness? See KB article for reference:

Editing the Blank Stationery for the new email builder?

Comments

Categories