I have a basic footer that would be super easy to create in almost any environment but email.
i am looking to do a email/phone/unsubscribe line to appear like
"email#email.com | 1-888-PHONENO (1-888-111-1111) | Unsubscribe"
works perfect in desktop view (600px width) but once i try and do anything responsive it dies and formats all crooked. I've had good luck with flex box with apple products, but many of the microsoft products (email clients) strip the flexbox out. so i am using table but finding it difficult to make it responsive.
I would use media queries but when i use display:none, it doesn't always work. it almost like the sendgrid console wont let me target certain elements. for example i can easily change the html background using html, but when i give classes to elements, nothing happens, id's either. its like the style doesnt get applied.
to solve this issue i'd be totally happy with writing different header/footers and then rendering them per the view (599 down, 600 up) if anyone has experience using media queries in emails or sendgrid please advise.
I could also write a responsive table but having trouble w how to set that up for the above. some of the items would need to be wrapped, like it would be ok to render on 2 lines in mobile as long as the style looked decent. right now it looks jacked.
you cant-
due to email clients rendering code totally different (some strip margins/padding, some strip flexbox, some strip other things from your css)
just stay to best practices: inline style, single column tables work good on almost anything. keep it simple.
I made a nice looking inline css flex box footer. looked great on mac/google products, looked like garbage on all outlook/samsung.
so i had to dumb down my beautiful footer to something that was more compliant across platforms.
litmus is a tool we bought that really helps. you basically just have to design it then test. litmus will show you previews on every possible email client so u can go thru and find a good balance of compatibility and design.
for sendgrid, the built in template and drag and drop option render good on everything. use the v3 api and dynamic templates. use a drag and drop then add html blocks to customize what u need to. use the drag and drop as much as possible because they build a robust html code for you. unless you want to manually type out a 600 line email that is totally disorganized.
Related
I'm finishing up a Mailchimp template and Gmail is the biggest headache now.
In my head I have some styles (css) and media queries. If I put the media-queries at the bottom - it stops most of the styles from getting through. If I put the media queries at the top - all my styles work perfectly but the mail looks "broken down" (like it should under 600px width / Mobile) like the media queries already kicked in.
Firstly I didn't think Gmail should read anything inside of a media-query and secondly why are is my mail shown "responsive" when I have full browser width?
---- on a side note ---- I know I can go through everything and add inline styles but, I have three templates and I'd rather not if I can get away with it :)
I found out through extensive google-ing that I'm not the only one in the world that had this (weird) problem. I quote Lucas Mainardi below that posted an answer to a similar problem for Outlook.com.
Basically, putting an extra style tag with your media queries just before the closing body tag will fix things.
I've tested on my devices (gmail, iphone, thunderbird) and it doesn't seem to do any damage for clients that didn't have problems before. I'm also waiting for my Mailchimp inbox inspections to finish (where I test more clients like Outlook, Android etc). I'll edit my answer if it seems to do any harm, otherwise consider this a solution.
Hello James,
In the comments bellow I posted a possible solution to this issue in Outlook.com.
The problem seems to be the area in which the email is loaded. Apparently, the area starts out in a small size and is resized a few seconds later, but in that time the media queries fire up and display the mobile version. This is because the media queries are read first in the hierarchy of the code (they're at the head section) and the HTML email is read second.
The solution I found is to place the style section which contains the media queries after the HTML e-mail, specifically right above the closing body tag.
I tried this out in Litmus and all seemed to work just fine across the board (no other browsers/mobile devices/e-mail servers seem to be affected negatively, displaying the exact same version of the email with the styles in the head section).
Taken from http://emailwizardry.nightjar.com.au/2013/08/28/media-queries-in-html-email-cover-all-your-bases/
Since 'cellpadding' attribute is not supported in HTML5, what's the best way to apply padding to all cells in a table in HTML e-mail?
I've read that linked style sheets are are bad idea as widely ignored by email clients so at the moment I can only think of adding inline style="padding:5px;" to every element in table but this seems pretty long-winded!
Any ideas?
Even though something isn't supported, emails are a special rule. The bgcolor="" rule for example has been depreciated for a while, yet is still the best way to add a background color in email. In fact, most email clients strip out the doctag all together.
Linked style sheets don't work, even style tags are ignored by web clients.
Here and here and here are some references to get you started in the crazy world of html email design
Hi I am building a small web based email client. I am facing problems in displaying HTML mails. What are the best practices involved in displaying an HTML mail? Some things I found
Css Reset
Strip body tag in the mail
First of all, it's important to not allow all the CSS and HTML tags. I would look for the file and allow a defined set of HTML tags and CSS attributes.
For example, if you reset the CSS, you can still send stuff like <iframe>, <form> and all other possible malicious tags.
So I would start of thinking what kind of HTML tags would you like to support, and strip all other ones out of it. And then the same for the CSS.
This is by no means easy. I mean you also would have to take in account things like people trying to break your interpreter...
You could look into this Sitepoint Blogpost, it describes how people should code HTML-emails. So it might be a good idea to start there and see what's usually supported.
The one sentence answer would be "1. Use table-based layouts, 2. only inline CSS, and 3. test in every email client possible."
The client testing is probably the most important because every email client (and client + browser combination) may have its own quirks and many are just learned along the way; such as using HTML attributes width & height because Outlook won't always follow the inline styles for width & height, or that Gmail tends to add margins around images unless you explicitly set margin:0 for the HTML elements, etc. etc.
When fixing the look of an HTML email in one client ends up breaking it in another client, don't keep adding more and more styling: try to simplify the HTML/CSS, even if it means writing more markup. For example, if padding and margins don't look right, the same look could be achieved by adding more rows or columns to the table and fixing their heights/widths. More tags is simpler than worrying about how all the email clients will render the CSS box model.
There's a lot of articles and blog posts on HTML-for-email such as http://articles.sitepoint.com/article/code-html-email-newsletters that are helpful -- though a lot are out of date with newer versions of clients.
I'm forced to use ConstantContact as a development platform for email marketing, and it offers some custom XHTML tags like <Property> and <Article>, and the documentation over at http://constantcontact.custhelp.com/cgi-bin/constantcontact.cfg/php/enduser/std_adp.php?p_faqid=2215 seems to assume that adding such a tag into your custom XHTML template will simply allow the property to be editable in the "control panel" area rather than hidden deep in the HTML code.
My client is not experienced with hunting through code to find the area that needs to be edited, so I'd like to make it easy on them and allow the text to be editable in a textarea right from the control panel. This is possible with the "Greeting" property. Can I create custom properties in ConstantContact much like the default <Greeting />, which can be edited right from the wizard?
Since I didn't see a rated answer, I figured I'd add one.
Just to clarify, Constant Contact is a crap service that skates by on name recognition and clients too ignorant to know there are better options. (No offense to your client...)
Now, to answer your question, there is no way currently (4.13.13) for you (or any developer outside of the Constant Contact fortress) to create a custom template that can be used within their WYSIWYG editor.
The only way to have a truly custom design converted into an editable template is to send Constant Contact your art files and pay them $600 to create it for you.
http://www.constantcontact.com/services/email-marketing/index.jsp#template-creation
So I feel your pain, as I've been in this exact situation.
I want to add to this as I just faced a similar problem. After spending 6 hours building an HTML and testing it via MailChimp - I prefer it 100% - I had to then port it across to Constant Contact (CC). They have an advanced editor but as the persons above mentioned, you cannot add editable areas - it looks like you need to use XHTML for that...?
However that all said, my work around was to take a template they provide that looks as close as possible to my design and then manipulate it as you get to edit the HTML for those areas. I have to say, I was able to get my email to almost 100% the same - not being able to edit the disclaimer stuff at the bottom was a pain.
The only reason I couldn't get them to move to MailChimp - a 100% superior bit of kit - was because their CRM system is tied up with CC.
Has anyone had experience with MySource Matrix as a content management system? If so, thoughts/opinions/comments?
Thanks in advance.
Absolutely excellent. It takes little while to get used to how it does things with its asset structure, but it is really flexible and powerful. Simple edit interfaces are great too.
Make sure you give it enough hardware. If you want dynamic content without caching you need heaps of grunt to make it hum.
Hands down the best CMS I have ever used. We use it on the Pacific Union College website, as well as many side projects. I am still amazed at all it has to offer compared to other products that are not free.
Give it a good look, and take some time to get past the learning curve, but once you do, it will be more than worth it. :)
I've recently been trying to use it in an organization where many non power users are generating content. - it has many interface bugs and odd behavior, so that many simple tasks (i.e. loading images) often have to be done by an power user (i.e. me).
When you are editing the HTML of page content white space is not preserved. If you where to format the HTML in the WYSIWYG editor, save you changes, and then come back the whitespace you've added will be removed - actually when you switch the WYSIWYG editor into HTML mode it doesn't show you the exact HTML, and does some silly things - like pressing enter inserts non breaking spaces - but doesn't show them until you save and re-enter HTML mode.
it is a number of little details like this which make it generally frustrating to use and disliked by everyone here.