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!

Esto incluye pero no se limita a:

- Yahoo
- Gmail
- AOL
- Windows Live Hotmail
- Outlook 2007
- Outlook 2003
- Lotus Notes
- Thunderbird
- Entourage
- Mac Mail

¡Pero espera – hay más!

Algunos de estos clientes de email tienen versiones múltiples, cada una de las cuales hará el render del CSS y HTML de forma diferente.

Esto es parte de un HTML siendo rendereado por la versión antigua de Yahoo.

Aquí está exactamente el mismo email siendo rendereado por la nueva versión de Yahoo.

Diferencias sutiles, debo admitir. Pero suficientes de esas diferencias sutiles resultan en un diseño descuidado. Y si eso no es suficiente… el navegador de internet del usuario también puede jugar un papel en cómo se renderea tu diseño.

Ahora, antes de que arrojes tu computador por la ventana con frustración… los siguientes pasos te pueden ayudar a descartar la mayoría de los problemas en las pruebas.

Diseña Tus Emails Para Que Degraden Con Gracia

Me sorprende ver a algunos de los anunciantes más grandes rompiendo reglas de usabilidad básicas acerca de los email en HTML.

Aquí hay algunos lineamientos para tener en cuenta:

• Nunca confíes en las imágenes para comunicar información importante… especialmente una de gran tamaño. Una gran mayoría de los clientes de email tienen las imágenes desactivadas por defecto. A menos que el usuario tenga cierta iniciativa… le habrás enviado un lindo mensaje en blanco.
• Nunca confíes en las imágenes de fondo para hacer legible el texto. Asegúrate de que tu texto tiene suficiente contraste con o sin las imágenes activadas. Outlook 2007, por ejemplo, no mostrará las imágenes de fondo en las celdas de las tablas incluso si las imágenes están activadas.
• Entrega un enlace para las personas que tienen problemas viendo tu mensaje. Ok, esto no es absolutamente necesario – pero es una buena idea darle a tus suscriptores la opción de ver tu mensaje en su navegador web (especialmente si es un diseño particularmente pesado en HTML).
• Usa etiquetas ALT en las imágenes importantes. ¡No puedo enfatizar esto lo suficiente! Con las imágenes deshabilitadas por defecto, las etiquetas ALT descriptivas son tu última mejor oportunidad de convencer al usuario para que active las imágenes.
• Cuando uses etiquetas ALT, reduce el desorden. Completa las etiquetas ALT que importan y deja las otras en blanco (Nota: ¡No he dicho que las excluyas!)

Este es el encabezado de un email que recibí de Discovery Health:

Tomé esta screenshot desde mi cuenta de Gmail – antes de activar las imágenes. ¿Ves cómo el texto ALT “bullet” y “spacer” se interponen?

Agregar etiquetas ALT a elementos que sólo sirven para propósitos de diseño desordena el diseño y distrae de tu mensaje.

¡Usa Tablas Para Estructurar Tu Layout

¿Ah? ¿Pasé todo este tiempo aprendiendo CSS y ahora tengo que volver a las tablas? Cuando se trata de diseño para email, las tablas son lo mejor como si fuera el año 2003 – son lo más cercano que tenemos a los estándares.

Unas pocas cosas que tener en cuenta:

• Asegúrate de configurar todos los atributos de tabla disponibles donde sea posible. Eso incluye el cellpadding, cellspacing, borde, valign, ancho y alto.
• Las tablas anidadas son tus amigas. Asegúrate de usar la sangría apropiada para un código limpio y fácil de leer.
• Usa el atributo de fondo en una celda de tabla para configurar imágenes de fondo. Esta es la manera más fácil de sobrepasar los fondos que no se vean en Gmail.

Nota: Tus imágenes de fondo se comportarán como si estuvieran en mosaico… así que planifícate de acuerdo a eso.

• Toma en cuenta que las imágenes de fondo aplicadas a tablas o divs no están soportadas por Outlook 2007. De hecho, la única manera de usar una imagen de fondo en Outlook 2007 es aplicándola el cuerpo del email, lo cual por supuesto no está soportado por otros clientes de email como Gmail, Yahoo, o Windows Live Hotmail. Fantástico, ¿verdad?

Yo tampoco lo pensé así.

¡Usa Estilos Inline Cuando Codifiques Tu CSS

Algunos clientes email populares ignoran el código dentro de tus etiquetas de encabezado. Gmail y Hotmail son culpables particulares que se vienen a la mente.

Con tu layout configurado en formato tabla, es hora de aplicar estilos a tu texto e imágenes. Aquí hay algunas pistas y trucos para asegurar que tu mensaje se vea casi idéntico en cada navegador:

• Usa etiquetas de saltos de línea como reemplazo al padding vertical. Para alterar la cantidad de espacio que consumen, intenta rodearlas con tags de span y configura un tamaño de fuente mayor o menor.
• Usa estilos inline repetitivamente y a menudo. Aplicar una etiqueta de fuente a una tabla madre no significa necesariamente que será traspasada a todas sus hijas. Asegúrate de configurar estilos inline en todos tus elementos HTML.
• Aplica estilos inline detallados a los enlaces. Especialmente para los usuarios de Gmail – debes configurar estilos específicos para cada enlace. De otra forma, heredarán la fuente por defecto, tamaño y color configurada en cada navegador del usuario.
• Rodea tus imágenes con tags de span y configura los atributos de las fuentes para estilizar tu texto ALT de acuerdo a ellas. Esto te permite estilizar tu texto ALT, haciéndolo más legible cuando las imágenes están desactivadas.

¡Usa el Formateo de la Bandeja de Entrada de Gmail Para Tu Provecho

¿Sabías que la línea de asunto de cada email enviado a una cuenta de Gmail está seguido por los primeros fragmentos de código de texto dentro de ese email en particular?

¡Por qué no usar eso en tu provecho!

Arriba hay una imagen de mi bandeja de entrada de Gmail.

Ambos boletines tienen el mismo contenido de encabezado.

Sólo una diferencia – El Boletín 1 saca provecho del formateo de la bandeja de entrada de Gmail.

Aquí está cómo lo hice:

Inserta una imagen de 1px por 1px como el primer elemento en tu email. Rodea la imagen con etiquetas de span configurando el color de la fuente con el mismo color del fondo. Cualquier texto que pongas en las etiquetas de ALT para tu imagen de 1px por 1px ahora reemplazará ese fragmento de código de google en la bandeja de entrada del usuario.

¡Es tan simple como eso! Esta sutil diferencia destacará tu mensaje del resto de los emails en la bandeja de entrada del usuario.

¡Entonces, ¿Ahora Qué?

He hecho mi mejor esfuerzo para compartir algunas cosas que hago cuando creo emails en HTML. ¡Es tu turno! ¿Cómo lo haces para diseñar, codificar y probar tus campañas de email?

Cualquier recomendación, pista o truco que quieras agregar será muy apreciada por la comunidad de tus compañeros diseñadores.

(Fuente: artículo de nettuts.com escrito por Bob Ricca y traducido por Sara Salazar para nerv. )

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.

Recientemente me di cuenta de esto mientras modificaba el diseño de Trendfo. Una gran parte de los visitantes del sitio estaban utilizando navegadores más pequeños, causando que una imagen bloqueara parcialmente algunos de los anuncios, dándome menos clicks y, en definitiva, menos ganancias desde el sitio.

Tomar en cuenta los navegadores más pequeños significa que todos tus visitantes están felices y encuentran la información que necesitan.

3. No considerar los Frameworks

Si estás desarrollando un layout en CSS desde cero, puedes querer preguntarte por qué. Tal como no hay nada nuevo bajo el sol, lo mismo ocurre en CSS. Existen bastantes frameworks de CSS como Blueprint framework y los 960 CSS Framework. Estos son creados para ayudarte a hacer layouts “a prueba de balas”, sin tener que comenzar algo desde cero. Estos layouts tienen compatibilidad con todos los navegadores y han sido probados rigurosamente. Realmente, a menos que estés haciendo algo completamente radical que necesita montones de código personalizado, tan sólo usa un framework de CSS.

¿Para qué reinventar la rueda?

4. No utilizar clases genéricas

Puede ser muy fácil no pensar en el futuro cuando se está desarrollando un sitio web. A menudo nombramos nuestras clases de CSS de forma diferente cada vez que desarrollamos un sitio, en vez de hacer una clase CSS simple que podamos reutilizar repetidamente a lo largo de nuestro diseño, sin tener que escarbar en lo que usamos antes. Esto asegurará que el diseño de nuestro sitio se mantenga constante a través de los cambios de un diseño.

Puedes utilizar una clase genérica como:

1

.right{float:right}

Para mantener las cosas flotando hacia la derecha cuando quieras que lo hagan. Así puedes dejar el estilo de DIV ID como:

1

Usualmente utilizo por lo menos tres clases genéricas cuando estoy construyendo el diseño de un sitio:

1
2
3

.clear{clear:both} 
.right{float:right} 
.left{float:left}

5. No validar el HTML

Apuesto que no sabías que validar el HTML podía también afectar tu CSS, ¿verdad? Bueno, puede hacerlo. Primero que nada, no puedes validar tu CSS hasta que tengas un HTML válido. Segundo, hay muchas instancias en las que tu HTML puede estar causando tus problemas, en vez de tu CSS. A menudo creemos que es nuestro CSS el que está afectando el layout, cuando de hecho es una porción de HTML mal formado el que hace que el layout se vea desarmado. Un DIV sin cerrar aquí, un clase CSS mal etiquetada… podría ser cualquier cosa. Asegúrate de que tu HTML esté correcto antes de siquiera intentar diagnosticar un problema con el CSS.

6. No validar el CSS

Yo solía molestar constantemente a un amigo para que me ayudara con problemas de CSS mientras intentaba sacar adelante mis diseños. Él cada vez me preguntaba con paciencia “¿Está validado el CSS? Si no, ¿cuáles son los errores?” No pasó mucho tiempo hasta que aprendí a validar el CSS antes de pedirle ayuda a Thomas después, y usualmente validarlo resolvía mi problema.

Si tienes un código CSS válido, tienes muchas más probabilidades de que tu CSS sea mucho más compatible con los navegadores y sea menos propenso a romperse.

7. Utilizar imágenes de fondo gigantescas

A menudo los nuevos diseñadores utilizan imágenes de fondo demasiado grandes en sus layouts. Por ejemplo, utilizan una imagen de fondo de 3,000px x 5,000px para abarcar cualquier tamaño de navegación posible. En vez de utilizar una imagen realmente grande, ellos deberían usar una imagen realmente pequeña que se repita con un toque de magia en CSS. La diferencia es enorme: en lugar de cargar una imagen de 200kb, podrías cargar una imagen de tan sólo unos pocos bytes de tamaño y hacer que el CSS la repita por todo el fondo.

Si tienes una imagen de fondo que es muy grande, estás perdiendo de dos maneras:

• Significa que estás utilizando ancho de banda innecesario.
• Estás haciendo que el visitante espere más tiempo para que cargue la imagen.

A veces una imagen de fondo grande es inevitable, especialmente con la reciente tendencia de diseñar layouts web ilustrativos. Sin embargo, usar imágenes repetidas o colores sólidos en el fondo es una práctica mucho mejor.

8. Utilizar CSS para todo

Cuando la gente recién conoce una tecnología, se emocionan con ella y quieren usarla en todas partes, incluso cuando puede realmente ir contra aquello que funcionará mejor para el proyecto.

Como desarrolladores web a veces podemos vernos atrapados en querer que la tecnología haga algo avanzado y específico, cuando de hecho podemos usar una tecnología diferente y mucho más fácil. Por ejemplo, a veces es mucho más fácil utilizar una tabla para organizar datos que hacer un layout complicado basado en CSS con DIV’s flotantes y cosas así. Tenemos que recordar, la razón por la cual usamos tecnologías como CSS es porque esta debe acelerar el tiempo de desarrollo. Cuando comienza a realentarnos, entonces quizás estamos exagerando un poco.

9. Utilizar CSS Inline

Este es un pecado capital para los desarrolladores web, y ocurre más frecuentemente de lo que uno quisiera saber. Si estás construyendo un diseño, casi siempre querrás mantener el CSS y el HTML separados. Esto asegura que cuando (nótese que no dije “si es que”) decidas cambiar el diseño del sitio, no tengas que revisar el HTML de cada layout y encontrar el CSS defectuoso incrustado en un elemento inline.

En vez de usar esto:

1

<a href="somewhere.html" style="float: right; color: #333333">link</a>

Deberías mover todo lo que tenga que ver con el estilo a una hoja externa de estilo como esta:

1

<a href="somewhere.html" class="link_style">link</a>

El CSS inline debería evitarse casi siempre. Es fácil de usar y es genial para hacer pruebas, pero aparte de eso probablemente no lo querrás en tu código de producción.

Siempre que no se esté diseñando una plantilla para correo. En ese caso el uso de CSS inline es casi obligatorio para que los lectores de correo tanto de escritorio como en web representen correctamente la plantilla

10. Utilizar demasiados archivos

¿Alguna vez has visto un diseño con 12 archivos CSS diferentes adjuntados a él? Es una pesadilla para cualquiera que intente hacerle cambios a tu layout. No sólo eso, también demora el tiempo de proceso de cada archivo, ya que el navegador tiene que hacer una solicitud para cada uno de ellos. Es mejor utilizar un esquema CSS simple que use 1 ó 2 archivos. El tiempo gastado en compilar 12 archivos versus un archivo único es bastante significante. No sólo eso, le ahorrarás a la siguiente persona que haga cambios a tu layout un montón de líos.

¡Nadie quiere abrir 12 archivos para realizar un simple cambio en el ancho del sitio!

(Fuente: artículo de nettuts.com escrito por Glen Stansberry y traducido por Sara Salazar para nerv. )

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.

¿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.

¿Cómo funciona?

El truco es muy sencillo. Básicamente sólo tenemos que añadir un gradiente PNG de 1px (con transparencia alpha) sobre el texto.

Las etiquetas HTML:

<h1><span></span>Texto con gradiente css</h1>

El código css:

El punto clave esta aquí: h1 {position: relative} y h1 span {position absolute}

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}

h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Y esto es todo! Puedes ver varios ejemplos en la web del artículo: ejemplos

Como hacer que funcione en IE6

IE6 no es capaz de interpretar bien las propiedades de los PNGs transparentes. Necesitamos el siguiente hack para que muestre correctamente la transparencia:

h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}

Desventajas

• Este truco solo conviene usarlo con elementos con un color de fondo sólido. El color del gradiente (imagen png) de ser el mismo que el color de fondo del elemento.
• Se necesita un hack para poder aplicar la transparencia del gradiente en IE6.
• Si la imagen de gradiente es mas alta que el encabezado el texto no será seleccionable.

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.

Cuando confíes en los floats para el layout, asegúrate que lo hacen correctamente.

Los floats son delicados, y no siempre hacen lo que esperas que hagan. Si te encuentras en una situacion donde un float se extiende pasado el border de su contenedor, o simplemente no se comporta como esperas, asegurate que lo haces corréctamente. Puedes consultar el tutorial de Eric Meyer de todas formas.

Solapamiento de márgenes; aplica padding o border para evitarlo.

Habrás luchado con el espacio en blanco extra donde no quieres que lo haya, o con la ausencia de éste donde quieres que sí lo haya. Si usas margenes probablemente te suceda. Andy Budd lo explica acertadamente.

Trata de evitar aplicar padding/border y un elemento con anchura fija.

IE5 interpreta mal el box modeling, lo que significa varias cosas. Hay opciones sobre esto, pero es mejor evitar el problema aplicando el padding al elemento padre en vez de al hijo que es el que tiene la anchura fija.

Evita importar el contenido de css directamente al html.

Si usas @import para añadir las reglas de un CSS externo a tu html, mas tarde o mas temprano te encontrarás con FOUC. Es decir, habrá un instante en que mientras la pagina se está cargando, esta aparecerá sin formatear, en texto plano. Este efecto puede ser evitado.

No confies en min-width en IE

IE no lo soporta. Pero puedes usar width hasta cierto punto como si fuera un min-width, jugando un poco puedes conseguir el mismo resultado.

Cuando dudes, disminuye la anchura.

A veces errores de redondeo causan que cosas como 50% + 50% den como resultado 100.1%, lo que significa romper el layout en algunos navegadores. Intenta bajar de 50% a 49% o incluso 49.9%

El contenido no se visualiza correctamente en IE?

Probablemente este sufriendo el Peekaboo bug, especialmente si no aparece nada cuando pasas el raton por encima de un link. Visita Position is Everything para corregirlo.

Ten cuidado al usar estilos en los links, si son anclas.

Si usas un ancla en tu codigo () ten en cuenta que tambien le afecta los :hover y :active. Para evitar esto, necesitarás usar id para las anclas o aplicar estilos con una sintaxis un poco mas reservada :link:hover, ,:link:active

Divide y vencerás: comenta grandes porciones de código para eliminar opciones.

Especialmente útil si se trata de un CSS que no has creado tu. Comenta media parte del CSS y si el problema continua, entonces comenta la otra mitad. Sigue este método hasta llegar a una parte pequeña de código dnd el problema sea facilmente identificable.

Recuerda “LoVe/HAte” (Amor/Odio) para los links.

Cuano especifiques las pseudoclases, hazlo en este orden: Link, Visited, Hover, Active. Cualquier otro orden no tendra consistencia. Puedes usar :focus también, y modificar el orden a LVHFA ( o “Lord Vader’s Handle Formerly Anakin��? , como propuso Matt Haughey)

Recuerda bordes “TRouBLEd” o mejor, como las aujas de un reloj.

Los atajos para definir bordes, margenes y paddings tiene un orden específico. Siguiendo el movimiento de las aujas de un reloj, empezando desde arriba, Top, Right, Bottom, Left. Por tanto margin: 0 1px 3px 5px, resulta sin margen superior, 1px para del dercho, y asi sucesivamente.

Especifica unidades para los valores distintos de 0.

Css requiere que especifiques las unidades de tus cantidades para fuentes, argenes y tamaños. (La única excepción es line-height, que no requiere unidad) El comportamiento de cualquier navegador cuando no se han especificado las unidades puede ser impredecible. Cero es cero y no necesita unidades, por ejemplo: padding: 0 2px 0 1em.

Prueba diferentes tamaños de texto.

Navegadores avanzados como Mozilla o Opera, permiten escalar el texto de tu web, sin importar el tamaño que hayas usado. Algunos usuarios tiene una fuente mas grande o mas pequeña que la que has puesto tu, intenta probar un rango amplio de tamaños para ver el comportamiento del layout.

Manten mayúsculas y minúsculas de la misma forma para el CSS u el HTML

Algunos navegadores son case-sensitive. Usando una clase como “homePage” no hay ningun problema. Aplicar estilos a “homepage” puede causar problemas en navegadores estrictos como Mozilla.

-Añade bordes que se vean bien para que te ayuden a depurar.

Por ejemplo, usando una regla como div {border: solid 1px #F00} podras observar el principio y fin de la capa, para detectar espacios en blanco, solapamientos, etc. Efectos que de otra menera no resultarian tan obvios. También puedes usar colores de fondos.

No uses comillas para indicar la ruta de la imagen.

Cuando coloques una imagen de fondo, y le indiques la ruta donde se ubica el archivo, resiste el impulso de poner comillas, no son necesarias y IE5/Mac te lo agradecerá sin estrangularse.

No linkes a una CSS vacia, como un indicador de que en ese lugar habra una CSS para lo que sea.

El IE5 de Mac sufre con ello y relantizará la carga de la página. Puedes comentar la linea mejor.

Y a continuación algunas recomendaciones a la hora de desarrollar:

Organiza tu CSS

Asegurate de crear bloques de información mediante lineas de comentario por ejemplo.

Los nombres de las clases y los ID deben ser de acuerdo con su función, no a la apariencia.

Si creas una clase .azulypequeño, y más tarde quieres que el texto sea grande y rojo, la clase pierde todo el sentio. Mejor usa nombres mas descriptivos como, .copyright y .comentarios

Combina selectores

Manener tu CSS ligero es importante para minimizar los tiempos de carga, tanto como sea posible, agrupa selectores, usa la herencia, y reduce la redundancia con atajos.

Considera la accesibilidad cuando uses la tecnica de intercambio de imagen.

Usar fondos de imagenes para reemplazar texto tiene problemas por todos conocidos en algunos dispositivos, o en lugares donde está desactivada la opción de mostrar imágenes. Existen varias alternativas.

(Libre traducción de un artículo encontrado en Mezzoblue, que aunque no es nuevo, sigue siendo interesante)

Espero que os haya sido útil este artículo, y como siempre si veis que podéis añadir algún dato más o alguna corrección, en los comentarios podéis hacerlo. Actualizaré el texto convenientemente.

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;
}