I've been banging my head (as expected with email) trying to make a rather complicated responsive email function correctly in every mail client Litmus.com offers for testing.
I've pretty much reached a solution, which involves scattering a few conditionals for (gte mso 9), (IE) and !mso et al. The problem is Outlook.com ignores them.
My final problem is that the repeatable items that compose the main part of the email don't display well in Outlook.com. I've tried adding a class to the item designed specifically for Outlook.com, setting that to display: none and then prepending ecx to the class name and forcing display: block on that. Unfortunately that seems to affect Gmail.com, too.
Does anyone know of a reliable way I can handle this situation? I can't see any way I can make it work properly with Outlook.com's whacky rendering without some form of conditionals.
The last-ditch solution I can think of is to display a message linking to an image or HTML version of the email.. but it's slightly more complex since the email is generated dynamically, on a per-user, per-time basis.
Only thought I have to help would be to use the 'mso-hide:all' css. Mind you in nested tables, you will need to use on each section to make sure it is not rendered.
e.g. <table style="mso-hide:all;">
I have not tested this in Outlook.com, but thought maybe it might help...
Related
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.
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
I have a template which i used for sending emails written purely in hand made with css, and then i tested in Firefox/InternetExplorer/Chrome browser. But when i send that email to My boss PC as he is always Microsoft outlook user.
He always gets the alignment broken, texts broken all problems start. My question is how do you really write then? None of the web browser showing my template wrong.
I searched a lot, but most answers are not deeply and correctly well answered about this. I would really appreciate some experts input on this.
Thanks
outlook uses an older version of Trident, the CSS rendering engine. Depending on what Outlook your boss is on, the worse it can get. Outlook 2010 actually reverted to an older version of Trident because of Microsoft losing the Anti-trust case with the EU, so whatever version was before 2010 actually renders better, however they are both quite subpar # best.
you're going to want to literally stop developing with modern html/css and fall back on old school table layouts. i know, its gross, but you're going to have to do it for email.
the best tests are native, but if you don't have access to both versions (not many do) you should check out EmailOnAcid.com, they provide a plethora of email clients you can test on.
constantcontact.com, mailchimp.com and campaignmonitor.com all offer more than testing services if you need anything else.
Outlook 2007 is the bad guy. Any newer or older is much better. In Outlook 2007 lots of CSS commands don't work.
See this page: http://www.email-standards.org/ for details.
However, try sending your emails to Gmail.com and see how it gets displayed in Gmail web interface - Gmail is quite restrictive and as a rule of thumb, if it displays nicely, it should look good in other web clients too.
Some advice regarding HTML emails:
Outlook
It is good to provide width for Outlook, otherwise the CSS may crash.
Outlook doesn't support padding for <div>s / <p>s, float and various other things.
Gmail
For Gmail, you should use inline CSS in preference to defining classes.
Gmail actually parses CSS provided by you and for instance, changes height to min-height so using height is useless. However min-height of <td> is not respected by the browsers, so internal <div>s inside <td>s can be used to assure that min-height was applied.
Gmail strips background images, and generally in all email clients images are displayed upon user request for security reasons. Therefore, wrap images with <div> and set background color and color of this outer div, and provide alt (alternative text) for image (note also that images with empty src do not preserve width and height while rendered by the browser).
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 understand that no matter what I do, someone will be able to copy it. However I can still make them work hard for it. What are some good ways of making data not easily copied using php compatible coding.
--- Added ----
The data is a listing of results for certain local sports events. We send people out to collect the information, post the information, make corrections and such. However a competing website takes our results (I know they are directly copying them) and never updates them which causes people to call our office and complain.
---- Answer for my Use ----
I picked one of them, however I am going to use multiple of your answers. I am going to add my link in a using the copy pasta trick. I am going to put fake hidden text into it. I am also going to do the fake hidden text trick with different versions of the div tag that are fake (making it even harder to scrape or to do something like copy to textpad and replace it real easily), and I am going to talk to a lawyer as well about legal recourse and what I can do to make it illegal for them to copy the data (such as creative bios or something cool like that). Thanks for your help.
Joe, you can't really make them work really hard to get your data. It's essentially just a single request to any of your pages. Your best option is to explicitly state that you own the rights to all of your content, and that any infringement on that ownership will lead to legal ramifications*.
* Not a lawyer
Your data will be copied to every computer that requests the page and it will stay there until the person clears their cache. To answer your question, you can't.
What you can do is create a CSS style such as:
.copy-pasta { display: none; }
And then throughout your content, add something like this:
<p class="copy-pasta">Content provided via [your website here]</p>
This will increase your page rank when copy-pasters blatantly steal your content, meaning you will show up first in search results.
Place some <div style="display: inline; position: absolute; overflow: hidden; width: 0px">useless words</div> in the text. It won't display for reading, but if someone copy and paste... "WOW where it came from WTF!! *CRY*"
How about putting links to your site in with the displayed data? No big fanfare, but just suggest that the for the most up to date figures, they can go to the real website that publishes them.
Most of what you try will only work for a time. Until you exceed their laziness factor. (What they're doing suggests a high laziness factor.)
Laws don't protect publicly available data, but you may be able to protect the packaging and presentation.
Programs used to copy out data look for the data using pattern-matching. You could 'decorate' your data with randomly-chosen tags (like one row would have a span tag surrounding it, the next row a div, etc...). Just a thought.
Clarification:
With screen-scraper at least, the user of the program specifies what HTML comes before the data they want, and what HTML comes after it. You can make it more difficult for them to automatically retrieve the data.
Why are people calling your office to complain if the data is on a competing website? If they have a domain name that is similar enough to yours that people are confusing the two of you or if they've put something on their site that makes it look like you've endorsed them, then you've got them for trademark infringement.
Disable the context menu is a start.
$(document).bind('contextmenu', function(e)
{
return false;
});
Or
<body oncontextmenu="return false;">
Forbidding people to get data is almost impossible. You can mess up your tags and make the code really dirty and hard to parse... but it's not really enough. You could also generate a big image with the data in it, this would be painful to parse! ... but you don't want to do that.
Because you said...
However a competing website takes our
results (I know they are directly
copying them) and never updates them
which causes people to call our office
and complain.
... my call would be to take this the other way and create an API allowing people to get your content in a way that YOU designed.
Also if they are just shamelessly stealing your data and they don't have the right to do it, consider a legal option.
Another option is to use PHP code to generate images from the site's HTML. You would use the images to display the content, instead of HTML which can be easily copied out. Example code is here, and I bet you could find more code to do this by Googling:
http://www.acasystems.com/en/web-thumb-activex/faq-php-convert-html-to-image.htm
Try Copyscape it wont prevent your content from being copied, but it will make finding the copies very easy.
You may encrypt the data on the page, and have javascript obfuscated decoding routine that will decode it for you viewers. You may switch keys and encryption algorithms from time to time. Same javascript should disable ability to select text and/or copy it to prevent manual copy-pasting.
They won't be able to copy manually and their scraper would have to be able to run javascript to get the data.
Caveat is that the data won't be visible for Google, but if data is rather numeric it might not be such a big harm.
If they scrape automatically and very often you may also try to pinpoint their IP by observing most active IP-s on your site and serve them fake data.
Please don't use lawyers, that's hitting below the belt.
use swf to display your data, just like other online books