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.
Related
I've built an HTML Email template which looks really good on most of the email clients but Outlook. It just doesn't want to read any inline CSS for images. Is there are way to hide images just for Outlook? Thanks for the help.
Put this around the image:
<!--[if !mso]><!--> <img> <!--<![endif]-->
I encourage you to post your html email so we could take a look and maybe suggest a solution.
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.
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 am trying out serving DFP ads in email. I'm following the guidelines here.
I have an ad unit set up just for email
I have a line item targeting that ad unit with just an image creative
The line item doesn't have any targeting restrictions or anything like that
The ad will show up in the email, at least the first time. The strange thing that I'm seeing is, after the first click, clicking on the ad again will often bring me to a blank page rather than the click-through page of the creative. Also, when I reopen the message, occasionally the image will not load. The code in the email looks like this:
<a href="https://pubads.g.doubleclick.net/gampad/jump?iu=/{my_pub_id}/300x250_email&sz=300x250&c={cachebuster}&tile=1">
<img src="https://pubads.g.doubleclick.net/gampad/ad?iu=/{my_pub_id}/300x250_email&sz=300x250&c={cachebuster}&tile=1" />
</a>
We've solved this by turning off cookies in the standard tag using the co= option; adding co=1 to the tag.
<a href="https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/{my_pub_id}/300x250_email&sz=300x250&c={cachebuster}&tile=1">
<img src="https://pubads.g.doubleclick.net/gampad/ad?co=1&iu=/{my_pub_id}/300x250_email&sz=300x250&c={cachebuster}&tile=1" />
</a>
The only problem (for us) that this creates is that we're unable to serve 3rd party tags, even ones that resolve directly to .gifs, using the standard tag.
Had the same problem and I solved it by using script to redirect click via script on my web server where ad is shown again so that all the cookies can be set.
Link looks like this:
http://www.mysite.com/dfpclick.php?adunit=mailing&cbuster=1369608725
Script dfpclick.php:
<?php
/* Google DFP url redirect*/
if ($_REQUEST['adunit']) {
$sUrl = 'http://pubads.g.doubleclick.net/gampad/jump?iu=/%mygoogleid%/'.$_REQUEST['adunit'].'&sz=1x1&c='.$_REQUEST['cbuster'];
}
?>
<html>
<head>
<meta HTTP-EQUIV="REFRESH" content="0; url=<?=$sUrl?>">
</head>
<body>
<?php
if ($_REQUEST['adunit']) {
echo '<img src="http://pubads.g.doubleclick.net/gampad/ad?iu=/%mygoogleid%/'.$_REQUEST['adunit'].'&sz=1x1&c='.$_REQUEST['cbuster'].'" width="0" height="0" border="0" style="width:0px; height:0px;" alt=""/>';
}
?>
</body>
</html>
It turns out that DFP for small business requires cookie support to work, even when using the non-JavaScript method of calling ads. So it works fine in web-based clients like Gmail, but it doesn't work in Outlook and the like. DFP Premium can supposedly serve ads in email without requiring cookies.
Using the co= option doesn't work for DFP Small Business. My workaround is:
Use the same code for img <img src="https://pubads.g.doubleclick.net/gampad/ad?iu=/{my_pub_id}/300x250_email&sz=300x250&c={cachebuster}" />
And build a redirect link on your website <a href="http://yourwebsite.com/adunit/300x250_email">. This page reads and filters the response from http://pubads.g.doubleclick.net/gampad/adx?iu=/{my_pub_id}/300x250_email&sz=300x250&c={cachebuster} in order to get the click-tracking link using javascript link=$(xmlDoc).find('a').attr('href'); and redirect.
This workaround doesn't work for rotation (more than one creative/line item is competing for the same ad unit at the same time).
I'd like to know how to serve email ads in rotation using DFP SB
I am trying to find a way to embed a share/+1 link for Google+ in a Newsletter, much like the Facebook share and tweeter tweet links can be embedded in a newsletter, which can be achieved with the following two urls:
https://www.facebook.com/sharer.php?u=[URL]&t=[TEXT]
http://twitter.com/intent/tweet?source=sharethiscom&text=[TEXT]&url=[URL]
Is there a similar functionality available for Google Plus?
All I could find on my own, is the Google+ button, which unfortunately uses JavaScript and thus it cannot be used in an email newsletter. I would expect Google to provide a static url fallback, but I cannot find it anywhere.
https://plus.google.com/share?url=http%3A%2F%2Fexample.com
You can share the link on Google+ with the official Google+ share link.
Replace the url parameter with the URL encoded link you want to share.
This one works fine for me :
https://plus.google.com/share?url=your-page-url
The share link allows you to do this. It will work in an email, but it's not quite the same as the +1 button.
To use the share link, add a link element to your email that complies with the Google+ Buttons policy. Set the href attribute to https://plus.google.com/share?url={url encoded share target}
For example, linking to https://plus.google.com/share?url=http%3A%2F%2Fexample.com will allow you to share example.com on Google+: (yes, that is a working demo).
Check out the official docs for more info.
If you use this approach please be aware of the fact that it is not a direct replacement for the +1 button. The link shares the target URL on Google+, but it does not actually +1 the target page. Only the +1 button can +1 a page.
Solution for those who needs custom title, description and image. You should make following changes to target URL:
Step1. add itemscope itemtype="http://schema.org/LocalBusiness" into <html> tag. It will look like <html itemscope itemtype="http://schema.org/LocalBusiness">. More itemtypes here
Step2. Place the follwing meta tags into <head>, change content attributes according your needs:
<meta itemprop="name" content="{Custom title goes here}">
<meta itemprop="description" content="{Custom description goes here}">
<meta itemprop="image" content="{http://www.your_url.com/your_image.png}">
Step3. Add the following link to your newsletter or anywhere you want:
Share it
Tip. To check how google sees your page, you can use this tool http://www.google.com/webmasters/tools/richsnippets. Probably you'll be interested in section Extracted rich snippet data from the page
Good luck, Lauris
I'm using the following.. :)
https://m.google.com/app/plus/x/?v=compose&content=[TEXT]%20[URL]
I personally suggest Google Plus Interactive Posts button
https://developers.google.com/+/web/share/interactive
to use in your apps/websites.Here Google Plus allows many customizations to do according to the requirement. I have used it in my app. Its a better option than Share button.
Maybe this helps. It works (partially) for me.
http://www.stateofsearch.com/share-on-google-plus-any-website/
There has got to be a way to do this by hacking the +1 script.
If you are interested in just changing the apperance you should download and modify this to suit your requirements.
Then, add this to your css:
.Uu .KF {
background: url("your-replacement-image") no-repeat scroll -132px -21px transparent !important;
}
to override the Google icons. However, this is probably very unstable and subject to change.