Como maquetar un email

Maquetar haciendo compatible nuestro diseño con IE6, 7, 8, Firefox, Safari etc es siempre un dolor de cabeza pero cuando se trata de maquetar correos electrónicos la cosa se complica aún más y aquellas cosas que no se deben hacer en páginas web se vuelven se vuelven obligatorias en correos. Veamos algunos tips

Maqueta usando tablas

Pues si aqui las tablas funcionan mejor y hasta es recomendable usar esos métodos de corte con Photoshop o Fireworks que considero primitivos y poco confiables además procura mantener lejos los textos de los gráficos.

No hagas diseños complicados

No se te ocurra usar diseños con PNG 24bits, cosas que requieran hacks, position fixed y otros trucos que a duras penas funcionan en navegadores como IE6, en lectores de correo son casi imposibles y no uses muchos gráficos que sea lo mas liviano posible.

Usa estilos en linea

Siempre he recomendado el uso de hojas de estilo externas o separar el diseño de la programación pero cuando se trata de correo olvídalo no todos soportan usar estilos en la cabecera sino que debemos usar estilos en linea como este:

No uses javascript

Olvidate por completo del javascript, por lo general este es bloqueado o aparecerá con mil advertencias de seguridad que ningún usuario se atreverá a intentar abrirlo.

Haz un diseño elástico o pequeño

Cuando hablamos de páginas web hay ciertas resoluciones estándares cuando se trata de correos electrónicos nada de eso existe con uno 500px de ancho debe ser compatible con el 95% de clientes de correo aunque nunca se sabe.

Pueden encontrar un muy util cuadro sobre que características son soportadas por los diversos clientes de correo AQUI

Acelerando nuestra página web

Cuando hacemos una página web debemos considerar que a nuestros visitantes no les gusta esperar mucho tiempo para ver un sitio, si demora más de 15 o 20 segundos es probable que prefieran ver otro sitio. Veamos algunos tips para mantener agil nuestro sitio, es importante desarrollar imaginando que todos tienen una muy lenta conexión de prehistoricos modems de 56Kbps

Flash inmensos

Yo se que estaba muy de moda tener intros de flash muy espectaculares pero luego de 2 o 3 visitas ya nadie quiere verlas y menos aun esperar a que carguen asi que siempre es conveniente ponerles un boton “Saltar Intro” u olvidarnos de ellas y tal vez colocar un banner o un encabezado vistoso suele resultar más efectivo.

Usando CSS

Nunca debemos usar un CSS independiente por cada página de nuestro sitio, debemos usar una hoja de estilos global asi se cargará una sola vez y luego se compartirá entre todo nuestro sitio. Este suele ser un error muy común en aquellos que empiezan a programar usando Dreamweaver aunque no sólo es un tema de dar velocidad sino que ayuda a mantener coherencia en el diseño de todo el sitio.

Además podemos optimizar nuestro código CSS para pasar de algo así:

A algo mucho más optimizado como esto:

Es más rápido invocar imágenes via CSS además tiene la ventaja que estas se guardan en cache y nuestro sitio funcionará más rápido sin embargo no es conveniente abusar de este recurso ya que podría jugar en nuestra contra.

AJAX Frameworks

Muchas veces usamos un script que de un efecto, otro para otro pequeño efecto, hacemos llamados AJAX con gigantescos y confusos códigos, todo eso resulta innecesario ya que usando uno de los tantos frameworks existentes(mootols, jquery….) pueden realizar esos trabajos con pocas lineas de código, asi que resulta absurdo querer reinventar la rueda eso no sólo le dará velocidad a nuestro sitio sino a nuestra programación.

Optimizando imágenes

Este es uno de los puntos claves ya que las imágenes suelen ser los elementos más pesados de nuestro sitio, debemos usar cada formato para lo que fue creado

• JPG: Este es el formato por excelencia para fotos con la calidad alta(60) basta no requerimos usar la muy alta ni la máxima ya que crecerá el tamaño y dificilmente alguien puede notar la diferencia, si somos fotografos y si es un factor muy relevante mejor usamos una imagen a baja calidad y un link para los interesados en la version de alta resolución
• GIF/PNG 8: Estos formatos son similares y son los más adecuados para imágenes de pocos colores o imágenes que originalmente eran vectoriales como logotipos, botones, barras, etc con un máximo de 256 colores
• PNG 24 bits: Este es un formato que guarda fotos sin perder calidad y hasta permite semitransparencia pero es muy pesado y no soportdo adecuadamente por IE6(aun con hacks) asi que su uso debe ser mínimo

Remover código innecesario

Cuando se desarrolla un sitio se crean cabeceras y comentarios muy utiles para los desarrolladores si trabajamos en equipo o para nosotros mismos pero cuando la página esta completa, los comentarios terminan resultando inútiles y consumiendo espacio en los archivos asi que es mejor eliminarlos o al menos reducirlos al máximo dejando solo aquellos estrictamente necesarios.

SEO Cambiar el titulo de mi sitio afecta posicionamiento

En Internet hay muchos mitos sobre que afecta o no el posicionamiento, veamos cuando realizas una búsqueda en google este recoje principalmente 2 factores el titulo y la descripcion (metatag) adicionalmente también puede recoger parte del contenido del sitio esto es porque a Google le interesa mucho la suma de esos 3 factores y prácticamente no le interesan los keywords asi que es conveniente mantener un título de nuestro sitio acorde a nuestras palabras claves y si contamos con páginas internas o un blog podemos probar con cosas asi:

mi sitio servicio1, servicio2, servicio3

Eso sin exagerar ya que un titulo demasiado extenso tampoco es indexado bien por google así como tampoco usar el mismo título para todas las páginas internas del mismo sitio.

Otra buena opción para SEO es usar el titulo de nuestro sitio y el titulo de la pagina tal como ocurre usualmente en los blogs

mi sitio | Acerca de Nosotros

Si usamos un carrito de compras o un catálogo virtual recordemos que la gente no va a buscar nuestra tienda sino nuestros productos asi que deberiamos tener un titulo como este

mi tienda | categoria XXX
mi tienda | mi producto XXX modelo XXX

Finalmente no es buena idea cambiar constantemente los titulos de las páginas dentro de nuestro sitio ya que allí están nuestas palabras clave y google podría terminar duplicando pagina y a la larga borrándolas todas.

CSS Estilos para nuestras tablas parte 2

Anteriormente postee sobre como aplicar estilos a las tablas, voy a dar algunos tips adicionales, por ejemplo si tenemos una tabla que muestra docenas de resultados y al final un boton editar, borrar u otro es un poco dificil que el usuario acierte con la fila correcta igualmente si tenemos por ejemplo una tabla de notas con nombres de alumnos y promedios resulta un poco complicado ver cual es cual, pero esto tiene una solución simple con la pseudo clase hover, algo asi:

Con ese pequeño extra hacemos que cada vez que pase el mouse por una fila esta cambie de color de fondo para resaltarla, se le puede agregar más variantes por ejemplo que además cambie el color de letra, todo es cosa de jugar con el CSS.

Encontré una página con un montón de ejemplos de tablas y estilos, basta darle click al nombre del estilo y este cambiará y podemos descargalos fácilmente AQUI

Web Modular PHP AJAX parte 2

En la primera parte de este tutorial expliqué como hacer funcionar una web modular donde el contenido cargara dinamicamente sin recargar la página usando AJAX sin embargo sólo funcionaba con links del menú y no con links que estuvieron dentro de las páginas cargadas.

Hacer funcionar ajax en links internos

Ese código funciona con el menu pero para que funcione incluso en links de páginas cargadas usando AJAX debemos usar el evento LIVE de jquery para ello basta modificar una línea de código.

¿Cómo hago funcionar el código si uso anclas?

Esto es más complicado ya que hay que calcular la ubicación de las anclas y generar un scroll