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
Related
Do you think the hiding particular content from the mobile version of a website can harm your SEO? I have a page that has around 3 long paragraphs of content. On the desktop, this looks fine - but on a mobile there is far too much content before being able to click my categories on the page. What I've decided to do is write a media query to hide all but the first paragraph in this section. Could Google think that I'm trying to use black-hat techniques or would they understand that my content is visible on mobile?
Thanks!
The {display:none} tag within your CSS for the para you're trying to hide will be read by Google. But the question here lies whether they will consider it after parsing the media query.
Highly doubtful considering they read "present" code and do not read multiple instances of it, as recorded spider data is mainly the code on your HTML page without considering the ifs and buts of CSS & JS.
IMO, you should not be penalised for this as long as your content is unique and you're not indulging in any black-hat tactics.
Maybe you need this one for hiding content for mobile devices.
#media all and (max-width: 479px) {
.content .mobilehide{
display: none;
}
}
<div class="content">
<p class="mobilehide"> This will hide on mobile version </p>
</div>
It's hard for most of us to know at what point Google will draw the line and say that your site is breaking cloaking rules.
Maybe take a look at this forum post on Google's Product Forum for a little more info.
I know this type of question has been asked a 1000 times, and 99% of the time someone hurries in and gives media queries as the solution. It no longer is the optimum answer.
The Situation: I have video in the background on a webpage - that does not render on a mobile device, so I want to use an agent to detect mobile and simply swap the css page to a mobile friendly version.
Please do not post a media query as the solution because my cell phone is 800x1200 and my tablet is 1900x1200, more than my desktop:1600x900 so a media query wont work.
Hoping someone can post an entire solution with the agent and insert where the css reference goes becuase I dont want to mess that up..
Im presently using an agent that redirects to a separate mobile page but that means maintaining 2 pages vs. one with stripping css instead. (1 page and 2 css files)
I think many here will find this answer helpful as many with this question have no answer.
thank you..
PS - please be detailed Im a noob.
thanks
If your using http://code.google.com/p/php-mobile-detect/ something along the lines of the code below should work.
<?php
include 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if ($detect->isMobile())
{
?>
<link rel="stylesheet" type="text/css" href="mobile.css">
<?php
}
else
{
?>
<link rel="stylesheet" type="text/css" href="noneMobile.css">
<?php
}
?>
Very simple example but would work in your case. You could go into more detail with $ddetect->isTablet() etc, full list here http://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect
In direct defiance of the question, I'm going to say that as of 10/12/21, Media Queries are absolutely an option once again, as in most situations they will work.
If you're looking to target the page width, you'll use the following. This is a quick fix, and most likely is the main reason for OP's question, as it doesn't address the fact that some devices have resolutions shared by desktops, yielding a mobile experience on desktop, or vice-versa.
#media (max-width:400px)
To circumvent this, you want to use the following to check for the device width instead:
#media (max-device-width: 400px)
This deals with the DISPLAY size, versus the webpage size. It's not perfect, but combining this with device heights, and vendor-specific queries, you can fix most situations with CSS. The bonus is that you can keep the web page optimized without needing extra JavaScript or PHP, or any other additional web technology, and for the fringe cases, you can use the options provided here.
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.
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.
Best practices in normal web development call for putting your styles between style tags or loading a style sheet; however, I've found out that several email clients will ignore any style tags and only execute inline styles (www.campaignmonitor.com). I can deal with that, but I'm not sure if CSS supports inline media queries. I would like my email to display a little different on the desktop. Is something similar to this supported?:
<div id="myDiv" style="#media screen and (max-width:480px;){ color:black; }"></div>
HTML emails are an entirely different beast. You need to code them like it is 1999. Use a very limited set of tags and make sure all or your styles are inline. Use tables for your layouts.
To make use of media queries you need to do both.
What I recommend doing is to first create your email with all inline styles. Then when you are happy with it you can add support for mobile.
To add support for mobile add the media queries to the head tag and use !important to override any inline styles.
Here is an example:
Optimizing for mobile email
Here is a helpful chart that details which css support for email clients.
http://www.campaignmonitor.com/css/
I don't think they work inline like that, you would probably have to embed the stylesheet in the HTML email template itself (e.g. <style>#media {...}</style>).
Even that seems like a VERY dodgy thing to rely on. HTML emails are a huge pain in the ass because standards and CSS support are about a decade behind and there is massive variation among popular email clients in terms of which properties and types of styling are supported.
In general keeping it simple and using old school table based layouts with all inline CSS is the way to go. Campaign Monitor has a great chart of support for various CSS properties in major email clients and devices.
A common workaround to the problem of HTML not rendering correctly in email clients is to do the best you can and have a prominent link at the top that says: "Email not displaying correctly? View it in your browser."
Ray Kurzweil's weekly newsletter blast does this, and it's very well formed, and well done, and I always read it. (It's a brilliant blend of content and presentation).