I am making an email template. I gathered that outlook would be quite uncooperative anyway. So have made some exceptions in the design.
However I am generating content via PHP and this retrieve an image from a DB seamlessly.
What I am getting however is the image being rendered like the following:
(he thin line on the side)
when in Hotmail it appears as a full image.
I have tried CSS such as display block/inline and adding heights and widths to it. I'm guessing its how its being created though.
Any help would be much appreciated.
Why don't you load in an outlook template, with images and then view source to see how it was done.
Related
I've just encountered a new issue that hasn't popped up in the 2.5 years I've been doing it. I send emails using Mailchimp and use HTML coding to format. Recently, my email campaigns have been clickable on desktop but spotty on mobile. Certain images will be clickable, certain ones won't - and when I return to the email, some new images are clickable or sometimes no images are clickable. It's very random. Below is an example of how I have always coded my emails. Picture of Code Used
You are using an area map to get precise locations on an image to link. However, on mobiles, those images are getting shrunk, depending on their size. Every email platform will shrink them differently, and depending on the content of the email, and the size of the images, they will shrink to different sizes.
So that explains the discrepancy you see. Now how to solve it?
Essentially, instead of providing one massive image, you need to use HTML + CSS, with tables and separate images and links. You need to lookup any modern resource on HTML emails and follow their guides or templates. This way, when the images move around to fit on mobiles, each image or word will have it's own link, and it will work consistently.
Before I start, I will clarify that I don't write code myself (I'm a cretive designer), but I do know how it works to a basic degree. However, I'm asking because this is extremely important and I'm struggling with it terribly.
I need to craft an email with a png image I've already made, and it needs to be the whole email. It should fill the whole email-viewer page on any device that opens the email, like this:
example
-(this is an approximation - the closest I could get to my goal. It doesn't appear like this on desktop view though, and I can't have the space above it)
I'm using the mailchimp builder but it's not allowing me to make an image the whole page, so I thought I could switch to HTML to overwrite it as I was getting desperate.
I know it is a bit of a stretch but I was wondering if anyone could show me the couple lines of code I could copy-paste to the HTML builder? All I need is for the image to fill the whole page and be embedded into the email.
Thank you!
That's really easy!
First, Inspect the email that you are sending. Like This ⬇
Then, right click, press "Edit as HTML" and add this ⬇
(I'm sorry I don't know how to do it on mailchimp, it should work the same)
Im currently working on building a webshop for the company Im working for, and one of the things that Im currently working on, is order-mails that is being sent out to our customers when they have finished an order.
The webshop is being build on the CMS Joomla, and currently, we're still testing everything in the webshop.
Here's the problem:
The order-mail I've made to this point, is made in HTML and CSS. In the top of the order-mail I've put in the company-logo. When my colleague (who's a test-customer at the moment) have placed an order, an email is sent to him and me. The mail my colleague receives looks fine, the logo resizes whenever he resizes the email-window. But the same mail that I receive, the logo in the top, is just totally out of proportion. The picture is the size as the original, even tho I defined it to be smaller in the HTML-/CSS-code.
Does anyone know why that is ?
Do I need to change anything in Outlook ?
In the CSS code? When it comes to HTML emails, you should not be using CSS for styling. To ensure they all cross email client compatible, you should be using tables.
So, firstly, remove the CSS you have for you image and use the following:
<img src="test.jpg" width="100" height="100" style="display:block; border:0;" alt="" />
There are some email clients such as Apple Mail that will support CSS within the <head so you can use it, for example you may want to add a shadow to the image, however do not use it for structural styling, such as floating or positioning.
Hope this helps
Adding "display:block;" to the image did seem to make the picture stay within proportion inside the mail. For a while.
I did also add a "max-width" inside a "div", that might have done something to the picture.
I recently mocked up an e-mail marketing (mail chimp) e-mail in Photoshop, and exported it into HTML (using tables and inline styles (unfortunately) so that it appears correctly in all/most e-mail clients.
However, after sending myself a test e-mail to see how it appears in my Gmail account, I can see there is a white dividing line between each row of my table, which I cannot seem to remove or find when I inspect it in Google Chrome.
Can anybody tell me how to remove these dividers?
My full HTML can found at http://pastebin.com/gJWJGEak#
A screenshot of how the email is currently appearing can be found at http://img521.imageshack.us/img521/346/screenshotvg.png
I found your problem. It has nothing to do with borders, but with the size of the text inside the cells.
Your text expands too much and it causes the containing cells to expand.
If you reduce the text size or the margin of the paragraphs you'll achieve the desired result.
I hope it helps! :)
All of your images need to be explicitly style="display:block;".
And just a heads up, background images won't work in Outlook 2007 and 2010.
I creating a program which send newsletter with a background image. It works fine on Office 2000-2003, thunderbird, but the background image does not show on Outlook 2007. I read that Microsoft changed the rendering engine and did not support the background css property (it is possible but only applied to the Body).
Is it achievable to create an email which will render like that : http://www.freeimagehosting.net/image.php?a7905f7d16.png
on Outlook 2007 ?
What is the solution ?
Thank you for your help.
Shouldn't be too hard, as you're only needing one background image for the whole layout. Here is a blog post telling you how to get your background images working for the body.
Then just put the images and text inside a table and style it up with the correct width, and BAM, you're good to go (:
Not only has Outlook 2007 stopped the background image from showing in anything but the body element, apparently you have to be careful about how you set the styling of said background image as well. Perhaps this is your problem?
Campaign Monitor has a short post about it.
perhaps using a table and put a background on the table would work. either way, if you have styled it using css only, your in trouble and will most likely have to take a few steps back and do alot of the styling again.
fyi: www.fixoutlook.org
Outlook by default uses Trident, IE's engine for incoming mail, and Word HTML rendering engine for outgoing mail... Until Office 2007 (and some people hate it).
Now, it uses Word 2007's rendering, wich is rather lacking. On microsoft's page you can see that de body element doesn't support the style attribute. Because of this, you can't give a background to the body.
May be enclose everything in a styled div, instead of styling the body?