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).
Related
I've read one place that aural stylesheets are no longer in use? Is there something that has replaced them? I'm sure something is being used to make things easier for those who are visually impaired?
If aural CSS is in use still, is there a way to specify what should be said in a specific place, similar to using "alt" for images? For instance, I'm using an iconfont for my logo. I'd like to be able to have the user hear the name of my company, but because it's just done with a span, there's no place in that particular span that indicates the words (I'm assuming here that the system reads the words displayed on the screen, and not all the code with it, so obviously this works better if there's actual text to read). Maybe include a content: 'whatever text you want' is added somehow?
The gist is that I'm working on a site about opera for a client, and the client would like for the content to be accessible to everyone. And obviously someone with visual impairment is going to be especially wanting to hear things.
1. Is there a replacement for aural?
Aural stylesheets have indeed been deprecated as of CSS3. Major browsers such as Firefox removed the implementation a while ago. There is still a speech media included, but I haven't seen any implementations so far (it just seems to be a proposal at this point).
Many people with visual impairments use screen readers and to a lesser degree refreshable braille displays to view the content, so you usually don't have to worry about a direct implementation of speech. Important points for that to work are:
People have to be able to navigate through your content using the
tab key
All relevant rich content such as images etc. need to have a text equivalent.
Your html should be semantic (have a look at the aria attributes)
2. How can you make icon fonts (and other non-legible items) accessible?
In this article on bulletproof accessible font icons they propose a pretty good solution:
Since the characters don't have any direct semantic meaning, you could include them in the :before pseudoclass of your span:
.logo:before {
font-family: YourIconFontFamily;
content: "★";
}
And then include the company name directly in the span:
<span class="logo">Your company<span>
According to W3 it's defined in CSS 2 - but is already been deprecated with CSS3. You also can have a look at the Speech module: http://www.w3.org/TR/css3-speech
You can use another span with the specific content only for the screen reader which would look something like:
<span aria-hidden="true">Here could be your company name</span>
Source: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/
When developing a web-based email system, is there a generally accepted correct way to handle style sheets on incoming emails? I am referring to the <style tag. Not referring to #import or <link notation.
These stylesheets have to be restricted to only the element containing the foreign email, or else they will also adjust the content of your own system, which is a big no-no.
I am aware that I should sanitize scripts and stylesheets, which will allow me to prevent url background images, or fixed position elements that would cover parts of my system.
I would not want to drop the stylesheet completely, so I see these options
Convert style sheets to inline styles
Put the entire foreign email in its own div with an ID, and change the style rules to only affect that div (for example a,b{color:purple} would become #foreign a,#foreign b{color:purple})
Are either of these good ideas? Is there an obvious/better way that I am missing? What is common/accepted/robust?
Email doesn't support external style sheets, so all CSS on a html email is in the page style tag, or inline. As it is standard for clients like gmail and yahoo to strip the style tag, and everything else outside the body tags, you could simply do the same. Limiting incoming emails to inline styles will keep all CSS local to those elements. It is pretty much email design 101 to inline the css, so you don't have to worry about your email system being less than what is standard.
Web clients also strip many CSS elements in addition to this. Don't want someone adding position:fixed; for example as it would break out of the viewing pane. The best reference for what CSS is allowed in each client is Campaign Monitor's CSS guide.
I think the best idea is use inline styles. I have made may web sites that send styled html email and inline styles is the only thing tha work in most email sistemas.
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
Email clients are limited in their HTML display capabilities.
What HTML markup and CSS styles is it safe to use in HTML-formatted email?
In general you want to stick to 10+ years old HTML.
Avoid trying to link to external stylesheets and avoid styles in the HEAD.
Use inline styles.
Use HTML tables for layout.
Industry standard is to stick to width of 600px or less for your email content.
This is a good guide: http://kb.mailchimp.com/article/how-to-code-html-emails
Some useful links on this subject detailing which clients support what markup and style:
http://www.campaignmonitor.com/css/
http://www.email-standards.org/
Places you can get help building cross-client HTML e-mail:
https://www.mailrox.com/
https://www.getfractal.com/
The title is really just the shortened version of the question. I'm aware of Gmail's limited CSS support, but I was reading "Guide to CSS support in email", which has a note for Gmail's support of .class and #id selectors:
(!) Works in some instances if CSS is inlined before or during campaign import
What does this actually mean as far as CSS support is concerned? To me, it sounds like it's just suggesting to use a preprocessor to take any style declarations and apply them to the matched elements.
Is there a trick to being able to use CSS classes in an HTML email in the Gmail client?
Gmail will only use CSS that is inline. It will not allow internal or external style sheets. Or rather I have found its support to be unreliable at best. Use this tool to do to convert internal and external style into inline for you:
http://inlinestyler.torchboxapps.com/styler/
It even tells you how well your document is supported in different email clients. This will allow you to develop in a more sane fashion, and only convert it at the end.
Gmail does support .class and #id selector and internal style sheets (meaning tags) at the moment. You should keep in mind that some of the styles are modified by Gmail. You can't for example use negative margins or box shadows atm.
I'm not sure about external style sheets though. I haven't tested those.