Como muchos otros diseñadores web, yo me esfuerzo en codificar páginas web hermosas pero flexibles que se vean virtualmente idénticas en cada navegador web. Desafortunadamente, diseñar boletines de email te envía de vuelta diez años atrás. Etiquetas depreciadas, tablas, estilos inline, ¡oh, cielos! En este artículo, voy a listar seis métodos que mejorarán inmediatamente tus layouts de email.

Boletines de Email.

Como nuevo contratado en el servicio de marketing por email de AWeber, mi asignación fue crear un par de docenas de nuevas plantillas para los boletines de email en HTML de nuestros clientes. Para el diseñador web que gusta del código limpio, un email en HTML es un recuerdo de un pasado afligido. Después de semanas de trabajo e incontables dolores de cabeza, entregué el material. También aprendí mucho acerca de diseñar para email.

Para ayudarte a evitar muchos de los dolores de cabeza que tuve durante la fase de prueba, aquí hay algunas cosas que puedes hacer para crear emails en HTML que se vean geniales.

¡Crea Múltiples Cuentas de Email Para Probar!

Si sólo vas a tomar un consejo de este artículo, por favor que sea éste. Como diseñadores, pasamos mucho tiempo creando la experiencia de usuario perfecta en la web y probando esa experiencia en múltiples plataformas. Sin embargo, cuando se trata de email, demasiados de nosotros fallamos en entregar la misma atención al detalle.

Parecido a hacer pruebas para la web, crear un layout de email que se vea igual en cada cliente de email puede ser una pesadilla absoluta.
Para asegurarse de que tus suscriptores recibirán tu mensaje en la forma en que se propuso – ¡prueba en todo lo que puedas!

Leer más…

Trabajar con CSS puede parecer una batalla constante. Los navegadores siempre están cambiando la manera en que leen el código (*cof* Internet Explorer *cof*), y parece que hay un montón de pequeñas “pillerías” en CSS. Aunque es un lenguaje increíblemente poderoso, puede ser utilizado de forma incorrecta con facilidad, lo cual condenará tu desarrollo a una vida de imperfecciones.

1) Ignorar la Compatibilidad con el Navegador

Este es, probablemente, el problema número uno en desarrollo web, ya que debes tener layouts que se vean siempre igual, sin importar qué navegador esté utilizando el visitante al navegar el sitio. Este hecho a veces puede parecer la maldición de tu existencia: hay diferencias fundamentales en la manera en que Internet Explorer renderea una página, comparado con Firefox. Aunque ya no es tan grave como solía ser, todavía existe una gran diferencia entre navegadores.

Es fácil para los desarrolladores web diseñar la página en su navegador favorito y no preocuparse acerca de cómo se ve en otros navegadores de uso frecuente, ya que probablemente no se verán las diferencias. (Y soy un gran culpable de esto. ¡A veces diseño el sitio en Firefox y me olvido de revisarlo en IE hasta después de haberlo terminado!). Aunque hay algunos métodos ya probados para ayudar a salvaguardar tus diseños para el rendereo de diferentes navegadores, la mejor manera de asegurarse de que todo se ve constante es simplemente utilizar Browsershots. Browsershots entrega una instantánea acertada de cómo se ve tu sitio en diferentes plataformas y navegadores, permitiéndote estar seguro de que nada se ve distorsionado en un navegador.

2) No tomar en cuenta las resoluciones de navegador más pequeñas

Mientras que varios de nosotros, los diseñadores web, tenemos monitores de computador grandes (y estamos bastante orgullosos de ello), una gran parte de los visitantes de tu sitio puede que no. Puedes utilizar tus programas de análisis para ver las resoluciones de navegación de tus visitantes y qué tan amplio es su rango (Google Analytics hace esto de maravilla). Sin embargo, hay un mundo de diferencia en la manera en que un diseño se ve en una resolución de 1024×768 en oposición a una resolución de 800×600. Puede convertir un hermoso diseño en algo casi inútil.

Leer más…

Fabio Zendhi nos presenta iCarousel, un script bastante cómodo para hacer cajas tipo carrusel, en las que puedes mostrar textos o imágenes. Tiene varios estilos y aparte un CSS que podemos modificar.

En palabras del autor:

Uno de los problemas mas comunes de los desarrolladores web está relacionado con rotar continuamente un fragmento de contenido. Puede ser una presentación de titulares o una lista de miniaturas. La naturaleza de las cosas que rotan no importa demasiado aquí porque todos estos tipos de aplicaciones tienen una cosa en común: Rotar. Este objetivo se puede alcanzar de diferentes formas, con fundidos o deslizando. Aquí es donde iCaruosel tiene utilidad. Es un paso adelante tratando de generalizar todos estos tipos de widgets generando una presentación atractiva y de fácil construcción.

(traducción libre del artículo original en inglés: www.webdesignerwall.com)

¿Quieres crear fantasticos encabezados sin tener que exportar cada vez como imagen a través de Photoshop, Fireworks o el programa de diseño que utilices? Aquí tienes un sencillo truco css que te muestra como crear efectos de texto con gradiente a traves de una imagen PNG (puro css, sin javascript ni flash).

Todo lo que necesitas es un tag vacío de <span> en el encabezado y aplicar la imagen de fondo superpuesta usando la propiedad position:absolute de css.
Este truco ha sido testeado en la mayoria de navegadores: Firefox, Safari, Opera… Incluso en Internet Explorer 6.

Beneficios de utilizar este método en lugar de imágenes:

• Utilizamos solamente css, nada de javascript o flash. Funciona en la mayoría de los navegadores, incluyendo IE6 (para el que necesitaremos usar un hack).
• Es perfecto para diseñar encabezados. No necesitarás crear una imagen para cada encabezado con tu programa de diseño. Te ahorrará tiempo y ancho de banda.
• Lo puedes usar con cualquier fuente y el tamaño de la fuente permanece escalable.

Leer más…

Sin lugar a dudas te habrás encontrado con cosas raras que no llegastes a comprender mientras estabas maquetando el layout en CSS. Dándote con la cabeza en un muro una y otra vez..Este es un intento de hacer el proceso de diseño algo más llevadero, y tener una rápida referencia que puedas comprobar cuando te encuentres con un problema.

Cuando dudes, valida.

Cuando estás depurando el código, puedes ahorrarte algún dolor de cabeza validando el código primero. Fallos en el CSS o en el XHTML pueden llevar a errores en la visualización.

Construye y testea tu CSS en el navegador más avanzado disponible antes de testearlo en otros, no después.

Si construyes un sitio testándolo en un navegador lleno de bugs, tu código cogerá esos bugs. Cuando pruebes el css en un navegador que respeta los standards, te sentirás frustrado al ver que no muestra correctamente el layout. Asi que, parte de la perfección y ves bajando hacia los navegadores mas pobres. Tu código te lo agradecerá siendo mas standarizado desde el principio y las correcciones serán menos numerosas. Hoy en dia, hacer esto significa empezar con Firefox, Safari u Opera.

Leer más…

Cuando estamos maquetando una página en CSS, muchas veces hacemos pruebas quitando propiedades o añadiendolas para ver como quedan. Lo que se suele hacer (yo) es o cortar la linea en cuestión y si no me gusta la vuelvo a pegar, borrar y CTR+z, o comentar la linea con /* Propiedad */.

Sin embargo no se me había ocurrido simplemente añadir una “x” delante de la propiedad y ya queda anulada..si no te gusta, la borras. Rápido.

#cabecera{
padding: 3px;
xbackground-color: red;
}