Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Responsive Email Template

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #243214
    Santu
    Participant

    Hi,

    I want to create a “Responsive Email” template which support all the device. Also will show in outlook, gmail etc.

    Please help me how can I create it?

    Thanks

    #243218
    rkieru
    Participant

    E-mail applications (software and web) still have notoriously poor support for CSS, and (for security reasons) virtually no support for JavaScript. Services like Gmail strip out the <head> so you would also have to use inline CSS.

    That pretty much precludes the use of media queries, which for me is the final nail in the coffin of a responsive e-mail design.

    Chris covered some of these pitfalls in a post back in 2007 ( https://css-tricks.com/using-css-in-html-emails-the-real-story/ ) and you can read a more recent article on the MailChimp knowledge database ( http://kb.mailchimp.com/campaigns/ways-to-build/css-in-html-email )

    The TLDR of it all… many of us still use <table> for e-mail structure because it’s a better solution than the insane amount of inline CSS you’d have to apply while still hoping E-Mail Service X didn’t strip it all out anyway.

    #243232
    Alex Zaworski
    Participant

    You can actually inline CSS with tools (here’s one by Zurb).

    For responsive emails, inline the styles you’re using for the default view of the email and then add everything else in a <style> tag with a media query.

    You miss out on quite a few clients (gmail, outlook, some others) but it’ll work with iOS/mac mail which I think has a decent user base still.

    Regardless of how you approach it you’re going to have problems, I highly recommend using a service to test what you’re sending in a bunch of clients. I use Email on Acid at work.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design’ is closed to new topics and replies.