Email template responsive for desktop | Community
Skip to main content
J
jzolinski
New Participant
August 11, 2023
Solved

Email template responsive for desktop

  • August 11, 2023
  • 5 replies
  • 6064 views

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

Best answer by Jo_Pitts1

@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

 

 

5 replies

S
SandeepKu4
New Participant
August 17, 2023

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.

J
Jasbirka
New Participant
August 16, 2023

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

 

J
Jasbirka
New Participant
August 17, 2023

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
Jo_Pitts1
Community Manager
August 17, 2023

@crystal_pacheco and @jasbirka ,

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

 

 

    Crystal_Pacheco
    Crystal_Pacheco
    New Participant
    August 14, 2023

    @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!

      Jo_Pitts1
      Jo_Pitts1Accepted solution
      Community Manager
      August 14, 2023

      @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

       

       

        SanfordWhiteman
        SanfordWhiteman
        New Participant
        August 11, 2023

        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.

          Terms & ConditionsAccessibility statement

          Loading footer...