Consejos para diseñar emails

ByLuis

A la hora de diseñar los emails en formato HTML que nuestras aplicaciones enviarán a los usuarios, hay que tener en cuenta varios puntos que nos ayudarán a un diseño más correcto:

  • Olvidarse del tableless: si, aunque sea duro, es mejor volver a las tablas y olvidarse del posicionamiento y la maquetación vía CSS.
  • Usar los estilos dentro de las etiquetas: la mayoría de los lectores de correo online ignoran lo que hay entre la cabecera del HTML, por eso es conveniente usar los estilos dentro de las etiquetas.
  • No uses imágenes de fondo: aunque para un buen diseño puede ser esencial, hay algunos lectores que no mostrarán los background, por lo que es mejor no usarlos para asegurarnos de que todo el mundo vea correctamente el correo.
  • Considera las imágenes bloqueadas por defecto: por seguridad los clientes de correo bloquean las imágenes por defecto, por lo que no es conveniente usarlas para indicar el contenido del mensaje.
  • Usa el atributo alt en las imágenes: como estarán bloqueadas por defecto, es necesario indicar la mayor información posible en ese atributo.
  • Usa paths absolutos: ya que el mail se leerá en otro servidor es necesario indicar la ruta completa para que los contenidos se vean correctamente.
  • Ten cuidado con el tamaño de los archivos: a parte de que el usuario no debe esperar para poder leer el correo, algunas veces los correos con archivos pesados son considerados spam.
  • Evita flash y similares: evita el uso de flash u otros contenidos multimedia que puede que no se vean en el cliente.
  • Diseña para espacios pequeños: aunque se trate de un HTML no siempre el espacio donde se ve es amplio, piensa en dimensiones pequeñas a la hora de diseñar.

9 best practices for email design

Vía / CSS Globe

Similar Posts

Google pretende indexar AJA

ByLuis

Aunque es de hace unos días la noticia, ni me había enterado. Google pretende hacer crawlable las páginas basadas en AJAX, para que sus páginas sean accesibles por los resultados de búsqueda.

Lo que pretende es que tanto los usuarios como los motores de búsqueda puedan ver el mismo contenido, incluso que te lleve a la URL Ajax y no a una copia estática. Del mismo modo, el diseñador podrá comprobar que todo su contenido se indexa y que se reproduce correctamente.

Desgraciadamente, Google ya nos indica cómo debemos realizar nuestro AJAX para que podamos tenerlo indexado en Google, por lo que al final lo deberemos hacer tal y cómo ellos lo piden para que no nos penalice por temas de SEO y esas cosas.

Aquí nos dejan una presentación: http://docs.google.com/present/view?id=dc75gmks_120cjkt2chf

A proposal for making AJAX crawlable

Concurso: enseña a realizar una página Web

ByLuis

mdw.pngEn Maestros del Web han lanzado un concurso en el que se pide enseñar a realizar una página web. En Sentido Web nos gustan todo este tipo de iniciativas, sobre todo cuando se trata de ayudar a otros a aprender lo necesario para introducirse en el mundo del desarrollo web.

Además, me han pedido que forme parte del jurado, lo cual, a parte de un honor, es una oportunidad de aprender de los concursantes que no pienso desaprovechar.

Bases:

Necesitamos que desarrolles una página web y la publiques en cualquier espacio a tu disposición. En donde debes explicar a los internautas los pasos necesarios para crear su página web. Puedes utilizar cualquier recurso: textos, audios, vídeos y animaciones, estructurados, en un sitio web. Los contenidos deben estar en idioma español.

El material debe ser inédito, de la autoría del participante y ceder los derechos de reproducción por medio de una licencia Creative Commons de Reconocimiento 2.5 (lo que significa que todo el mundo podrá difundir tu creación una vez se mantenga tu crédito correspondiente).

A quién va dirigido:

Toda aquella persona que tenga conocimiento de publicación de contenidos en la web.

Fechas importantes:

30 de noviembre 2006 – último día de recepción de trabajos.
11 de diciembre – presentación de los 10 mejores trabajos.
15 de diciembre – anuncio del ganador.

Premio:

Un iPod de 30GB en tu color favorito.

Procedimiento:

Para participar necesitarás estar inscrito en forosdelweb.com para que tengamos tus datos. Deja un mensaje en el tema de Inscripción al concurso para confirmar tu participación.

La dirección URL del proyecto deberá ser enviada por correo a concurso(AT)maestrosdelweb.com antes del 30 de noviembre. Deberás incluir tu nombre de usuario de forosdelweb.com y una breve descripción del proyecto.

Vía / Maestros del Web

Crear ventanas tipo Netvibes con Prototype

ByLuis

Crear ventanas flotantes en HTML es una de las cosas más difíciles de realizar en una página web. En alguna ocasión hemos hablado de cómo realizar ventanas con HTML y Javascript.

En este caso se trata de una extensión para Prototype que con unas simples líneas de código seremos capaces de crear nuestras ventanas de forma rápida.

ventanas_prototype.png

Para usarlo primero nos deberemos crear la estructura HTML:

<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div>

Con sus CSS:

#page {
margin: 10px auto;
}
#widget_col_0 {
float:left;
width: 30%;
}
#widget_col_1 {
width: 50%;
float:left;
}
#widget_col_2 {
float:left;
width: 20%;
}

Instanciar la clase:

var  portal = new Xilinus.Portal("#page div")

Y por último añadir el contenido:

portal.add(new Xilinus.Widget(), 0)
// O con título y contenido
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("El texto que sea"), 1);

Prototype Portal Class

Vía / WebAppers

|

View Source Chart: extensión de Firefox para el código HTML

ByLuis

Gracias a Hugo y a otro amigo anónimo vía formulario de contacto, nos ha llegado esta extensión, que si bien podía llevar mucho tiempo, yo desconocía.

Se trata de View Source Chart, una extensión que nos devuelve el código HTML que se genera después de las modificaciones que hace el javascript del DOM.

viewcodechart.png
Por ejemplo, escribimos el siguiente código HTML:

document.write("Hola Mundo");

Nos mostrará el siguiente código HTML:

<script>
...
</script>
Hola Mundo

Muy útil para ver el código real que nos muestra el navegador, y no tener que ir destripando el javascript para saber que saca.

View Source Chart

|

Laboratorio: paginación Ajax estilo Google Reader

ByLuis

A parte de todas las funcionalidades de Google Reader como lector de feeds, una de las cosas que más me gusta es su paginación.

Carga inicialmente un número de entradas, y cuando el usuario ha acabado de verlas, vuelve a cargar más. ¿Comó podemos saber cuando el usuario ha visto la última entrada?, pues sencillo, cuando el scroll de la capa que contiene la lista de feeds está abajo del todo. Es en ese momento cuando tenemos que realizar una llamada Ajax para cargar los nuevos datos e incluirlos en la lista.

Read More “Laboratorio: paginación Ajax estilo Google Reader”

Usuarios de prueba para tus aplicaciones en Facebook

ByLuis

De lo que se entera uno, Facebook te ofrece la posibilidad de crearte usuarios de prueba para realizar tus aplicaciones en Facebook.

Mediante la API de Graph podemos entre otras cosas:

Crear usuarios

POST /app_id/accounts/test-users?installed=true&permissions=read_stream

Añadir usuarios a tu app:

POST /app_id/accounts/test-users?installed=true&permissions=read_stream
&uid=[test_user_id]&owner_access_token=[app_access_token_of_current_owner_app]

Acceder a ellos:

GET  /app_id/accounts/test-users

Eso sí, tiene ciertas limitaciones:

  • Número limitado de usuarios que puedes crear
  • Los usuarios de prueba pueden interactuar con otros usuarios de prueba pero no con usuarios reales.
  • Los usuarios de prueba no pueden hacerse fan de páginas públicas o crear contenido público como escribir en el muro de una página.
  • Pueden ser usados por los desarrolladores de la aplicación.
  • Un usuario de prueba jamás se puede convertir en usuario real.