Things to be aware of

• No retina images:

  The majority of email clients don’t support CSS for resizing background images.

  (Some email clients also ignore img tag width and height, which makes it unsafe to include retina size images in the html.)

  Reference: www.campaignmonitor.com/resources/will-it-work/guidelines/

• No media query support / responsive styles in Gmail:

  Gmail does not support style tags. = Responsive styles using media query will not work.

  (Inline styles on each HTML element are also required for this reason.)

• Media query / responsive support is spotty in general:

  Even for email clients that do support style tags, not all support media queries.

  BEWARE: The meta viewport tag causes emails to render as blank in Blackberry.

Workarounds

• Make layouts flexible / fluid.
• Design for lowest common denominator first.
• Use media queries only as an enhancement; do not rely upon them.
• Use “inline-block” layout to create a more fluid semi-responsive layout instead of media queries. (Inline block elements will line up if there is room, otherwise they will wrap.)

References

CSS support for email clients:
www.campaignmonitor.com/css/

Media query support:
www.campaignmonitor.com/guides/mobile/