Diseño y maquetación de emails que soporten todos los clientes de correo

otroblogmas.com — Mon, 21 Sep 2009 07:00:59 +0000

Para el trabajo, he tenido que maquetar diseños de emails. Eso a conllevado a pelearme con casi todos los clientes de correo, ya que cada uno trata los emails de manera diferente.

A la hora de maquetar o trabajar con CSS para hacer páginas web, el principal problema son los Internet Explorer, sobre todo la versión 6, que apenas cumple los estándares web. Ahora he descubierto que hay algo peor que maquetar una página web: maquetar un email. Hay muchos clientes de correo, y cada uno trata el código de los emails a su manera, haciendo complicadísimo hacer un email que se vea igual en todos los sitios posibles en los que se verá el email.

Descubro una página que contiene una gran tabla, en la se pueden ver diferentes clientes que existen, mostrando si soportan o no los diferentes estilos que se pueden aplicar en un email. Se muestran 10 clientes de escritorio (Outlook, Thunderbird, Windows Mail, Lotus Notes, …), 7 clientes web (Yahoo, Hotmail, Gmail, …) y 7 clientes móvil (iPhone, Android, Palm, …).

En la página web se puede ver la tabla de los principales 10 clientes de correo, pero en el PDF se puede ver la tabla completa con los 24 clientes. También existe una versión de la tabla en Excel.

Entradas relacionadas:

Códigos reseteadores de CSS

otroblogmas.com — Fri, 21 Aug 2009 07:00:26 +0000

Dos códigos de CSS para resetear los estilos de todos los elementos de los diferentes navegadores, para intentar obtener la máxima coherencia en el CSS posterior.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Y el segundo código es Crucial Web Hosting, que añade una serie de clases como estándares (cada uno a su gusto):

/***** Global Settings *****/
 
html, body {
border:0;
margin:0;
padding:0;
}
 
body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}
 
/***** Headings *****/
 
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}
 
h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}
 
h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}
 
h3 {
font-size:1em;
font-weight:bold;
}
 
/***** Common Formatting *****/
 
p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}
 
ul, ol {
padding:0 0 1.25em 2.5em;
}
 
blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}
 
small {
font-size:0.85em;
}
 
img {
border:0;
}
 
sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}
 
sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}
 
acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}
 
/***** Links *****/
 
a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}
 
/***** Forms *****/
 
form {
margin:0;
padding:0;
display:inline;
}
 
input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}
 
textarea {
width:100%;
line-height:1.25;
}
 
label {
cursor:pointer;
}
 
/***** Tables *****/
 
table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}
 
table tr td {
padding:2px;
}
 
/***** Wrapper *****/
 
#wrap {
width:960px;
margin:0 auto;
}
 
/***** Global Classes *****/
 
.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }
 
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }
 
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
 
.wrap          { width:960px;margin:0 auto; }
 
.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }
 
.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

ACTUALIZACIÓN: Añado un link a una página con 10 técnicas para resetear CSS: Pinceladas da Web.

Entradas relacionadas:

Otro Blog Más » css

Diseño y maquetación de emails que soporten todos los clientes de correo

Códigos reseteadores de CSS