Breakpoint Parameters for Email Template?

[acohen222]

Hello! I have cloned the advanced template, and I'm working on editing it to fit my design team's design. My designer is asking if we can set specific parameters at certain breakpoints? For example, change the header graphic at 320px? I've explained that the template is responsive across all devices (working with Litmus to test), but I think she's looking for something a bit more granular.

Thanks for any help you can provide!

[Dave_Roberts]

It sounds like you're already on the right track with using something that's responsive and validated in Litmus. 

While it is possible to use breakpoints in Email code, you'll not get the same range of support you would from browsers so it's not a "sure fire" solution. Here's an article with a chart of the clients that do and don't support media queries: https://litmus.com/community/learning/49-which-mobile-email-clients-support-media-queries 

I've run into this kind of issue quite a few times with different design teams and sometimes the advice you get works better for the designing than it does for the functionality and end-product, this might be one of those times.  One of the "little big things" about an approach like this is that you've got to setup both images (and remember one of them is always hidden) so it's a little harder to get it right consistently unless the same one-or-two people are doing it over and over (this approach gets muddy/fails at scale). 

One other thing to mention here is that it might make sense to start thinking of email (and web stuff) as mobile-first -- which means you design and code for mobile (since it is the least capable across the board) and then adjust for larger devices with things like media queries. This might mean that the images and stuff you get from design needs to be more 'scalable' - but it'll also help to eliminate the need to work twice as hard (make two versions of the same image for example) to accomplish just about the same thing if you started with mobile-first in mind when designing the first image in the first place.

All-in-all, spotty support at best as of today as far as Im aware, so it wouldn't be something I'd want to put into play (it might even be a step backwards for the sake of aesthetics) and wouldn't be something I wanted to manage or QA b/c it adds a hidden layer of complexity to the end-to-end process of getting an email out the door.

[Jo_Pitts1]

Hi there.

Is your designer meaning media queries?  If so, then yes - you can set media queries to change classes at different resolutions.  

In the template you may see code that looks a bit like this

<style type="text/css">
  @media screen and (max-width: 480px) {
  A whole lotta CSS Stuff designed to trigger when a screen is 480px wide or less
  }
</style>
<style type="text/css">
  @media screen and (max-width: 600px) {
  A whole lotta CSS Stuff designed to trigger when a screen is 600px wide or less
  }
</style>

You can set more of these if you need (320px?  That sounds like a digital potato or something)

Cheers

Jo