Email Template Help - Mobile Image in Head

Highlighted
Level 1

Email Template Help - Mobile Image in Head

Hi!

I got an email template from our dev team and am trying to convert it to 2.0. I'm not sure how to handle this particular variable. There's a mobile version of the background image in the head while the desktop background image is in the body. Any ideas on how to go about doing this?

 

<head>
<style>
@media only screen and (max-width: 599px) {
.story1_mobile_background {background-image:url(/images/story1_mobile.jpg) !important; }
		}
</style> 
</head>
<body>
<!-- Hero Module Without CTA --> 
<table class="container_module" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin:0; vertical-align:top;"> 
                      <tbody> 
                        <tr> 
                          <td class="story1_mobile_background" align="center" valign="top" width="100%" background="/images/story1_desktop.jpg" style=" background-image:url(/images/story1_desktop.jpg); background-repeat:no-repeat; background-size:cover; background-position: center center; margin: 0;"> 
                            <div style="visibility:hidden; display:none; color:transparent; height: 1px;"> 
                              <img src="images/spacer.gif" alt="" height="1"> 
                            </div> 
                            <!--[if gte mso 9]>
									<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:171px;">
									<v:fill type="frame" src="/images/story1_desktop.jpg" />
									<v:textbox inset="10,10,10,10" v-text-anchor="top">
									<![endif]--> 
                            <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top;"> 
                              <tbody> 
                                <tr> 
                                  <td class="padding_top_60 padding_right_100 padding_bottom_60 padding_left_23 text_26" width="100%" valign="top" align="left" style="color:#ffffff; vertical-align:top; padding: 30px 290px 30px 40px; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:35px; line-height: 37px; -webkit-text-size-adjust:none;"><span class="text_26" style="margin:0; font-family:Arial, Helvetica, sans-serif; 
font-size:35px; line-height: 37px; color:#ffffff;"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></span></td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--[if gte mso 9]></v:textbox></v:rect><![endif]--> </td> 
                        </tr> 
                      </tbody> 
                    </table> 
<!-- End of Hero Module Without CTA --> 
 </body>

 

 

7 REPLIES 7
Highlighted

Re: Email Template Help - Mobile Image in Head

Well, the images have different values so they can't be a single variable in this case.

Highlighted
Level 6

Re: Email Template Help - Mobile Image in Head

The paths are different here, but maybe it'd be possible to adhere to a strict naming convention and use something like a token or string variable to change the image path for both of the images using a single variable.

 

For example, 

story1_desktop.jpg and story1_mobile.jpg

could be written with variables as:

${Img-URL}_desktop.jpg and ${Img-URL}_mobile.jpg
and the value of the string variable would be "story1".

As a string variable it might look like:

<meta class="mktoString" id="IMG-URL" mktoname="Image URL"  default="story1" mktoModuleScope="true"/>

and in your code it'd look something like:

<head>
<style>
@media only screen and (max-width: 599px) {
.story1_mobile_background {background-image:url(/images/${IMG-URL}_mobile.jpg) !important; }
		}
</style> 
</head>
<body>
<!-- Hero Module Without CTA --> 
<table class="container_module" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin:0; vertical-align:top;"> 
                      <tbody> 
                        <tr> 
                          <td class="story1_mobile_background" align="center" valign="top" width="100%" background="/images/${IMG-URL}_desktop.jpg" style=" background-image:url(/images/${IMG-URL}_desktop.jpg); background-repeat:no-repeat; background-size:cover; background-position: center center; margin: 0;"> 
                            <div style="visibility:hidden; display:none; color:transparent; height: 1px;"> 
                              <img src="images/spacer.gif" alt="" height="1"> 
                            </div> 
                            <!--[if gte mso 9]>
									<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:171px;">
									<v:fill type="frame" src="/images/${IMG-URL}_desktop.jpg" />
									<v:textbox inset="10,10,10,10" v-text-anchor="top">
									<![endif]--> 
                            <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top;"> 
                              <tbody> 
                                <tr> 
                                  <td class="padding_top_60 padding_right_100 padding_bottom_60 padding_left_23 text_26" width="100%" valign="top" align="left" style="color:#ffffff; vertical-align:top; padding: 30px 290px 30px 40px; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:35px; line-height: 37px; -webkit-text-size-adjust:none;"><span class="text_26" style="margin:0; font-family:Arial, Helvetica, sans-serif; 
font-size:35px; line-height: 37px; color:#ffffff;"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></span></td> 
                                </tr> 
                              </tbody> 
                            </table> 
                            <!--[if gte mso 9]></v:textbox></v:rect><![endif]--> </td> 
                        </tr> 
                      </tbody> 
                    </table> 
<!-- End of Hero Module Without CTA --> 
 </body>

 

 You'd need to make sure the first parts of your image's path were exactly the same and the last parts were always "_mobile.jpg" and "_desktop.jpg". I might even think about changing this to a ".png" instead of ".jpg" if you go this route to allow for the use of transparent images when necessary.

This might also work with tokens, but I've only tested something like this quickly to confirm that the image would render in the preview panel using this method. I didn't send a test email, so you'd want to make sure everything is coming thru as expected, but this might help to accomplish what you're after here. 

 

Let me know how it goes if you do give it a try.

Highlighted

Re: Email Template Help - Mobile Image in Head

Thought about suggesting the naming convention, but it'd be really fragile to keep up. 

Highlighted
Level 1

Re: Email Template Help - Mobile Image in Head

Thank you! This is a plausible solution now, but I just worry how this will work out with a growing team.

Highlighted
Level 6

Re: Email Template Help - Mobile Image in Head

The only reason I can think of that you'd want to use two different versions of an image would be if you were including text as a part of the image, is there another use-case or reason to have it setup this way? I've usually seen this kind of approach to replace an image with baked-in text to something sized for mobile with larger text (so it doesn't scale the fonts down proportionally). 

 

Another way that you could handle this would be to use a background-image with live-text on top of it. This way you'd only need to use one image (in the background) and the text would be independent of the image scaling so you'd end up with readable text but a smaller image behind it. 

If you're after an approach that scales, this works really nicely in a tokenized setup because you can "interact" with the text in Marketo (as compared to a flat image that includes text that you have to edit in something like Photoshop) - you can make it a token, or just edit it manually in the editor.

One of the main differences/trade-offs in using a background image is that the image itself shows up big enough to cover the entire area of the module and then gets clipped on the edges that overlap.  This comes into play if you're using images with a main subject or focal point like a person's face or product snapshot or other scenarios where you wouldn't want the image to get clipped. If you use something more "wallpaper-ish" or patterned in the background it ends up working out a little better, and as a design-choice is easier to scale than subject-oriented imagery in general.

 

Highlighted
Level 1

Re: Email Template Help - Mobile Image in Head

I'm not 100% sure why the dev team did it the way they did. Those images are background images, there's just a desktop version and a mobile version. I think it's probably to have more control over how the image looks in both instances. The text on top is also off to the side, so I'm not sure if that's also a factor. This is also the first time I've seen the background image with 2 different versions, so I've never had to deal with this issue when converting a template to 2.0 before.

Highlighted

Re: Email Template Help - Mobile Image in Head

FWIW – I don’t think it’s a problem, as long as it’s proven to be manageable and everyone is on the same page. There’s only so much you can do with a single image, and since you can’t A/B test mobile vs. desktop with separate emails, this is the closest you’ve got.