Recently I worked on a HTML Email project and couldn't find many helpful blogs, websites, especially with suitable examples. Most of the information was either scattered around or just not useful. So here I am, trying to put all that I learnt, in a gist. Hope you would find it helpful.
3. Use widths, font-size in pixels(px) for every <td>.
<td style='width:200px; font-size:12px;'></td>
4. Mobile Devices:
Use ids instead of classes for media queries. Also, accessing them as div[id="main"]
prevents Yahoo! Mail from reading the query styles and rendering them.
Outlook 2007-10 also doesn't render CSS2 selectors ( div[id='main'] { .... } ), hence use
CSS1 i.e. div { .... } .
@media only screen and (max-device-width: 480px) {
5. Mobile Devices:
Using % for table width messes the scaling in Iphones.
6. Use cellpadding, cellspacing on a table, instead of padding. (reference)
<table cellspacing="0" cellpadding="0" border="0" width="400">
1. Use <table> for content, instead of <div> as they are difficult to style. If need be, use <div>
to enclose a <table>.
to enclose a <table>.
2. Mobile Devices:
Always use px, instead of %. Min-width & max-width for most mobile devices is around
550-600px.
Desktops, laptops or large screens:
% can be used when entire body width needs to be considered.
Desktops, laptops or large screens:
% can be used when entire body width needs to be considered.
@media only screen and (min-device-width: 481px) and (max-device-width: 767px) {
/* css for most Androids */
}
@media only screen and (max-device-width: 480px) {
/* css for Iphones */
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* css for Ipads */
}
<body width='100%' min-width='600px' > ....</body>
3. Use widths, font-size in pixels(px) for every <td>.
<td style='width:200px; font-size:12px;'></td>
4. Mobile Devices:
Use ids instead of classes for media queries. Also, accessing them as div[id="main"]
prevents Yahoo! Mail from reading the query styles and rendering them.
Outlook 2007-10 also doesn't render CSS2 selectors ( div[id='main'] { .... } ), hence use
CSS1 i.e. div { .... } .
@media only screen and (max-device-width: 480px) {
div[id='main'] { .... }
}
5. Mobile Devices:
Using % for table width messes the scaling in Iphones.
6. Use cellpadding, cellspacing on a table, instead of padding. (reference)
<table cellspacing="0" cellpadding="0" border="0" width="400">
