I'm using php to send out an invite email for my app. The html for the email is roughly
<html>
<body>
<div style="border:7px solid #79973f; width: 527px; margin-left: auto; margin-right: auto;border-radius:7px;">
<div style="width:440px; margin:20px auto 50px auto;">
<p style="font-weight:bold; font-size:14px;"></p>
</div>
</div>
</body>
</html>
This layout shows up perfectly in gmail but the width and margins are not correctly shown in the iPhone Mail app. Help?
That's because you're explicitly setting the width in the HTML. What you should do is use the css property max-width to assign the maximum width you want it to display, but it will be shrunk by a smaller display (i.e. on an iPhone)
It turns out, you just have to specify min-width of the style
You need to make HTML emails in tabels not divs, alot of clients dosnt support that
Maybe this will work on your iPhone after the comment you made... But this surely will not work on a lot of other mail clients. Amongst which a few Outlook-clients.
Look at this: http://htmlemailboilerplate.com/
Related
I try to write an HTML Email template that includes a button with a link and has a maximum width with the same margins left and right. However while some of the CSS part gets implemented some does not. For example for then button, the background and the font color is as I intended, however it does not add padding to the background and does not remove text-decorations.
A similar problem occurs when I try to set a maximum width for the overall Email with the same margins left and right. It implements the width but does not set the margins.
All of these things work out if I look at the template in a browser, only when I try to send it as an Email, it is displayed differently.
I already only use inline CSS and coded it as a table. For the button I wrote this code:
<tr><td>
<h1> <a style="background-color: #8c30ff; color:white; text-decoration: none; padding: 0.5em" href="https://google.com"> Join now </a></h1>
</td></tr>
And I tried setting the maximum width to this:
<table style="margin-bottom: 80px; margin-top: 80px; margin-left: auto; margin-right: auto; max-width: 620px; align-content: ">
Email clients all have different support for different HTML and CSS features. You can check Can I email for detailed data about support across email clients.
max-width and margin in particular have mixed support, especially in The Outlooks on Windows. max-width is only supported in Outlook on Windows since Outlook 2016. And margin with auto values are not supported at all in Outlook on Windows. You must rely on tables with HTML attributes like align="center" for Outlook on Windows.
You can see an example of button code implementation by email developer Mark Robbins here: https://www.goodemailcode.com/email-code/link-button
And you can try this generator by Campaign Monitor: https://buttons.cm/
I'm creating an email template and I am trying to make it responsive now I've run into a problem, I have been looking into using the "#media" tags but emails don't really like <style> so I'm really not sure how to do it.
<body>
<table>
<table>
<tr>
<td>
text blah blah
</td>
</tr>
</table>
<!-- This is the one I was responsive (The one below) -->
<table>
<tr>
<td>
Make this table responsive <3
</td>
</tr>
</table>
</table>
</body>
P.S, I don't need the top to be responsive so how can I link the second one to the CSS
I have all my tables and the Desktop design look perfecto' E.G the divs and tables are '%' not 'px' and I have 2 divs next to each other when it get scaled down to mobile they are still at 50% of the browser screen (50% of the mobile and desktop) but when they get scaled down I want them to be 100% of the mobile screen
<head>
<style>
#media only screen and (max-width: 771px) {
/*add your class and code here*/
}
</style>
</head>
<style> tag would go into the <head> tag.
But be careful what you use some platform have abysmal email CSS support, also see this.
I would limit my use of CSS3/HTML5 in emails.
But honestly I wouldn't bother with building it from scratch, it's just too tedious of a task; you have to get it working on different platforms.
I would use an email HTML builder (most are free) like:
stamplia
campaignmonitor
litmus
inkbrush
*Note: Conventionally with HTML emails you would lay everything out with tables, not grids.
There are two approaches to using media queries - mobile first or desktop first.
The way that has the most support and is likely the easiest for someone just entering into HTML CSS is desktop first approach. In this you will inline all the styles for your desktop rendering. You then add media queries for the different breakpoints to make the email fit the device screen. This is easiest and has most support as the only mobile email clients that do not really support media queries are ones like the Gmail App (which are usually a small percentage of your mobile audience). The issue is that, using the Gmail App as an example, depending on how you styled your email, this may cause it to break on Gmail app - causing display issues.
This is where the mobile first approach comes in. Mobile first builds the email with inline styles to display correctly in gmail app and then uses media queries and mso conditional statements to make it flesh out and fill correctly on a desktop display. This requires much more knowledge of CSS and email client 'quirks and hacks' but can create emails that display beautifully across all clients. This can sometimes require much more styling and much more code to accomplish due to the complexity of the different processors in email clients.
For initial forays I would recommend building as always desktop first and then use media queries for mobile as it is simple and is much more widely supported, so requires much less hacks.
For help with supported CSS, please reference - http://www.campaignmonitor.com/css
Hope this info helped.
References:
Litmus - https://litmus.com/blog/understanding-media-queries-in-html-email
Email on Acid - https://www.emailonacid.com/blog/article/email-development/media_queries_in_html_emails
CampaignMonitor - https://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/
In HTML emails, you have two ways to do all of your styling, since you can't have a seperate stylesheet.
The first is a <style> tag.
Your email will have a structure of <html>-><head>-><body>.
<style> tags can only be placed in the head so your set up should look something like this.
<html>
<head>
<style>
#media screen only (max-width:767px){
/* Your CSS goes here */
}
</style>
</head>
<body>
/*HTML Code goes here */
</body>
</html>
The other option you have will only work if you just want to change width, and that would be using percents in your element's inline styling, like this:
<div class="header-block" style="width:100%;"></div>
You can find more on using media queries in emails on litmus.com.
If you already have it made up with extra CSS in your style tag, the Inline styler tool might be able to help you convert embedded styles to inline.
already done and use and try it
Its not using in Media inside a table structure
<table width="600px" max-width="100%" align="center">
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
</table>
Using Litmus for responsive emails is showing great results for the majority of browsers, however some objects in the email are using Display:none !important; and are still showing up completely in Yahoo / Gmail, and partially in outlook 2013.
Update : Providing example -
Using the styling code as following
Basic Styling
.mobile {display: none; font-size:0; max-height: 0; line-height: 0; mso-hide:all;}
# Media
table[class=mobile] {display:block !important;line-height:1.5% !important; max-height: none !important; font-size: 12px !important;}
`<table class="mobile">
<tr>
<td>This should show up on mobile
</td>
</tr>
</table>
`
On most browser via litmus only one or the other will show, but on Gmail it is showing both the mobile an the browser text
display isn't supported in Outlook 2013 or googlemail - http://www.campaignmonitor.com/css
However z-index is. So you could try setting a negative z-index. I've not tested this, but worth a try.
Seeing as your question is lacking in any relevant information i can only advise you.
Read and follow the information here
http://kb.mailchimp.com/article/how-to-code-html-emails/
Especially note the point
99% of your CSS won't work (especially not in the browser-based email services like Gmail, Yahoo!Mail, etc.).
Avoid as much css as possible, code like its 1999 - yes use tables
IF you must use css, use inline, and what you cannot use inline put in the body and not the head.
So if you are trying to hide something ?? what we dont know - you need more to start thinking about things like white text on a white background.
Try wrapping your mobile tables in this:
<!--[if !mso]><!-->
<div class="mobileonly" style="display:none; width:0px; max-height:0px; overflow:hidden;">
<!-- tables! -->
</div>
<!--<![endif]-->
then in your media query
div[class="mobileonly"] {
display:block !important;
overflow : visible !important;
width:auto !important;
max-height:inherit !important;
}
I know its an old post.
Solution is to use html tables to layout email content that will look and work well on outlook. Then wrapp the columns in </td> </td> so that the td columns will be killed on other email client's like gmail, mobile emails etc.
This way you can create emails with two columns on outlook but wrap the columns on non outlook.
Here my email template : http://jsfiddle.net/p5K6N/
I tired few things, I took 2 divs, one div for image and 2nd for texts , and make position : absolute
position : absolute <= is not working
Another thing I tried was background url of image , but still it is not working for me :( - i found on internet it is not working, but what's the alternate solution here?
<p style="text-align: center; font-size: 18px; font-family: 'Segoe UI';">Pursue Your Brand</p>
<div style=" background-image:url('http://beautifullinux.com/web/wallpaper/SolarisExpressBuild69/images/di-scurve-gray.png'); background-size:100%; width: 100%; height:100%; text-align: center; vertical-align: middle;">
some text will be disply here
</div>
Emails are an absolutely awful thing to do because of the fact that there are many different mail clients(gmail, outlook, etc...) and they all run differently. I know from recent experience that outlook does not support background-image or the position styling at all. There is also a few clients that will rip any divs you have out for some reason! In short there is no solution that will run on all email clients because emails are the devil! I found this website helpful for testing my emails though. http://putsmail.com/
http://backgrounds.cm/ this could work for some situations though
Please see http://www.campaignmonitor.com/css/ Not every Mailclient supports Background pictures!
<div style=" background-image:url...>
You have a space before [space]background-image:url... Take the space away.
Use background instead of background-image if you are going to give extra values such as height, width, etc.
I have a minor question:
Im doing a email that is being sent out and wish to have no margin at the top of the email - so that a image or table is flush with the top of the viewport.
I have tried sticking body tags in the html email with margin-top: 0px and it works fine in Thunderbird. However when testing in Microsoft Outlook there is a margin top applied to the content. Is there any way to get rid of this margin or is it not possible in Outlook.
You need to add the following to the <body> tag.
<body topmargin="0">
Ultimately though Outlook is poor at rendering CSS and it's going to get worse with 2010 unfortunately. In the mean time, in-line styles are really the only styles that will work in the majority of cases.
Outlook is the bane of HTML emails everywhere.
Check out this discussion for some answers and tips.
Bottom line: code like it's 1998. Tables all over the place. Don't nest tables either, as that often causes problems. No external styles, so learn to love your inline style attributes.
Ugh, just thinking about it gives me a tummyache.
Maybe you could try to insert some css that overrules the body?
Something like this:
*{
margin: 0px;
padding: 0px;
}