Responsive HTML Email Layouts

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/

Advertisements
Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s