[ View menu ]
27 Ago 08

10 consejos para escribir emails HTML

En MailChimp, publicaron 3 templates HTML para email gratuitos. Pero además, armaron una lista de consejos a tener en cuenta para escribir emails HTML. Me tomé la libertad de traducirlos y republicarlos. Espero que alguien le sirvan.

  1. Codificá los emails HTML en un editor de texto plano. De esa forma vas a obtener el código mas limpio posible. No uses editores WYSIWYG ni esperes que el Microsoft Word exporte código HTML limpio. Incluso algunos filtros de spam van a penalizar tu email si lo creaste en FrontPage. Mejor usa el NotePad, o el TextEdit.
  2. No te vuelvas loco escribiendo CSS. Usá CSS embebido y evita el posicionamento con CSS. Las tablas funcionan mejor.
  3. Diseñá para el panel de previsualización del cliente. El panel de previsualizacion de cualquier cliente de correo es mucho mas angosto que una página web común y corriente. Menos de 600 pixeles es generalmente una buena guía. Alinea los elementos a la izquierda, y asegurate que el logo y contenido mas importante se “asome” en la parte izquierda de tu template.
  4. Evitá poner JavaScript, ActiveX, Flash, video embebido, archivos de sonido, o DHTML. Los virus generalmente van ocultos en ese tipo de archivos, asi que los programas antivirus van a bloquearlos.
  5. Las imágenes tienen que estar subidas a un servidor web, y las rutas de las etiquetas img tienen que ser absolutas.
  6. Los clientes de Webmail (Yahoo, MSN, Hotmail, Gmail, etc) generalmente borran el código HTML que está encima y por debajo de las etiquetas BODY (y también las etiquetas BODY). Por lo tanto:
    • BODY BGCOLOR no va a funcionar. Mejor crea una tabla al 100% de ancho con tu color de fondo, y embebé tu template adentro.
  7. El código CSS dentro del HEAD no va a funcionar. Embebé CSS debajo de la etiqueta BODY, justo encima del contenido.
  8. TODOS los programas de email desactivan las imágenes por defecto. El destinatario tiene que clickear un botón “Mostrar Imágenes” para verlas. Esta es una característica por defecto y no puede ser apagada. Además, el destinatario tiene que estar muy motivado para clickear ese botón. Por lo tanto:
    • No diseñes emails en HTML que contengan solo una imagen grande. El destinatario no va a ver nada (y los filtros de spam no pueden leer contenido, asi que van a asumir que el email es un spam).
    • Tomá los reportes estadísticos de email entre comillas. La mayoría de los sistemas de seguimientos de campañas de email utilizan gifs transparentes, y cuentan cuantas veces la imagen fue impresa. Si tu destinatario tiene desactivadas las imágeners, el gif no va a ser descargado.
  9. Siempre hay que incluir una versión de texto plano (plain-text) en tus emails. Esa es la versión que va a mostrarse si el destinatario no puede (o no quiere) ver emails HTML.
  10. Probá los emails todo lo que puedas, en todos los clientes y servicios webmail como sea posible. Acordate que la forma en que cada cliente de email muestra el HTML es muy distinta, y el testeo va a ser tu única garantía
13 Ago 08

Catarata de Keywords

En estoy días estoy desarrollando un spider sencillo para un motor de búsqueda. Es un script PHP basado en la clase PHP Snoopy que lee una url dada, y levanta los metatags description, keywords, la etiqueta title, nada complicado.

Testeando el script con distintas páginas, me estoy encontrado cada cosa! Sobre todo me doy cuenta que la mayoría del código html que anda dando vueltas es bastante feo. Sin etiquetas meta, sin doctypes, código lleno de basura, tablas y funciones javascript kilométricas, en fin pobre google!

Lo que me ha hecho reír mucho esta mañana, es la selección de palabras clave para el metatag keywords que cuidadosamente ha elegido la gente de la editorial Ediciones del Boulevard para atraer -como moscas- a los visitantes.

<meta name=”keywords”
content=”Editorial, publicar libro, literatura, cuento, novela, poema, escritor, escritores, Maradona, diario, noticias, argentina, córdoba, politica, sexo, deportes, futbol, salud, notas, tango, newspaper, news, breaking, argentine, politics, economy, sports, soccer, updated, daily, journalism, clasificados, avisos, Pamela David, Ingrid Grudke, Pampita, Depresión, solidaridad, el gordo agustín, armenio, judío, puto, vacaciones, hollidays, universidad, universitaria, distribución gratuita, alta córdoba, nueva córdoba, cerro de las rosas, argüello, villa allende, fotos, patas, feetfetish, footfetish, fetish, feet fetish, foot fetish, latex, inmobiliaria, madre teresa, hora oficial, programación, alive, exiliado, historia, che guevara, gandhi, sex, anteojo, kirchner, menem, de la sota, riutort, Luis Juez, el diego, carlos paz, corrupción, patomotor, medicina, abogacía, google, altavista, mail, yahoo, hotmail, superman, comics, dibujo, diseño gráfico, UBP, UES21, UCC, UNC, Universidad Nacional, tetas, culos, teta, culo, pene, pito, pija, gay, foto, photo, gallery, foro, forum, index, forro, profiláctico, preservativo, condón, nikon, canon, coca cola, sprite, marihuana, mariguana, cannabis, cocaína, brownie, mc donald’s, burguer king, cursillo de ingreso, Spiderman, Harry Potter, links, Córdoba Capital de la Cultura, La Voz del Interior, La Mañana de Córdoba, Hoy Día Córdoba, Anisacate, despeinados, bitacoras, blogger, blog, Emilia Attias, Peguelé hasta dejarlo morado, hosting gratuito, young, babes, historia, Historia Argentina, Mortadelo y Filemón, Código Davinci, Dan Brown, viajes, Caribe, Bruselas, Villanueva de la Vera, Viagra, Peter North, Online Dictionary, MySpace, Music, Lyrics, Games, Quizzes, Prom Dresses, Funny Videos, Funny Pictures, Jokes, President Bush, Iraq, Bird Flu, Port controversy, Iran, Dana Reeve, Barry Bonds, American Idol, World Baseball Classic, Academy Awards, St Patrick’s Day, Poker, Pam Anderson, Britney Spears, WWE, Stacy Keibler, Pokemon, Linday Lohan, Neopets, Virtual Pets, Dr. Seuss, Mardi Gras, Paris Hilton,
Mother Theresa, KaZaA, Dragonball, Jennifer Lopez, Diets, Astrology Tips, Winter Olympics, Mundial de Fútbol, American Idol, NBA “>

No se les quedó ni una en el tintero. Al principio viene bien la cosa: Editorial, Publicar, Libro.

Después se pone más divertido: feetfetish, marihuana, american idol, paris hilton…
El momento cumbre viene con una palabra clave que jamás se me hubiera ocurrido: “Peguelé hasta dejarlo morado” … ???!?!!? Esa si que no me la esperaba, investigando veo que es un libro publicado por la editorial. Menos mal! ya estaba pensando cualquier cosa.

Si, seguro que este spider me va a divertir bastante.

05 Ago 08

Cómo validar páginas con PHP SESSION habilitada?

A veces, al validar una página que utiliza sesiones nos encontramos con que la página no valida porque estamos utilizando sesiones, y el servidor automáticamente agrega el ID de sesión a cada link.

Los links se reescriben automáticamente y quedan, por ejemplo, de esta forma:

<a href="index.php?lang=1&PHPSESSID=6a715…47b19">Change</a>
 

El problema que vamos a encontrar es que el ampersand &, para el validador debería hacer referencia al inicio de una entidad HTML como ñ, ó, á, etc. Y al aparecer solo el &, el error es que ese nombre no hace referencia a ninguna entidad. La solución es codificar la letra & como entidad html en las URLs, o sea:

&amp;

Si el link lo escribimos nosotros, lo cambiamos fácil:

<a href="index.php?lang=1&amp;PHPSESSID=6a715…47b19">Change</a>

Si el ID de SESSION es agregado automáticamente por el servidor, tenemos que modificar el php.ini:

arg_separator.output = "&amp;"

Y si no tenemos acceso o no queremos modificar php.ini, le agregamos esta línea al inicio del script php:

ini_set(‘arg_separator.output’, ‘&amp;’);

La página ahora es válida… y si sigue dando errores, el problema está en otro lado.

05 Ago 08

Rueeeeedas Pugsley!

Aunque últimamente lo hago muy poco, me gusta mucho andar en bicicleta y salir al campo.
Estuve viendo las ruedas estilo Pugsley.
Se ven espectaculares para caminos irregulares, se usan bien desinfladas.
surly-pugsley3.jpg

Quiero unas!

29 Jul 08

A List Apart. Encuesta 2008

i-took-the-2008-survey.gif

¿ya completaste la encuesta 2008 de A List Apart?

Siguiente » | « Anterior