Email Newsletter - Layout goes weird in gmail - gmail

I created a newsletter for MailChimp. All looks good when I put it in the mailchimp website.
However when I send a test email to myself, some parts of the layout goes wrong in Gmail.
Some content goes too left and other content goes too right. While the header and some parts at the bottom is in the right place. It looks fine on my Phone.
My Newsletter Code: http://pastie.org/private/cwvosox7nzezqif7r3myoq
A picture of the problem i'm getting in Gmail: http://imgur.com/MPJNJq2
Can you please help me fix how its displayed in Gmail?
Thank you!

It looks like the width of your page is bigger than gmail's div ...
Or kleinfreund idea also have a good point.

edit: I just re-read, looks like this is your own html. Your display problems are directly related to the styles being in your head.
The code that you are displaying above has everything in the head, gmail does not recognize anything between the <head></head> tags.
You will need to move all of your css into inline styles

Related

How to send html email with EmailJS

I'm wanting to be able to send the following HTML code with EmailJS.
<div>
<p>Please click below</p>
<br/>
Click me!
</div>
It says on the EmailJS website that you can send HTML in emails, but there's no example given as to how you do that. All of the tutorials and examples online for EmailJS don't show how to send HTML in an email. If anyone knows how, I'd greatly appreciate the help!
It says at https://www.emailjs.com/docs/faq/can-I-send-html-emails/ that you can create HTML emails, but no example is given. Absolutely none of the tutorials and examples I've come across so far show how to put HTML into an email.
In general, I know that it's not a safe idea to be sending HTML this way, which is why it's hard to find, but just for starters, you can use 3 brackets in your EmailJS template variable, like this, {{{ myHTML }}}. Then, just wrap your HTML tags and content in a string and send that variable on through. It will look odd, but EmailJS will interpret it correctly. I've done small things this way but I've never sent a link this way. It looks a little dangerous to me.

Instagram embed box not loading embed code... anyone know a workaround?

I am trying to copy the embed code from a single Instagram reel by clicking the ... menu and clicking Embed. However, the code never loads and I get this screen. Anyone know a workaround to embed an Instagram reel on a website? The specific reel is: https://www.instagram.com/reel/Cd56By5FxBF/
See screenshot for what loads when I try to use to embed function on instagram. I have tried on multiple browsers.
Thanks
The integration code is made up of two elements. A long <blockquote> followed by a short <script>.
The <script> element should look something like this:
<script async src="//www.instagram.com/embed.js"></script>
Just add https: to the value of the src attribute, thus:
<script async src="https://www.instagram.com/embed.js"></script>
And everything should be working fine.

Adding a slideshow to a webpage

I need help. Apologies if the information I provide is not sufficient. I'm sort of an all-arounder at this job and this task has been thrown at me.
I need to add a slideshow to a a webpage. I am not even sure what code I need: jQuery, CSS, or HTML.
The homepage of the website has a Nivio slider (can't access the code to this because its owned by a management company we can't afford to pay).
This is what the editing page looks like: screenshot
The website is http://evelyns-kitchen.com
I am looking to add something like the Nivio slider (if I can't actually add a Nivio slider). Smooth transition, clean, dots below photo to represent the image, left/right arrow. Let me know what other information I can provide! Thank you so much.
Use zoho reports www.reports.zoho.com where you can create reports dashboards slideshows and many more

Google Translate Drop Down

i have purchased a website template and i need help concerning the website translator using google translate.
The translate works well but after selecting a language, a google drop down appears and when i scroll down, it still appears and hides my main header titles.
Can something be done like removing this drop down when i translate a language or can someone suggest me another method.
Thanks a lot.
The problem is the the contents in this bar are inside of an iframe, So you cant use javascript to trigger the close button.
Solution
Once the user chooses a language the an iframe with a class named 'goog-te-banner-frame'
is added.
You can use javascript to detect if it present and hide it
$(document).ready(function(){
if($('.goog-te-banner-frame').length > 0){//check if the iframe exsits
$('.goog-te-banner-frame').css('display','none');
$('body').css('top',0);//google adds top to the body so the bar wont cover website content
}
});
because this code uses jquery. make you sure you load it like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Gmail is trimming html email content. How to avoid the issue?

Gmail introduced a trimming feature in emails for "better readability". This causes a lot of pain for me, as I have a notification system for email, where I send some html email messages to users. Basically email looks like this:
divs and styling
Object alert in Project by User
tables and tr/td
User Action on Object in Project
/tables and tr/td
/divs and styling
link
footer
To group all emails in one conversation, first email has subject, subsequent emails have Re: subject.
Active users can receive significant amounts of emails like this, but due to "better readability" feature, ALL of the email content (starting from second email) is suppressed.
I am looking for advice - maybe I should redesign my html, or gmail has some anti-suppression code, or just a hack to go around this issue.
Issue from users perspective is described here: http://www.google.com/support/forum/p/gmail/thread?tid=756b83fa60ca1df7&hl=en
I had the trimming problem occurring on a table of an HTML newsletter.
It was very important that the entire table display because it was the
#1 content our client wanted to communicate. Here's the fix, or at least here's how we solved our problem. We eliminated any repetition.
So for this table, the lines in between each row, Gmail was seeing the
lines as repetitive. So I altered the pixel width by 1 px every other
line, which eliminated the repetition and fixed our problem. So that
said, look for repetition, and try to remove it. OR in some cases, you
might have to add type (in white) to create the variation.
Source.
PS: This is a bit unrelated, but I stumbled upon this question while looking for a way to disable the content trimming and keep the conversation view at the same time. I didn't find anything, so I developed a small extension for Chrome and Firefox.
It turns out that there is a very simple rule which causes this behaviour: Gmail will clip the email as soon as it sees the sender (From:) name in the body of the message, regardless of where this appears.
Solution: make sure that that the From: name in your email is not used in the message body (except in the signature, which will probably get clipped!).
This is an awful bug in Gmail, if you're unlucky enough to get bitten by it.
In my case, it was "trimming" an entire message, in a clean thread. See an example here, noting that the "trimmed" content is expanded in the screen-shot.
I ultimately worked around Gmail's bug by removing the entire header you see in that example ("Awesome Home Swap"), including the border below it. I stopped short of actually trying to figure out what specifically was making Gmail confuse that header as a "signature" (though I suspect it could have been the border, implemented using CSS directive border-bottom:1px dotted grey to style the <td> element).
I just found a solution that worked wonderfully for me. Simply create a bunch of hidden unique images throughout your emails to provide uniqueness to parts of the email that aren't actually unique. I'm building my emails with React so I have this Unique components that I'm using pretty much everywhere:
import * as React from "react"
function random() {
return Math.round(Math.random() * 10000000).toString()
}
class Unique extends React.PureComponent {
render() {
return (
<img style={Unique.style} src={`data:image/png;base64,${random()}`} />
)
}
static style = {
visibility: "hidden",
display: "none",
width: 0,
height: 0,
color: "transparent",
background: "transparent",
}
}
One thing I like about this solution is that it doesn't mess up the email preview text that would otherwise happen if you're using hidden text.
Add a double hyphen -- before the collapsed part. I was able to wrap it in a with font color matching the background. Worked for me...
I looked at the emails Gmail sent. Adds the following code (spacer.gif).
I guess this is the solution.
<img alt="" height="1" width="3" src="https://notifications.google.com/g/img/AD-FnEztup4OClDshQhMVXDbi6Oi0lSN-FgEY1jyW384aotccA.gif">
</td>
</tr>
</table>
</body>
</html>

Resources