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

[SanfordWhiteman]

It's impossible to say without seeing the actual template.

But even before that I'd go back to the agency. No professional should be closing out a project and leaving you with a scrolling desktop layout.

[Jo_Pitts1 · Accepted solution]

@jzolinski ,

I'm sorry your agency has delivered something unworkable.  I'm with @SanfordWhiteman.  No agency should deliver you a template that isn't working properly. 

Two other points:

1. I've developed many very complex templates, with some insanely gnarly modules.  Never once have I come across a client wanting a template wider than 640px (and usually that is with 20px margins left and right which brings the content area down to 600px).  This is to do with readability.  On most modern monitors at 600px wide, a person can read the email without having to scan their eyes left/right (i.e. the whole email is in the primary field of view).  This increases readability and comprehension of the email (it's one of the reasons printed Newspapers are laid out the way they are).
2. Do you have a clear design brief that was given to the agency and/or a full design covering both desktop and mobile behaviour for each module?  If so, go back to them and tell them to build to the designs (and refuse to pay extra).  To reiterate, even without a clear design - no competent/professional agency should have delivered this to you as an end product.

Cheers

Jo

[Crystal_Pacheco]

@jzolinski a good place to start looking is the image dimensions in the email. That could be one source of the scrolling from left to right but you can't stop there.
If the email is properly coded to be at 1000px wide, it's likely that the tables within the email would also need to be adjusted to a smaller width, including single column, two column and three column layouts.
The width value will need to be calculated to be proportionally smaller throughout the entire email.
Be sure to save a copy before you begin editing the email template code, good luck!

[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.