Email template not fitting stationary

Options
Cristy Balcells 2
Cristy Balcells 2 ✭
Sixth Anniversary First Reply
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions
Hi, I recently attended the excellent Blackbaud webinar on responsive design and downloaded the suggested Email Kit https://community.blackbaud.com/blogs/4/7295

I followed the instructions to the letter but the email template is not fitting the stationary. It looks like there is padding in the left column but there's not when I look at table properties. I tried removing any width limitations (which was set to mobile 600 px max) on the stationary and that did not make a difference. Anyone have any ideas? I can't use these great templates if they don't fit the stationary.

Worth noting that the stationary I am using was already created by the Go team, so I am hesitant to start all over given the formatting in the footer that is helpful and autoupdates.

Here's the email message
http://teambarth.barthsyndrome.org/site/MessageViewer?em_id=2462.0&dlv_id=0&pgwrap=n

Not an HTML expert,

Cristy
Tagged:

Comments

  • Philip Nawrocki
    Philip Nawrocki ✭
    Ancient Membership Facilitator 3 Name Dropper Photogenic
    Hey Cristy,


    You are doing great!


    So the issue is that the image 'Give $45 for G4.5' is too big. You need to resize it to 600px wide. Maybe 500px wide because you have the spacing on the sides. Right now it is a 1920x1080 image and it is not responsive. Making the image a smaller size will help with load times of the email as well. You probably need to do this on all your images in this email.


    Here is some code if you want to make the image responsive:


    <img src="your image path here" width="600" height="300" alt="Your Alt Text Here" border="0" style="width: 100%; max-width: 600px; height: auto; background: #ffffff; font-family: Calibri, Arial, Candara, Segoe, 'Segoe UI', sans-serif; font-size: 15px; line-height: 15px; color: #696F72; margin: auto; display:block;">


    Let us know how that works for you,


    Phil

  • Cristy Balcells 2
    Cristy Balcells 2 ✭
    Sixth Anniversary First Reply
    Hi Philip, thank you very much for your reply. That helped but not completely. http://teambarth.barthsyndrome.org/site/MessageViewer?em_id=2463.0&dlv_id=0&pgwrap=n

    I am constraining the proportions/resizing the image in the email to 600 px wide. Are you saying I need to upload the original image as 600 px? I've always used the image uploading tool to resize the image to kind of fit what I needed in the content.

    I copied your responsive code and that did seem to help. Any idea why that wasn't responsive in the template?

    I just want to be able to use these templates and this has taken me hours so I would like to feel like I got to a good place so I can use this template again. Thank you! Sorry if the questions are dumb!
  • Philip Nawrocki
    Philip Nawrocki ✭
    Ancient Membership Facilitator 3 Name Dropper Photogenic
    Try removing this line of CSS:

    background: url('initial') #ffffff;


    That removes that extra white space to the right, but I still believe your image sizes are affecting this. I know Outlook will honor the image size and expand the width of the table.


    Thanks,


    Phil
  • Cristy Balcells 2
    Cristy Balcells 2 ✭
    Sixth Anniversary First Reply
    I did not know that - thank you!
  • Philip Nawrocki
    Philip Nawrocki ✭
    Ancient Membership Facilitator 3 Name Dropper Photogenic
    No problem.


    Let me know how it goes!


    Phil
  • Robin Anderson
    Robin Anderson ✭
    Ancient Membership Facilitator 1 Photogenic
    Hey Cristy!


    Thanks so much for attending the webinar! :)


    These templates are a little easier to work with if you use both the stationery and one of the email messages from the Kit. Since you're using one of the Go Stationery templates, it's going to have a slightly smaller width on the main table. In the Go Templates we used to set the width to 595px. But the stationery in the Responsive Kit sets the main table to 600px. We also handled responsive functionality a little differently, as well back then, so by using the Go stationery and this new email message template together, you may not be getting the full responsive experience.


    So try resizing your image, like Philip suggested and then if you're up for it, try implementing the stationery from the Kit. If that's not an option right now, try copying your Go stationery and see if you can update that main table width in the stationery from 595px to 600px. Then, publish that version and test that.


    I hope that helps! Let us know how it goes and if you'd like some more guidance!

    Robin
  • Cristy Balcells 2
    Cristy Balcells 2 ✭
    Sixth Anniversary First Reply
    Hi, would you have some advice or additional guidance on how to make our enews responsive. Despite trying to resize the images, I cannot use the responsive email templates provided with the stationary that was created for us less than 2 years ago in the GO program, and the enews template created by the GO team is not responsive.

    See example here http://teambarth.barthsyndrome.org/site/MessageViewer;jsessionid=00000000.app20102a?em_id=2501.0&dlv_id=0&pgwrap=n&NONCE_TOKEN=23649A203AD85F61E23C3E803CA76175

    I am working in the WSYWYG with limited knowledge of coding so appreciate suggestions on how we can make this readable on mobile phones without writing all this code. THANK YOU in advance!!

    Cristy

Categories