I am using a header and footer which I upload to my companies campaign manager program. This header and footer cannot be changed. But I want to change the subtitle which appears on some email clients after the Subject next to the unopened email (which currently has the first line of the email which is "click here if email has not loaded"). Is there anyway I can change the subtitle through the content beneath the header? If not is there a way I can have a subtitle which is not "click here" which does not appear directly on my email.
I really don't see a way to do this without being able to edit the email header contents (which is where I assume this "Click here" text is located).
In the past to correct a similar issue, I have either moved that text down farther into the content or footer of the email, or replaced it with an image (having alt text to show in case images do not load). The latter choice is a matter of personal preference and probably not ideal. That said, however, these solutions require changing the header.
To change it you need access to the Header Contents
To change the preview of your email you can only use a hack. As it will always display the first lines of your email, you'll have to edit your email template to start it with whatever catchphrase you want in your email preview.
However, I'm pretty sure you don't want to add an extra sentence that will display before your email so here is the trick: use a 1px by 1px transparent gif with your catchphrase in the ALT tag.
<img alt="YOUR CATCHPHRASE" src="your-transparent-gif.gif" width="1" height="1" border="0">
Related
When you add a button on a Mailchimp template, only the text within the button is clickable. Not sure why they designed it this way...is there a good reason for this?
If not, is there an easy way to make the entire button clickable...I've thought about just creating a button image...and making it linked...but trying to avoid that if possible.
Give this article and technique a go.
https://www.emailonacid.com/blog/details/C13/bulletproof_buttons_for_office_365_and_everything_else
I use it every where and it has a fall back for Outlook.
Be sure to check the comments for any tips from users who have figured a few quirks out from the originally supplied snippet.
Like my comment about adding stroke="f" to the snippet to remove the default stroke on linked buttons.
The easiest way to get a button fully clickable is to build the button with an HTML table and wrap the table in an anchor, like so:
<a href="http://www.website.com">
<table border="0" width="">
<tr>
<td><span>Click Here</span></td>
</tr>
</table>
</a>
It is not valid in HTML4, but is valid in HTML5, but not much of what goes into an HTML email is valid, so I do not worry about it.
The problem with this approach is that it is still hard to edit in most, if not all, HTML Email platforms, such as Mail Chimp or Campaign Monitor. A non-coder who sends email will have to go into HTML view to edit the email - not ideal.
In MailChimp, their editor breaks the parent anchor, stripping it out altogether.
Test it in your email platform of choice, it is a simple solution.
So I'm having an odd issue while setting up my RSS driven campaign in Mailchimp.
In an area in my template, I'm pulling in an excerpt from my post that could possibly have a link in it.
Let's say for example this is what a snippet of the code looks like in my template:
<div class="post-excerpt">
*|RSSITEM:DESCRIPTION|*
</div>
Which for example lets say when the email is generated and sent the source looks like this:
<div class="post-excerpt">
Lorem ipsum dolor sit amet.
</div>
Obviously I cannot add any inline css to that link, because it's getting generated by Mailchimp. But I'm adding CSS in my template like this:
.post-excerpt a { color:pink; text-decoration:none; }
And I also have Mailchimp's "Automatic CSS Inliner" setting turned on. This however doesn't seem to be moving my CSS to the links that get generated by *|RSSITEM:DESCRIPTION|*.
For some reason, in gmail on desktop, links appearing within .post-excerpt are still appearing default blue and underlined. On my iPhone, they are pink without any text decoration, as they should be.
Any idea on how to get the links in this area to appear the way I need them to?
Thank you.
Gmail strips out all of the style information in the header (anything in the <head> part of the document including <style>).
Gmail app also does this. This is the main reason you can't create responsive emails for Gmail.
Obviously as you correctly state, you cannot put an inline link due to the link being imported through your RSS feed.
However, have you considered making the whole description a link? I don't know if it will work but it's worth a try. It might even improve click through rates.
<a href="*|RSSITEM:URL|*" style="text-decoration:none;
color:#000000;">*|RSSITEM:DESCRIPTION|*</a>
As a further thought you could also consider putting <style> CSS goes here </style> in your body at the bottom of your email.
Are there ways to resize an image to fit thew window the image is being viewed in WITHOUT javascript and limited CSS?
I ask because I have an email campaign that I send out that features a main image that I want as large as possible without scrolling. I have read ways to do this with javascript and jQuery but I do not see a way to do this that the majority of email clients will read and react to properly. Is this possible? And if so - How?
This is the correct way to do it for a html email:
<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
It will auto resize to match the width of the container element (which should always be a <td>).
Note that on some clients (Outlook '07, '10 & '13 in particular), the image will not exceed it's maximum dimensions. If you are working with a max-width fluid template this will not be an issue providing your image width matches the max width.
This is how you should be able to do it
/****this is the Css****/
.full {
width:100%;
height:auto;
}
/***end Css***/
<!--Now the html--!>
<section>
<img src="image/main.png" class="full">
</section>
Or you can go the simple way
*update
you can do it like this
<img src="image/main.png" style="width:100%; height:auto; border:none;" />
and if they have an option to put it as html to do it like that as it should render correctly like that
You need to be as archaic as possible to make HTML emails work across all clients.
Inline styles and HTML 4 code should do the trick. Be warned though - max-width and max-height works in most clients, but this does NOT include Outlook 2007/2010/2013/365 which could well be over half of your target audience. Width works in all clients - but NOT on div and p tags in Outlook 2007/2010/2013/365! Always use tables not divs to be certain it will work.
Basically, always assume something isn't going to work and design for the smallest possible margin for error - and ALWAYS use inline styling or it might well get stripped.
If in doubt consult the oracle, I always do :)
Source: https://www.campaignmonitor.com/css/b/
HOW TO MAKE AN IMAGE RESIZE ITSELF IN A GMAIL
First, here is the HTML code we will be working with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Resizer</title>
</head>
<body>
<!-- Point to your image by placing the path in the source (src) attribute. -->
<img src="http://yourImagePathHere.jpg" style="width:100%; background-repeat:no-repeat; background-size:100%;" />
</body>
</html>
NOTE: Notice the part that reads "http://yourImagePathHere.jpg". This is the path that points to the image you want resized in the GMail. Put the URL for your image here. In order to run this code
in a browser, you’ll need to have it saved as an HTML document. You can
accomplish this by copying and pasting the code above into a code editor or text
editor (such as Notepad on a PC or TextEdit on a MAC) and save it with the
extension “.html”.
If you are using TextEdit on a MAC, you will need to switch to plain text editing
before pasting the code. To do this, choose “Make Plain Text” from the “Format”
menu.
For this example, we will assume your file name is “image_resizer.html”. If you
need to change the image, you will need to edit the HTML document with a code
or text editor. To do this, right click the HTML document and choose “Open With”
and select a code editor or text editor. Then, swap out the image source path
(bolded in the example above), replacing it with the path that points to the
updated image. Then save, and your HTML file should ready to go and updated
to point to the new image.
If you are using TextEdit on a MAC, you will need to start a new document,
switch to plain text editing, paste the code again, and then change the path to the
image.
Step 1: Open image_resizer.html in a browser. To do this, double click it OR
right click it and select a browser from the “Open With” menu.
Step 2: Click anywhere on the webpage. You can click on the image itself or the
white space on the webpage. The idea here is to make sure that we will have
the pointer’s focus on the window to verify that the page is ready to be selected.
Step 3: Select All. Do this by using “Ctrl + A” on a PC … OR … “Command + A”
on a MAC. The page contents will be highlighted.
Step 4: Copy. Do this by using “Ctrl + C” on a PC … OR … “Command + C” on
a MAC. The page contents will be copied to the clipboard. (That just means that
the computer memorizes it).
Step 5: Now that the contents are copied to the clipboard (memorized by the
computer), open your Gmail and click the compose button. Place your curser in
the content area (click in the area where you type a message).
Step 6: Paste. Do this by using “Ctrl + V” on a PC … OR … “Command + V” on
a MAC.
Step 7. Finish typing your email message and send it.
I was dealing with really big images without any kind of a container. I fixed it by using max-width to ensure the image wouldn't be too big.
<img
src=""
width="100%"
style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
/>
Using both width and max-width ensures the image will take the full available space, but not too much. I used 80vw and not 100 because people rarely read your emails in a fullscreen mode, usually more often using a viewer (Gmail), which usually uses a bit of the available space.
I'm using a simple PHP code to send a html via email.
The problem with the images is that they don't show because of the security issue they make. Gmail asks the user if he wants to display them.
How can I make a placeholder for the picture so when it doesn't show it will write in its place "please choose to display images" and have some border around it?
It is easy in your <img /> you just need to add the attribute alt. Per example:
<img alt="My text when no image is displayed" />
I just added a sample code here: http://jsfiddle.net/sMVgH/2/
HTH
I want to display comments in my HTML source, but only in the source and not on the actual rendered content of the page. For example, when a user right clicks their browser window and selects "View Source", I want the comments to be visible for them to read there, but I don't want the comments to be visible on the actual rendered website.
I tried
<span style="visibility: hidden;">
Joe Hancock - 04/16/12 - Some comment
</span>
But doing this takes up actual room on the webpage (white space) and really throws off my styling.
Anyone know of an good way to do this?
<!--This is a comment. Comments are not displayed in the browser-->
HTML Comments
Try this:
<!-- Comment goes inside here -->
1<div style="display:none">This is hidden</div>2