I'm coding up HTML for an email that would be viewed both in Outlook and in mobile devices. I'd like to use tables for Outlook (I need a multi-column set up), and single column divs for mobile devices (or anything < 400px).
I'm trying to do this with #media queries, and I know Outlook's CSS support is extremely shoddy, but I'm wondering if anybody knows a hack that can make Outlook "ignore" the #media query for < 400px, and apply styles for the >400px part. I tried this:
#media (max-width: 480px)
{
.mobile-email { background-color:green; }
}
#media (min-width:500px)
{
.mobile-email { background-color:red;}
}
The trouble seems to be that Outlook ignores both. Is there any way I can make this sort of a thing work in Outlook?
Thanks in advance!
In all honesty I'd steer well clear. HTML emails are a horrile horrible business. Adding media queries into the mix is asking for trouble.
Blackberrys don't support media queries for a start...
http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails
Outlook barely even does standard CSS since it switched it's rendering engine to MS Word's.
Check out this site about email standards support for more information. I still use inline styles and tables in HTML emails as it's still the most consistent way of getting results (which in 2013 is pretty terrible)
The best practices would be to do inline css for background color. Your writing a class that does not work a cross the border. Some devices like script this way some like script this way. For example when you a responsive email that calls for a hidden: border; most devices and browser will do as the media queries call. However Android gingerbread does not do a hidden border. An iphone will do hidden the border. Outlook 2013 will do hidden the border but yahoo won't do it. For what your doing background colors for Outlook 2007 and 2010 need to have that inline You would want it to read Text here
Am hoping that will help you.
Related
Okay, let me be specific: I do NOT want to base this on screen size because new mobile devices with bigger and better viewports are coming out all the time. Also, I am quite reticent to use JavaScript to detect this because many mobile devices still fail to support it (Yes, I'm looking at you, iOS Safari & Opera Mini)
It seems obvious to me that CSS3 media queries ought to have a parameter that detects whether the media being used is a cell phone, tablet, or PC. Does anyone know what that might be?
The reason I ask is that while converting my site to Google's mandated RWD, I want to use CSS to show a button that just calls my business from mobile phones, but a button that links to a "Contact us" page on PCs. And as a theoretical purist / mathemagician, I don't want to have to serve different mobile site pages than PC pages. I want it all unified under the Godhead of RWD thru pure CSS.
Thank-you so much for humoring my perfectionism and contributing as able.
:)
Debbie
There's no direct CSS-only way to detect if a device can place calls. However, more often than not, these devices are held in an upright position, so you could possibly target them with an orientation:portrait media query. Just keep in mind that this approach could produce some false positives with some tablets or other devices, so you should probably add a width restriction too. Here's what might work for you:
#media only screen and (orientation: portrait) and (max-width: 479px){
/* place your css here */
}
Here's a handy CSS3 media query guide: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
This may generate some false positives and false negatives. In general phones have touche screen pointer: coarse and does not have the hover: none capability. Some tablets can't make calls but it will be detected here, and you can use a mouse with your phone if it supported and that will make it undetected as a phone.
<html>
<meta charset="utf8">
<head>
<style>
#media (hover: none) and (pointer: coarse) {
.has-phone {
display: block;
}
.has-no-phone {
display: none;
}
}
#media (hover: hover) and (pointer: fine) {
.has-phone {
display: none;
}
.has-no-phone {
display: block;
}
}
</style>
</head>
<body>
Call US
Contact US
</body>
</html>
Unfortunately, no. There's no media query value to be able to detect whether a device can make calls or not and, even if there was, it probably wouldn't always be accurate or would give you unintended side effects. For instance, my desktop browser can make calls via Google Voice, but if clicking on contact launched GV to make a call I would curse you to the ends of the Earth.
Using handheld doesn't work because not all phones identify themselves as handhelds (in fact most id as screen), and some tablets could as well.
Ultimately, if the two click options are a must and javascript is a must not, your best bet for the most accurate (though as you note, not 100% accurate) selection of phone vs other is to use a size query.
All of this being said, I think that if you investigate further, you'll probably find a design solution that can accommodate both use cases in an elegant way. One button that is used differently in different contexts is likely to be frustrating - particularly for users who visit the site on different media and are expecting consistency.
I use some CSS media queries on my Ektron site. They function correctly on the iPhone, but when I try simulating smaller screens on my production site, the breakpoints don't kick in.
Here's the strange part (to me, at least). When I view the site on my development server, the breakpoints work like a champ. The big difference is that on my dev server I've disabled CSS aggregation and minification. So it would appear that something about the css.register method in the framework API is (partially) breaking my responsive CSS. As I said, it seems to work correctly on mobile devices, but I would really like to know why it's not working on the desktop.
I've seen posts referring to minification routines used by certain platforms which break media queries (for example, they remove the word "and"). But that doesn't appear to be happening.
Has anyone else experienced this?
Here's a CSS snippet:
#media only screen and (min-width:320px) and (max-width:767px) {
/* phones, handhelds smaller than iPad */
#subnavbg {
visibility:hidden;
}
.login-left
{
border: none;
width: 100%;
}
.login-right
{
width:100%
}
}
CSS aggregation combines multiple CSS files together. If there is a syntax error in one file, it can affect all the other files that are aggregated with it. Browsers can ignore some syntax errors like a missing close } at the end of a file. However when that file is combined with other files it becomes a problem.
Try opening each css file in Visual Studio and check for errors.
I'm trying to find as reliable a method as possible to hide content from mobile email clients.
Ideally the solution will hide content by default from devices that don't read media queries, but display on desktop clients that also don't read media queries.
For now I'm using code derived from another post to hide the content and then I use a media query to turn it back on. I've seen a lot of reverse posts here with solutions for hiding content on the desktop, which helped.
The issues with my current solution are:
On Gmail desktop content isn't showing even though the "display: block !important" in the query has the !important declaration
This doesn't work for Outlook 2003 or below because they don't read media queries
Doesn't work on Yahoo and AOL Mail on desktop because I believe they don't read media queries
Wrapper div to hide content on mobile:
<div class="desktop" style="width:0; overflow:hidden;float:left; display:none">
Current media query override to turn content on for tablets,desktops:
#media only screen and (min-width: 768px) {
.desktop {
display : block !important;
width : auto !important;
overflow : visible !important;
float : none !important;
}
Gmail doesn't support the style tag, so media queries will not work. Same goes for all of these clients (you mentioned a few of them).
There are a few tricks where you can target some specific clients by using CSS that is not supported in others, (plus mso tags for Outlook). For desktop vs mobile, you're pretty much stuck with media queries, which are not fully supported themselves.
As you've linked in the question, you can try combinations of max-width and/or min-width media queries. You could also try device-pixel-ratio in your media queries to isolate devices. That is pretty much all you have to play with unless you want to use floats or fluid layouts.
CSS display is not supposed to be supported in Gmail according to CM's CSS support chart (full pdf), but if it is in fact hiding your content, you won't be able to override the inline declaration due to the lack of style tag support. This issue would have been there with the other non style tag supported clients anyway...
Not really a solution, but I hope this clarifies things a bit.
If I base my CSS on mobile styling, then use #media queries for gradually larger displays (tablets, desktops etc), will the mobile devices use the desktop styles?
I believe that typically, mobile devices will load all images even if they don't apply to its own particular media size. Meaning it will load all images and hide ones not matching its query-based stylesheet.
What I am trying to do is use one background for the larger version of the site:
.splash {
background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}
and another for the mobile version:
.splash {
background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}
If I apply the mobile CSS before any media queries, and add the large media CSS below using a query like #media screen and (min-device-width: 481px) {...}, will mobile devices load the large image too?
Behaviour is browser depended but iOS Safari and Android Chrome will respect the media queries and only download the background images for the applicable media queries.
If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.
If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later.
One thing to watch out for is display:none on content images as it won't prevent download in many situations. Tim Kadlec explores this more here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Tim Kadlec has put together some awesome research for this – Media Query & Asset Downloading Results
Your specific question is answered in Test #4 – results are spotty. Better to have media queries for both your images.
This sounds like it would be largely browser dependant, but I'd imagine any mobile browser worth its salt would try to cut down on data usage by not loading images (and possibly not loading entire stylesheets) that are marked as not for it. Furthermore many mobile browsers prefer to not be recognized as mobile browsers. I know I hate it when I pop open a site on my iPad and a mobile-stylesheet forces me to view a skinny sliver of single column site on my 9.7" screen.
So media queries are unreliable, but still worthwhile (they really don't hurt anything, so long as they're used responsibly), and that doesn't help what is a fairly obtuse (but still good) question; time to do some testing!
Most modern desktop browsers come packaged with developer tools. My current favorite is FireFox's dark and pretty web inspector (the 3D view is especially to die for). But what about on Mobile? The largest parts of your mobile audience will not be on browsers that come with developement tools.
Well, you have a couple options:
Firebug Lite has some mixed results on mobile browsers, but is
an excelent choice in most cases where other inspectors are
unavailable. It does seem to work in iOS and other mobile
browsers with HTML5 support, though.
This question suggests using something called "weinre". I've never used it, but it looks legit enough.
If you're okay with targetting just a few certain browsers, many DO include developer tools. Such as Google Chrome for Android!
Whatever you choose, you'll be looking for an asset viewer of some sort; perhaps a timeline view. Any sort of tool that will allow you to see what the page loaded, in what order it loaded it, and how long it took to load.
Good luck!
I'm having some issues with css and inline styles on an email campaign I'm doing.
Firstly I ended up cheating a bit in that I was hiding elements (display:none;) to make them appear in the right order when using the #media css. The issue here was when displaying on a desktop isp (gmail) it ignored the (display:none;) and ended up showing double content in places. So to the double content disappear I used (display:none !important;) which then affected the mobile version.
There are some mobile templates I've seen online which don't appear to have had much testing as they simply do not work across multiple mail clients.
The code is here if anyone has any suggestions or help http://www.makeyourownmarket.com/test/test-doc.html
Some tips for responsive emails:
Put your !important declaration on all of your #media only screen and (max-width: 480px) CSS
Think of workarounds, if display:none; isn't working, try width:0;height:0; on your inline CSSand then override with width:100px !important;height:100px !important; in your mobile styles
You will need to do extensive testing, having an account/device for all the significant email clients is the best, but http://www.emailonacid.com works in a pinch.
I'd recommend doing a little more research into HTML emails and their limitations.
This article is a good starting point:
http://kb.mailchimp.com/article/how-to-code-html-emails
Some tips:
Don't place CSS in a STYLE tag as this won't work across all email clients.
Use inline CSS only
Use Tables for layout
I would be very surprised if media queries would work consistently in email clients. I'd avoid trying to use those and instead concentrate on creating a basic, solid email template which displays consistently across the most popular email clients.
I dont think responsive design is the right way for emails. Usually emails are made inside the table because of many mail clients. You could find more about this here Nettuts