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.
Related
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)
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.
I'm working on a newsletter for my photo community website. In the newsletter, I want to have a grid of images. Here's an unfinished rendering in an email client. As you can see it has problems, this is only to illustrate what I'm trying to build.
The image files in reality are about twice the resolution as shown in the email. Furthermore, they can be in any aspect ratio and orientation. What I would like to achieve:
Force all images into 200 x 200px cells
Do not distort the image, the aspect ratio must be maintained
The cell must always be filled, both horizontally and vertically
Background sizing should be centered
Elements must be clickable, leading to that particular photo
Should be robust and work in most popular email clients
In normal web technology (as opposed to HTML in email), this would be a matter of setting the image container to the fixed dimensions and using background-size: cover. I've learned about many HTML email limitations yet am trying to persist in finding one way or another.
Am I really on an impossible mission here?
What I've tried so far:
Setting the image as a background on the a that wraps around the img tag. With some tweaks it can come to a reasonable result, yet centering is a problem and outlook.com does not show the images at all.
Using normal img tags with "a" around it and trying to control max width and height on the image and its wrapper. Here too centering is the main problem
I really hope this can be done, one way or another (not that server-side resizing is not an option in my case).
Since this is on an email client, you can't use any scripting language. This mean that manipulating the image is impossible on the client side of thing.
You will have to manually create thumbnails for your pictures or make some code that creates thumbnail server side before creating the email.
This is as much as I can tell you without knowing how you are creating your emails.
I have issue with background-images working for email templates(i know background image won't work across all email templates consistently but my client want it to email with background images).
I want to add background image for for the mail template but no luck as of it as it is not supported in most of the clients.
I tried to ovelay text on image using negative margin-left and position absolute but no luck as margin-left is not supported in outlo0k,gmail and notes.
Any help/suggestions would be great
Thanks in advance
Yes, there are still some good solution for achieving background images.
In Outlook, which is one of the more difficult clients to work with this post from Campaign Monitor's blog should point you in the right direction. The is a technique that uses VML to get background images working well in Outlook 2007, 2011, 2013.
The other tip is add the !important declaration to your CSS for Gmail to recognize the background image.
You might also want to set background colors if you're using tables with old bgcolor attribute setting just in case your background images don't load. That way if you have say...gray text on a blue background it still looks okay.
Finally, set you background images up as inline CSS and use media queries so on the clients like the iPad that are easier to work with you get the results you want.
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?