Okay i am a little confused here. I am trying to send a test email of my html email i have to gmail, but my media queries are not taking effect. I am targeting screen as shown in tutorials.
i have my media queries setup like:
#media screen and (min-width: 1050px) { DO STUFF }
Additionally i have tried to add google fonts to the email but they dont show, i have linked them in the head:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
is there a method to target available width of space inside email? Gmail opens emails up in a smaller window right, so i need to target that?
Gmail does not currently support media queries.
http://kb.mailchimp.com/mobile/campaign-behavior-on-mobile?_ga=1.60711151.37688562.1434776314
Gmail does not support Google web fonts either.
http://templates.mailchimp.com/design/typography/
One option, if you absolutely needed the font, would be to implement
the typography as an image. This is not ideal, but works.
Related
I am sending emails to users which includes a one-time authentication link. I am trying to develop a feature through which if a user forwards the email to some other user, the links should get disabled.
One way is to hide the link by using a style tag which is covered here:
<style type="text/css">
blockquote .original-only, .WordSection1 .original-only {
display: none !important;
}
</style>
<p class="original-only">
Content to be hidden Unsubscribe.
</p>
Is there a better/standard way to achieve the same? I would prefer to keep the link visible but clicking on the link will take the user to my web where I can check URL params to validate if the email is original or forwarded.
I don't think it would work, but for a different reason - Office 365 can "probe" the link first to see if it points to anything untoward. Your server would register a hit, but it won't be coming from a user.
A foolproof way forward is essentially not possible, although you may be able to do it with some success on some platforms. (There isn't even a way to target all email clients individually on a straight send--let alone on a forward!)
What happens when you forward an email is that the email will be re-rendered, often without the accompanying embedded CSS that you are relying on (it depends on the email client).
So the reference to the class would be lost, and your link would now show after a forward:
<p class="original-only">
Content to be hidden Unsubscribe.
</p>
Furthermore, I see what you are trying to do there, in predicting that a forward would add a blockquote or a style like WordSection - but not all behave predictably, or if they do, you can't target them. For example, Gmail will add a class that begins with something like "_m" (from memory), but although CSS can target that with an [attribute^="value"] selector, most email clients will ignore this 'advanced' CSS.
In fact, you may have more luck reversing this:
<style type="text/css">
blockquote .original-only, .WordSection1 .original-only {
display: block !important;
}
</style>
<p class="original-only" style="display:none">
Content to be hidden Unsubscribe.
</p>
I haven't tested it, but if you sent that to, say, Gmail (noting some Gmails are different from others, e.g. IMAP/POP accounts), which DOES support embedded CSS, you would see the unsubscribe link. But forwarding might just remove the embedded CSS and so the display:none would kick in and hide the link.
However, if you sent it Outlook desktop, which does NOT support embedded CSS (anything in <style>...</style>), it would hide the unsubscribe link by default, as well as keep it hidden on a forward (probably).
Results are likely to be all over the place.
I'm practising email for an outbound portfolio and I cannot for the life of me see why this isn't stretching to full-screen on mobile. Probably something really simple but some help would be much appreciated.
https://dl.dropbox.com/s/c759cldrl4t5ams/Test_email.html?dl=0
I'm going to assume you're on about IOS. If so - try putting <meta name="x-apple-disable-message-reformatting" /> in your <head></head> tags at the top of the email.
Note : read both answers below, thery helped us.
Original question:
Want to show appropriate deep link : http://en.wikipedia.org/wiki/Mobile_deep_linking so if android and no our app installed : show android app link, else html page link
App sends email to users. Want to be able to change links depending on device. If desktop - as is. If mobile go thru mail body and add "m." to all the href OR other link if our native app installed.
Do mobile mail clients run js?
Do I need to encode the js in anyway. Tried google but not able to get the right keywords to search for. End up on page about send grid or using js to send an email.
I want js inside email body. I know can change template at server, but want it to be dynamic to current client. So same email opened on desktop -> desktop links ; inside mobile app or browser - mobile links.
Or other html solution would be cool. W3 are you listening?
You can show/hide links depending on device using media queries. Try this:
<style>
#media only screen and (max-device-width: 500px) {
a[class=mobileLink] {
display: inline !important;
font-size: 24px !important;
}
a[class=desktopLink] {
display: none !important;
}
}
</style>
<!-- Starting link switching technique -->
HTML page link
<a href="link/for/mobile/version" class="mobileLink" style="display:none;
font-size:0px">Mobile page link</a>
<!-- End link switching technique -->
Yes, Outlook ignores display:none but if the link is just text, font-size:0px should take care that.
Want to show appropriate deep link : http://en.wikipedia.org/wiki/Mobile_deep_linking so if android and no our app installed : show android app link, else html page link
This cannot be done in emails, but it can be done in landing pages, like the web version of your email.
App sends email to users. Want to be able to change links depending on device. If desktop - as is. If mobile go thru mail body and add "m." to all the href OR other link if our native app installed.
This can be done by using media queries to hide/show desktop or mobile content when appropriate. (Responsive emails.)
Do mobile mail clients run js?
No -- security issues.
Do I need to encode the js in anyway. Tried google but not able to get the right keywords to search for. End up on page about send grid or using js to send an email.
There's nothing you can do to get JS to work in email clients. It just won't work.
I want js inside email body. I know can change template at server, but want it to be dynamic to current client. So same email opened on desktop -> desktop links ; inside mobile app or browser - mobile links.
Once again, this can be done using media queries. (Responsive emails.) There are some drawbacks, but I suggest doing a Google search for "Responsive Emails" to get started.
Or other html solution would be cool. W3 are you listening?
There's nothing they can do in the email world. Unlike web browsers, where there are set standards, in the email world, anything goes.
Edit: Although using media queries to show the appropriate link/button for the devices, it's not a bulletproof solution. The best solution is to use your web server's power to determine where the user should go, depending on their user agent or viewport size.
There is a more modern solution, that is supported natively by mobile platforms.
On ios it's called universal links and on Android app links.
i have a mobile website i am converting from a desktop site but have some unwanted white space that i cannot seem to remove. Its either padding or margin somewhere but i cant track it down.
Is there a way to the same as firefox's inspect and see exactly what styles affect what?
The site is being made via media queries and i cannot find any emulators that work with this.
Thanks.
Using this meta view port should be the correct width for iphones right?
<meta name="viewport" content="user-scalable=no,width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
Do you want to see your website source?
if you use Google Chrome you can add view-source: before any URL that you want to see it's source.
For example:
http://www.google.com shows you Google website and view-source:http://www.google.com shows you Google website source.
Note: maybe it work on other browser but I didn't test it.
I've been using media queries to alter an email for iphone and ipad users.
Basically, I've had success when emails are accessed using 'Mail' for both those devices however when accessed using Safari to log into any email client the email responds as the desktop version.
Here's what I'm using:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/// REST OF MY CODE HERE ///
}
#media only screen and (max-device-width: 480px) {
/// REST OF MY CODE HERE ///
}
After a bit of research I also tried
#media only screen and (max-device-width: 480px) and(-webkit-min-device-pixel-ratio:0) {
/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */
/// REST OF MY CODE HERE ///
}
A few Similar questions have pointed to this page:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html
but I'm not quite sure what solution to glean from it.
Most email clients strip out javascript so I guess object detection isn't appropriate here. The User Agent String option seems more about targeting specific browser editions.
Is there a simple solution I've missed or could someone point me to an article that perhaps addresses this specific issue.
Some (most) email provider rewrite the html/css on the webmail side. That means, it is likely that the css with the media query is parsed out. You can easily verify that, by using your regular desktop browser and inspect the code of the mail, or set some fancy colors and check out if it gets displayed.
However, I don't think that it's such a big use case that users view/access on a iphone their webmail. Is it?