Email template responsive for desktop

[jzolinski]

An agency created a new Marketo email template for us, but it is too wide and you have to scroll to the left or right to see the whole email. The width is set at 1000 pxl, when we try to change the width to 700 or 600, it shrinks a little, but still need to scroll left or right to see the whole email.

When we test the email template on mobile devices, we do not have to scroll left or right and it seems the email template is responsive for mobile devices but not desktop.

Would anyone be able to provide any information about how to correct the problem of having to scroll and making the email template responsive. Thank you in advance

[Sandeepkumar2]

The best solution is to ask the agency to make it responsive because if you event try to make the email width to 600 or 640, there are chances the internal tables are given with 1000px width or 500+500 for 2 columns, same for the images as well.
Another quick solution is to after giving the container width to 600px, make sure to give all the inner width in % (100% or 50% example), this is not the best solution but it will make it a little better.

[Jasbir_Kaur]

Hi @jzolinski,

While you can create the emails at the width of 900/1000px, however, it's advisable to adhere to the standard recommendations of using a width of 600/640px for better compatibility with various email clients and devices.

If you're experiencing scrolling issues with wider templates, the problem might be related to images or multi-column layouts, and utilizing media queries, you can design a wider template that doesn't require scrolling.

And, simply shrinking the template on mobile devices doesn't guarantee responsiveness. A truly responsive design ensures that all elements, including text, are appropriately resized and repositioned for optimal viewing on different screen sizes. Media queries play a crucial role in achieving this responsive behavior.

To provide more accurate guidance, sharing your email template code would enable us to pinpoint specific issues and offer solutions tailored to your design and layout challenges.

Thanks!

Jasbir

[Jasbir_Kaur]

Hi @jzolinski,

Are you able to solve this issue or do you want us to help you in the code, if yes, please share the code with us?

Thanks!

Jasbir

[Jo_Pitts1]

@Crystal_Pacheco and @Jasbir_Kaur ,

like you both, a big part of me wants to dive into the code (We're geeks - it's in our nature 🙂 ).  However, there is an agency involved.  @jzolinski's company will have paid the agency good money to do this work.  The first step should be to go back to them and get them to resolve the issues.

Only if the relationship between client and agency has been irreparably broken or the agency has given up in despair should us outsiders be getting involved.  If we started fixing things now, the agency would almost certainly be well within their rights to refuse to do any more work on the template, or correct it under any form of contractual obligation.

Cheers

Jo

[jzolinski]

Thank you everyone for your advice. I have gone back to the agency and they said they would be unable to help us without charging us for more support hours, even though they are the ones that created this mess of a template.

It would be great if you could look at the code and tell us what is wrong and how it can be better. What is the best way to share the template and code?

[Jasbir_Kaur]

Hi @jzolinski,

Sure, we will look into the issue, please share the complete HTML of your template and if you have any design for the same that would be great to identify the exact layout.

Thanks!

Jasbir

[jzolinski1]

Thanks everyone, I have attached the code from our template. Any suggestions, thoughts, changes is greatly appreciated.https://na-ab57.marketodesigner.com/email/templatePreview?templateId=1103 

If you are not able to access this, please let me know the best way to share the code.

[SanfordWhiteman]

That won’t work because it’s a secure link to your Marketo instance!

Pasting the code right here in the thread will be overwhelming. How about in a Github Gist?

[jzolinski]

Is this the link from Github that will allow you to view the code?

https://github.com/jzolinski/email_template/blob/main/coding

[Jasbir_Kaur]

Hi @jzolinski,

Do you want to fix this template with the existing width, or you want to reduce the table widths to the standard one as Jo mentioned? Please clarify, after that I can work on your template.

Also, the template is not compatible to iPhone Portrait mode dimensions, we need to fix that as well. 

Thanks!

Jasbir

[jzolinski]

Hi Jasbir,

We are looking to reduce the table widths to the standard as Jo mentioned.

[Jo_Pitts1]

@jzolinski ,

I downloaded this and did the following:

1. Replaced 1000 with 600
2. Replaced 430 with 258
3. Replaced 280 with 168
4. I also found a missing " in width part of the second image of the Header Image module.  So this code needs a " in it.  I'll let you see if you can find it yourself 🙂
   

   <tr class="mktoModule" id="marketoHeaderImageModule" mktoName="Header Image">
                                 <td bgcolor="#FFFFFF">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" role="presentation">
                                       <tr>
                                          <td style="padding: 0px; background-color: #FFFFFF;">
                                             <table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation">
                                                <tr>
                                                   <td class="fluid-img" style="font-size: 0pt; line-height: 0pt; text-align: center;">
                                                      <img src="https://go.onsemi.com/rs/767-FAW-709/images/header-shadow.png" width=600" border="0" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; width: 600px; margin: 0px auto; float: none;" alt="shadow" />
                                                   </td>
                                                </tr>
                                                <tr>
                                                   <td class="fluid-img" style="font-size: 0pt; line-height: 0pt; text-align: center;">
                                                     <img src="https://go.onsemi.com/rs/767-FAW-709/images/header-diagram-${header-image}.png" width=600" border="0" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; width: 600px; margin: 0px auto; float: none;" alt="onsemi" /></td>
                                                </tr>
                                             </table>
                                          </td>
                                       </tr>
                                    </table>
                                 </td>
                              </tr>​

That won't come close to fixing ALL of your problems, but it's a start.

let me know if you can take it from there, or reach out if you need more help

FWIW - I have also created a fork of your code, updated it there, and committed it back.

[jzolinski]

Hi Jo,

Thanks for the suggestions, I made changes you mentioned and now I can view the email in my inbox without having to scroll. And I did find the missing " in the width part of the Header Image module. 

Any other suggestions would be greatly appreciated.

[Jasbir_Kaur]

Hi @jzolinski,

If you can share your latest code, then definitely we can share our suggestions by looking your code.

[jzolinski]

Thanks Jasbir,

Here is the link to the gist with the updated code from your suggestions:

https://gist.github.com/jzolinski/2cd43f9091d9b9714d3eab7400907166

Also, i noticed that when I made the changes, I didn't need to scroll when viewing on my monitors, but when viewing on my laptop, the email was still big and required scrolling. Thoughts?

[Jasbir_Kaur]

Hi @jzolinski,

Update the width in the media query with the below - 

@media only screen and (max-device-width: 660px), only screen and (max-width: 660px)

Sharing a few Suggestions here - 

1. After reduce the width of the section, this module is not looking good - https://prnt.sc/Czksse6MKq20, so you can reduce the left, right padding to make it better like this one - https://prnt.sc/H_XT-iUj3oM_
2. Need to reduce the padding for every module to make the template consistent.
3. In Outlook the border radius is not coming, if you want you can create these CTAs with the hack and border radius will show for the outlook clients as well.

Otherwise, it's looking good.

Let me know if you need any other help.

Thanks!

Jasbir

[Jasbir_Kaur]

Hi @jzolinski,

Do you need any other help in this template, or is this done?

[jzolinski]

Yes it is. First time with Github, is there a better way to share the code to our email template? Any advice and suggestions are much appreciated.

[SanfordWhiteman]

This is good! You’ve given people an accessible source for your template code. It’s not a Gist which is what I was recommending but an actual Git project. But that’s fine.

[jzolinski]

Will this link work?

view-source:https://go.onsemi.com/index.php/email/emailWebview?md_id=2844