How to create responsive html email that works cross email clients

Some notes:

  • Outlook will remove styles inside ‘a’ tag, so I need to use ‘font’ and ‘span’ tag to keep the color
%a{href: @goal_detail_url}
%font{color: ‘#ffffff’}
%span Click here
  • The media-queries should be put in the <head> section because it will not be inlined into DOM elements
  • Should use for better customisation
  • Check style elements that is supported for each email client here