This whole thing is based off this "simple" structure:
js fiddle - http://jsfiddle.net/sollenne/HE8LY/
live example - http://sollenne.github.io/jcp/email/index3.html
Here is a live example of template 1 - http://sollenne.github.io/jcp/email/
Here is a live example of template 2 - http://sollenne.github.io/jcp/email/index2.html
In Action - http://sollenne.github.io/m/emails/global_collect/thanks.html
In Action 2 - http://sollenne.github.io/m/emails/rate_us/
If you happen to test in another email environment or have an update or question, email me at [email protected]
1. Quickly familiarize yourself with tables.
2. Not every email client supports @media. In fact, most do not.
3. Do not show/hide multiple divs with the same content intending to switch them out with media queries. Some emails will render both and you will look crazy. On the same note, don't have one complete email template for one size and another template for a different size expecting one to show and one to hide. Again, some emails will render both and you will look even crazier. Code as if everything you write will show up in an email, eving if you dont intend it to.
4. All styles need to be inline. The only exception is media queries
5. The more media queries you use, the more complicated it gets. I only have one in these templates and that was confusing enough.
6. Images obviously must be publicly hosted.
7. I use http://placehold.it for my placeholders I stongly recommend it.
8. use doctype:
The page will most likely delete or replace your fancy html5 <!doctype html> or any doctype for that matter.
9. Don't use html5, css3, js, jq, less, external stylesheets or anything fun or cool. (except @media)
edit: I noticed gradients and border radius are working in most email clients these days. Use a generator so you get all that delicious modern browser support.
I use http://www.colorzilla.com/gradient-editor/ for gradients and http://border-radius.com/ for border radius.
10. Don't use Margins, Yahoo! and Hotmail don't like them. Don't use div's unless it's strictly for semantics (styles), just use a span tag in this case (practice what I preach, not what I do).
11. Style linked images with style="border:none;" or border="0"
12. width="100%" works fine but some email clients align this to the left even when using align="center". You should declare a width on each table. Either way, you should be consistent. Make them all the same.
13.Microsft Outlook needs special code for some things called VML. Here is a generator for background images and buttons with VML support.
• background images - http://emailbg.net/
• buttons - http://emailbtn.net/
I am lucky enough to have access to Litmus https://litmus.com, however, this may be too expensive for the average bear. Alternatively you can use Safari and press Command+I (or whatever the equivelant is on a PC). This will open a new email in your default email client. Then just send it to as many emails as you can and test away. I would get your company to pay for Litmus though.
- Apple Mail for desktop - Snow Leopard & Mountain Lion
- Apple Mail for iPad & iPad mini - iOS6, iOS5
- Apple Mail for iPhone - iOS6, iOS5
- Android Mail - v4
- Gmail app for Android
- Gmail app for iPhone
- Gmail.com for desktop
- Gmail.com for mobile - Hotmail.com for desktop
- Hotmail.com for mobile
- MS Outlook 2003, 2007
- mail.AOL.com for desktop
- mail.AOL.com for mobile
- mail.Yahoo.com for desktop
- mail.Yahoo.com for mobile
- Yahoo! Mail iPhone app
- MS Outlook, 2010, 2013
- Yahoo app for Android
- Hotmail app for Android
- Windows phone
- Microsoft Surface
- Android tablets
- Kindle Fire
- Gmail app for iPhone
- Gmail app for Android
- Gmail.com
- Hotmail.com
- Hotmail.com on iPhone
- Yahoo app for iPhone
- mail.Yahoo.com for desktop
- mail.Yahoo.com for mobile
- mail.AOL.com for desktop
- mail.AOL.com for mobile
- all Gmail
- all AOL
- MS Outook 2007
- MS Outlook 2003 defaults to a wider font, may cause widowed words or links.
- MS Outlook 2007 adds inconsistent horizontal spacing between tables. Content functions the same.
- Hotmail iPhone app completely fails to properly render the most basic email.
Copyright (c) 2012 Rich Sollenne, Sollenne Technology LLC, Sollenne.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.