Últimamente no paramos de escuchar estas palabras: media queries, responsive design, hojas de estilo para dispositivos móviles, etc. ¿Pero de qué va todo esto? Responsive design no es más que preparar un diseño que pueda adaptarse a todos los diseños, des de pantallas de 1200px a 480px. Las media queries (declaración @media) son una pequeña parte de código que añadiremos a nuestras hojas de estilo para poder realizar modificaciones específicas en el css de dispositivos móvil concretos. Esto nos permitirá mostrar u ocultar elementos, redimensionarlos, cambiar colores, etc. Vamos a ver cómo: Si queremos definir estilos específicos para un dispositivo...
Search Results for:
HTML y CSS para tus newsletters: Recetas básicas
La mayoría de los clientes de email no tienen la misma aceptación para los estándares web modernos que la que tendrían los navegadores. Crear un newsletter o campaña de email marketing y pretender que esta se vea correctamente entodos los clientes de correo no es tarea fácil. Si eres nuevo en el mundo del email (o has empezado hace poco con el html y css), aprender cómo codificar un email correctamente puede resultar un poco complicado. Cada cliente de correo tiene sus reglas y los mismos clientes de correo pueden tener diferentes reglas según con qué navegador seabran (no es...
HTML y CSS para tus newsletters: Responsive Email Design
Parece ser que ya es un requerimiento adaptar nuestro código y diseño a los dispositivos móvil. Con aproximadamente un 38% de todas las aperturas de email ocurriendo en dispositivos móvil, la portabilidad del email nunca había sido tan crucial. Los suscritores son inconstantes y abrirán los correos cuando sea más conveniente para ellos. Esto dificulta saber o predecir cuando, dónde y con qué dispositivo los usuarios abrirán nuestras campañas. Lo que sí sabemos es que nuestros newsletters deben adaptarse a los dispositivos móvil si queremos que la experiencia del suscritor sea positiva. El Responsive Email Design es una optimización del...
HTML y CSS para tus newsletters: Formato de Vínculos y Optimización de Imágenes
Puede resultar complicado conseguir que los vínculos de nuestras campañas se mantengan del color que deseamos. A menudo, los propios clientes de correo, aplicando estilos propios (azul o lila con subrayado) a los links. Para más información sobre las mejores prácticas para generar tus vínculos visita este artículo centrado en comprobar la eficacia de tus vínculos en tus campañas de email marketing. Soluciones: <span> El tag <span> es utilizado para agrupar elementos en línea de un documento. En sí no produce ningún cambio visual pero es una forma de añadir o diferenciar una parte de texto “especial” – distinto...
HTML y CSS para tus newsletters: CSS en línea y atributos de tablas
¿Por qué debemos utilizar estilos en línea? Gmail, Lotus Notes, Gmail para Android y Windows Mobile 7, son los clientes de correo que no admiten los tags en el head. Por eso utilizaremos los estilos en línea. Esto consiste en definir el estilo <style=””></style> dentro del propio tag html: <h1 style="font-family: 'Trebuchet MS'; font-weight: normal; letter-spacing: -2px; color: #003366; font-size: 32px; line-height: 32px; padding: 10px 0px; margin: 0px;"> Tu<b>NombreEmpresa</b></h1> Desgraciadamente son pocos los estilos que serán comunes en todos los clientes de correo. Reglas para el uso de estilos en línea: 1. Estilos que no admiten todos los navegadores:...
HTML y CSS para tus newsletters: Maquetar con tablas anidadas
Si quieres externalizar la maquetación de tus newsletters, visita la sección Servicios maquetación de newsletters. Aunque los divs (<div></div>) sean muy útiles y cómodos cuando maquetamos nuestros sitios web, en el mundo del email marketing no es así, ya que corremos el riesgo de que algunos clientes de correo no soporten esta opción. La mejor opción para que la maquetación de newsletters sea compatible con todos los clientes de correo es hacer uso de las tablas anidadas. Gmail, Outlook 2007 y Lotus Notes entre otros, tienen problemas con los elementos flotantes y no podemos fiarnos de los márgenes y paddings...
HTML y CSS para tus newsletters: Utilizar las herramientas adecuadas
Dreamweaver es una herramienta muy útil para la maquetación de páginas web: autocompleta el código, es una forma ágil de generar HTML, tiene una opción de diseño o pantalla dividida donde vemos al mismo tiempo el código y el diseño, pudiendo diferenciar qué partes del código hacen referencia a qué partes del diseño y podremos hacer modificaciones en él y ver cómo se reflejan en el HTML y CSS. Aun así no siempre es la mejor opción. Habitualmente Deamweaver al realizar estos pasos genera etiquetas y contenido adicional que no es bienvenido en según en qué clientes de correo. No...