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>
Related
I have a PowerShell script that creates a single HTML file, email.html, with inline CSS and embedded base64 images.. then sends it daily to me (my website reports).
I want all (text/images) that are in the body of the email to resize automatically based on the width of the email client viewable area. Admittedly, I have limited experience in HTML/CSS. What am I doing wrong in my example below? Note: I truncated the base64 text in the example below so it doesn't take up too much space in my example.
Code:
<!doctype html>
<html>
<head>
<style type="text/css">
#media screen and (max-device-width:640px),
screen and (max-width:640px) {
.responsivetext {font-size: 2vw !important;width:auto;height:auto;vertical-align:middle}
}
</style>
</head>
<body>
<td style="font-family: Arial;" class="responsivetext">I have tried everything. Why wont this text resize when resizing Outlook 2016?</td>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAIEAIAAADwyk6cAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0T...." />
</body>
</html>
I've been dealing with this situation too. It is very difficult to achieve success in all options.
Outlook does not really have any solid support for media queries unfortunately and is often 'left out' when it comes to mobile responsive emails.
Can media queries be used in Outlook
I suggest to you here you can create responsive html design and examine it.
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.
I want to implement a responsive image in an email newsletter for e.g. mobile phones. For this I used this code snippet from templates.mailchimp.com and inserted it into the body above the image I want to be changed:
<style type="text/css">
#media only screen and (max-width: 480px){
.emailImage {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
For the pictures I wanted to be responsive I added the class=”emailImage”.
Sadly now, this doesn’t work. Anyone can explain why or give a better solution for my problem?
If necessary here is the complete code from my newsletter: http://pastebin.de/39651?
Thanks
Try this:
<style type="text/css">
#media screen and (max-width: 480px){
img[class="emailImage"] {
width: 100% !important;
}
}
</style>
<img class="emailImage" src="path/to/img" style="width: 600px; height:auto;" width="600">
This is same code I used for my newsletter and it works fine. I will update my answer later when I find references as to why this particular way of styling is necessary and for what mail clients, it's been a while since I did that code.
UPDATE: using attribute selectors inside media queries is workaround for Yahoo mail bug which gives precedence to styles inside media queries over inline ones.
Max-width support across mail clients is pretty limited so safer way is just specify image width as inline style (that gets trumped in MQ using !important). Since height is always auto it can just be defined inline. Global attributes are used as ultimate fallback just in case some mail clients decide to ignore or strip inline styling.
Also, in (kinda) complex mail layouts that image element will probably be inside some table in which case table element must also have same set of properties inline and inside media query for it to be responsive.
Useful link: CSS support across mail clients
Emails as HTML do not support CSS (at least not all email clients support this feature yet). You'll have to use the old-school HTML stuff such as <img src="some-URL.png" width="100" height="200">
btw, you may also try to use inline style attribute on the HTML tag itself. It might works for some email clients.
Check out this post for "best-practices" with emails and HTMLs
Most email clients have terrible support for CSS. Most clients strip the of your email template so you shouldn't include important CSS in there. It could also be the fact that certain clients strip class names from email, or reformat them, or refuse to understand media queries or a myriad of other possible issues.
The solution is to simply write all CSS inline on each and every element. Regular max-width: 100% and height: auto should be sufficient.
There are tools that convert an external set of styles and class names to inline styles. That does prevent you from using media queries so make sure you don't depend on them to render your email.
Edit: Since you seem to be using Mailchimp, have a look at their article on CSS in HTML emails.
Does anyone know of any alternate styling I can use to make this mobile compatible? I'm pretty sure it has something to do with the height value but I can't just get rid of it because the part that php call runs into my text without it.
<section style="width:100%; float:left; height:100px; clear:both;" >
<section class="campaign_statistics" style="background-color:#EFEFEF;">
<?php include('progress_chart.php'); ?>
</section>
</section>
Have you seen http://cssmediaqueries.com/
Media queries allow you to do separate stylesheets for certain screen resolutions. For example, you can have one stylesheet that runs for desktops, one for laptops and one for mobile devices.
You can then specify different styling for objects that relate to the stylesheet and screen resolution you are trying to style for.
I am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?
To post some code here is my media query:
#media screen and (max-width: 600px) {
.topbar{
opacity: 0;
}
....
}
I would say do some more research on building your CSS but to answer your question:
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>
It might be an idea to load different css files for different screen sizes; essentially moving the media selection from the css to the html:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">
You might want to read Detect different device platforms using CSS for some related content.
Generally you want to aim to use the same .html file for your website, then use CSS to customise specifically for desktop or mobile. I know you may have very different ideas for the two sites, but it can all be done in pure CSS if your markup (html code) is good enough. Check out the CSS Zen Garden for how powerful CSS can be.
If you want to completely reset your css for the mobile site, just wrap the old css in a media query targeting screens screen and (min-width: 601px), and you will find your mobile site is completely unstyled
css has nothing to do with loading different index files according to the browser width.
If you want to style your elements differently using #media rules, make sure they are set close to the bottom of the page, in other words - after the main styles, because otherwise - they will be simply overwritten.