HTML para correo electrónico ~ Utilidades para Webmasters

Convertir CSS a CSS inline para enviar HTML por correo

Los servicios de correo basados en webmail como Gmail o Hotmail no son muy amigables a la hora de interpretar las Hojas de Estilo cuando se definen entre etiquetas.
Por eso es que la mejor solución es escribir CSS inline, lo cual; puede no ser una práctica cotidiana.
La siguiente aplicación: Convert CSS Styles to Inline for Emails se encarga, como dice el autor, de "hacer el trabajo sucio".

Documento HTML con Estilos


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test CSS HTML</title>
<style type="text/css">
body {
  margin: 25px 25px;
  font-family: verdana, tahoma;
  font-size: 10px;
  color: #333333;
  background: #ffffff;
}
p {
  margin: 11px 5px 3px 11px;
  line-height: 1.5em;
  text-align: justify;
}
p#biggens {
  font-size: 75pt;
}
p.tinyred {
  text-align: center;
  text-weight: bold;
  color: red;
  font-size: 9px;
}
</style>
</head>
<body>
<p>plain old paragraph</p>
<p id="biggens">This here is some huge text</p>
<p class="tinyred">All tiny and red</p>
</body>
</html>

Documento HTML con Estilos inline


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Test CSS HTML</title></head>
<body style=" margin: 25px 25px; 
font-family: verdana, tahoma; font-size: 10px;
color: #333333; background: #ffffff">
<p style=" margin: 11px 5px 3px 11px; line-height: 
1.5em; text-align: justify">plain old paragraph</p>
<p style=" margin: 11px 5px 3px 11px; 
line-height: 1.5em; text-align: justify; 
font-size: 75pt">This here is some huge text</p>
<p style=" margin: 11px 5px 3px 11px; 
line-height: 1.5em; text-align: justify; 
text-align: center; text-weight: bold; color: red; 
font-size: 9px">All tiny and red</p>
</body>
</html>

Esto representa una buena utilidad para aquellos que escriben Newsletters o lleven a cabo un el diseño de un Stationary.
Para los ocupados y preocupados por las pautas y recomendaciones de W3C, les comento: si el código fuente original, es válido para el Servicio de Validación de Marcado de W3C, el resultado también lo es.

Utilidades para Webmasters

jueves, 20 de diciembre de 2007