- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘Design’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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.
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.