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

Welcome to the CSS Web Design Blog!

This blog will be dedicated primarily to CSS and (X)HTML coding tips and issues as well as things like Photoshop tips and more general design related topics and tutorials. It will include coverage of browser bugs, quirks and work arounds. I will try to cover a range of topics within these areas, striving to include lesser known information instead of just re-hashing already wide spread topics.

About Me:

I originally started doing web design and coding while living in Japan. (I planned and taught an HTML class for the Tokyo PC Users Group.) I am self-taught in CSS/(X)HTML coding and web design although I have a B.A. in Fine and Applied Arts from the University of Oregon. I’ve been coding tableless CSS layouts since 2001.

The intended audience for this blog is web designers and developers or anyone interested in learning more about CSS, HTML and web design.