Have a client that we made an HTML email for, but there is so much content that GMAIL is cutting the email off and states to view entire email click here. That is fine, but it cuts our tracking image off, which then throws off the open rates. I want to avoid an HTML or CSS compiler. Is it safe to put a tracking image near the top? I mean it works putting it at the top...but what is the best practice? I have done several searches and haven't really found a good solution. Thank you all for your time.
Related
I'm not sure if this is the right place to ask this. But I work for a large design company and the way we receive work is through a request form in Adobe Workfront.
We would like to have a spreadsheet that gets populated with all of the info from the choice they made ie: if they selected a social media graphic for twitter, we would like there to be an output of the correct aspect ratio, whether we use our logo on that graphic, and whether we include text (if yes what would that be?).
Is there a good way of going about doing this? And if I am in the wrong place, where would I be able to get a good answer?
Thanks for the help!
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.
Quick question, is it ok to use standard HTML anchor links within a html emailer? Its to be used as a jump link to content within the e-mail. Wondered if anyone had any experience of this and whether they had come across any issues / pitfalls? It's come from a client request. Only thing I can think of is that the link colour may be over-ridden in some email clients.
Anchor links work to some degree in email clients. Outlook in particular is notorious and had jumps to a different places. iOS and others were fine.
I have a simple tab structure I like for translation access. https://myally.co/l/emailTemplates/followup.php
I send the same html/css as an email and get the following:
the tabs are not overlaid and radio buttons are not styled
the same in gmail and outlook. Hints on how to correct my html/css? Email clients ignore absolute positioning so try this other approach?
You ask a lot of questions and don't post your code as expected in Stack Overflow. This makes it really hard to know what you're doing and give you solutions.
Since you're asking questions and not posting samples, nobody will really help you because that's not the way this SO works.
To answer some of your questions:
Radio buttons do not work in email.
The JavaScript you are most likely using does not work in email.
tabbing does not work with Outlook
Absolute positioning does not work in email
Email development is not Web development. They use the same technologies in different ways.
For more help on what does and does not work, please visit https://www.campaignmonitor.com/css/.
Good luck.
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/