Neutralizar los estilos del navegador
Una de las primeras cosas de las que uno se da cuenta cuando empieza a diseñar páginas es que las webs no se ven igual en los distintos navegadores. No estoy hablando de la bonita costumbre de las distintas versiones de Internet Explorer de pasarse las especificaciones por el forro, sino de un estilo por defecto que tienen los distintos elementos del HTML. Así no sólo las tipografías del Explorer se verán más grandes que las de los navegadores basados en motores Gecko, sino que el alto de línea, el margen de los H1 y un sin fin de detalles renderizarán de manera muy distinta dependiendo de con que programa abras la página.
En mi opinión no hay que obsesionarse con que cada página se vea milimétricamente igual en todos los navegadores, no estamos hablando de lienzos sino de pantallas, como no son fotografías sino representaciones de información. Lo importante es que todo sea accesible en cualquier navegador y dispositivo con una consistencia gráfica suficiente. Si eres un maniático lo llevas listo, siempre habrá un navegante que subirá el tamaño de la fuente para sacarte de quicio (y para leerla mejor por supuesto).
Sin embargo está en nuestra mano “resetear” estos estilos por defecto de los navegadores. He encontrado una estupenda recopilación de hojas de estilo iniciales que los corrigen y nos permiten empezar de cero. Hay unos cuantos, yo le he estado echando una ojeada a las del conocido Eric Meyer y las de Aniceto2k
El infierno del css en el email
Esta tarde he estado chateando con un amigo. Estaban el y un compañero de trabajo queriendo maquetar un pie de email. Nada complicado, unos datos y una imagen de fondo del logo corporativo a modo de marca de agua. Aunque estaba currando y lejos de mi ordenador le he estado echando un vistazo al código me ha pasado. Hacía mucho que no mandaba html en un mail, mucho menos con estilos, y casi no recordaba lo atrasados que estamos en cuanto a soporte de html y css en gestores de correo (especialmente webmails).
He estado buscando un poco de documentación a vuelapluma que no ha hecho más que corroborar esta sensación. Propiedades no soportadas, webmails que se pasan por el forro todo dentro del Head o las propiedades del Body (al fin y al cabo tienen sus propios head y body).
Os dejo el resultado de mis pesquisas para quien aún así se anime a maquetar un newsletter, yo tengo mis reticencias con el html en emails, y mucha más gente las tiene por culpa del spam y del Phising.
Lo más completito y clarito que he visto en una primera aproximación al tema, un par de artículos de David Greiner: Optimizing CSS presentation in HTML emails, y A Guide to CSS Support in Email, con tablas muy completas con lo soportado y no soportado por los gestores de correo y webmails más habituales. Gracias a él me he dado cuenta de que ni Lotus ni Gmail (usados respectivamente en la empresa de mi amigo y por mi) no soportan la propiedad background-image. Justo la que intentábamos hacer funcionar, podíamos haber estado ahí horas.
Si aún así sigues empeñado en utilizar CSS (tendrás que usar estilos en línea y cosas incómodas de ese tipo) esta discusión sobre el tema está muy bien.
