Changing Hero Image in Desktop and Mobile for Emails 2.0

Anonymous
Not applicable

Changing Hero Image in Desktop and Mobile for Emails 2.0

Hoping someone has done this in a simple way. We modified a Marketo 2.0 template, just swapping styling for the most part, but we are looking to be able to say when in desktop use this Hero-image-1 and when in mobile use this Hero-image-2. Can this be done without too many lines of code?

3 REPLIES 3
Grégoire_Miche2
Level 10

Re: Changing Hero Image in Desktop and Mobile for Emails 2.0

It can be done but it will take some coding indeed. And even though might not work on all devices:

  • Google only introduced support for media queries for the most recent version of gmail mobile client, so the vast majority of them will not get it
  • Outlook in all of it's versions will require some special attention.

-Greg

Casey_Grimes
Level 10

Re: Changing Hero Image in Desktop and Mobile for Emails 2.0

It can be done. I strongly recommend against it for a variety of reasons, because honestly? No one really does it and gets away with it not looking horrible.

Take a look at Really Good Emails - The Best Email Designs in the Universe (that came into my inbox) , for instance--it's a great compilation of, well, really good email design. The key with images is to either design them in a way so things scale correctly no matter the device, use minimal text (if at all) on an image, and when larger parts of copy ARE paired with images, they usually drop to a single color on mobile.

So,  while it can be done, my question would be: what's the practical use of you doing what's one of the more complicated procedures in email?

Anonymous
Not applicable

Re: Changing Hero Image in Desktop and Mobile for Emails 2.0

All valid points. I think in this case, I got lost in the responsive capabilities of the Marketo templates without really thinking, "hey are these even good templates?". Will be using the templates as a base design and will take into great consideration of scaling of images. Thanks all!