Fiomega Support Center - Centro de asistencia y soporte de Fiomega

  • Inicio
  • TIENDA EN LINEA
    • Sitio web tienda
    • Productos y Categorias
    • Shipping
    • Pedidos
    • Tienda Facebook
  • Email
    • Microsoft Exchange >
      • Creando buzones exchange >
        • Creación buzones Exchange
        • Creando una lista de distribución
        • Creando un contacto Exchange
      • Configurando la zona DNS >
        • Configuración de los registros MX
        • Autodiscover y Microsoft Exchange
      • Configurando clientes de correo y dispositivos móviles >
        • Configuración Guiada - Exchange
        • Microsoft Exchange 2010
        • Microsoft Exchange 2010 >
          • Outlook para Windows
          • Outlook 2011
          • Outlook 2010
          • Outlook 2007
          • Mac Mail
          • Entourage
        • Microsoft Exchange Dispositivos Móviles >
          • Configuración simple para iPhone
          • iPhone, iPad, iPod
          • Android
          • Blackberry
          • Windows Phone
          • Samsung Andorid o tableta
        • Microsoft Exchange 2007 >
          • Outlook 2011
          • Outlook 2010
          • Outlook 2007
          • Mac Mail
          • Entourage
        • Microsoft Exchange 2007 en dispositivos móviles >
          • iPhone, Ipad, iPod
          • Android
          • Blackberry
          • Blackberry 10
        • Ingresar a Microsoft Hosted Exchange vía Web browser >
          • Ingresando a OWA
          • Filtros de Spam y correo basura en Microsoft Exchange
          • Preferencias de Spam, listas seguras y listas negras
        • Migrar de su Exchange actual a Microsoft Hosted Exhcange
        • Preguntas frecuentes Microsoft Exchange
        • Artículos Generales >
          • Folders públicos en Microsoft
    • Business Email >
      • Panel de Control - Business Email
      • Webmail - Business Email
      • Creación y edición de buzones >
        • Agregar buzones
        • Agregar Listas de Grupos
        • Crear Alias
      • Configuración DNS >
        • Actualizar MX Records
        • Glosario de Términos DNS
      • Configuracion de Email >
        • Configuración Guiada
        • Diferencia entre IMAP y POP
        • Outlook 2011
        • Outlook 2010
        • Outlook 2007
        • Mac Mail
        • Entourage
        • Mobile Sync - iPhone / iPad
        • Mobile Sync - Android
        • IMAP en iPhone / iPad
        • IMAP en Blackberry
        • IMAP en Android
      • AntiSpam y AntiVirus >
        • Funcionamiento - Filtro de Spam
        • Configuración de AntiSpam
      • Configuraciones Generales >
        • Agregar firma en Webmail
        • Configurar Alias
    • Cloud eSend - Email Marketing >
      • Antes de empezar
      • Preparando mi ambiente
      • Configurando Registros SPF
      • Creando nuestro primer Email para envio >
        • Crear Email en HTML
        • Agregar imágenes al email
        • Crear Email en formato solo de texto (No HTML)
        • Guardar Email que se esta creando
      • Agregar Suscriptores a mi listas de envio >
        • Eliminando suscriptores
        • Actualización de un usuario inscrito individualmente
        • Creando Filtros >
          • Segmentar mi lista
        • Creando listas >
          • Cómo crear una lista
      • Realizando el Envío >
        • Realizar un envio
        • Realizar Envío de prueba
        • Cancelando un envio programado
        • Integrando Google Analytics a mi envío
      • Entrega >
        • Preguntas frecuentes sobre la entrega
      • Reportes >
        • Rebotes vs. No entregados
        • Click vs. Vistas
        • Cómo interpretar un reporte de entrega
      • Recomendaciones y sugerencias >
        • Que no hacer al realizar un envio
        • Reglas Clave que causan un análisis de SPAM
        • Por qué mi envio fue rechazado
        • Hints para mejorar la entrega
        • Cómo crear formularios personalizados de suscripción
        • Email Estándars
    • Cloud SMTP - Email Transaccional >
      • Prueba de conectividad
      • Ejemplos de código >
        • Perl
        • PHP
        • Python / Django
        • Ruby
      • Integración >
        • Frameworks >
          • CakePHP
          • CodeInteger
          • Django
          • Rubi On Rails
          • Symfony
          • Zend
        • Clientes de Correo >
          • Apple Mail
          • Outlook
          • Thunderbird
        • Mail Servers >
          • Exchange 2010
          • Exim
          • Microsoft IIS 7.5
          • Postfix
          • Qmail
          • SendMail
          • Ssmtp
        • Open Sources >
          • Drupal
          • Joomla
          • Magento
          • phpBB
      • Reporte de Entrega >
        • Alertas
        • Mensajes de Error en Email
        • Reporte de envio
      • Generalidades y recomendaciones >
        • Practicas de envio y limitacioes
        • Puertos de Cloud SMTP
        • Qué es Throttling
        • Preparando una IP (Warming UP)
        • Generalidades para el diseño de correo electrónico
        • ¿Cómo diseñar un correo electrónico HTML?
      • Documentación Cloud SMTP
    • ¿Cómo realizar encabezados para Correo Electrónico?
  • Hosting y Dominios
    • Panel de Control - Cloud Web Hosting
    • Subiendo contenido
    • Configurando registros DNS
    • Bases de datos >
      • Crear y administrar una Base de Datos MySQL
      • Ingresar a PHPMyAdmin para administrar mi base de datos MySQL
      • Crear y administrar una Base de datos MSSQL
      • MyLittleAdmin para administrar mi base de datos MSSQL
    • Tecnologias - Cloud Web Hosting >
      • Administrar la tecnología de la cuenta
      • Tips y trucos para uso de .htaccess y web.config >
        • ¿Cómo puedo ver mi .Htaccess?
        • ¿Cómo puedo proteger con contraseña mi nube? >
          • ¿Cómo puedo encontrar mi Nube Linux en los Sitios web?
        • ¿Cómo niego ciertas direcciones IP?
        • ¿Como puedo evitar Hotlinking en sitios nube?
        • ¿Cómo se cambia el valor del tamaño máximo puesto?
        • ¿Cómo puedo cambiar el conjunto de caracteres por defecto para PHP?
        • ¿Cómo puedo cambiar el tiempo máximo de ejecución de PHP?
        • ¿Cómo puede PHP mostrar los errores en lugar de una página en blanco?
        • ¿Cómo puedo cambiar el tamaño máximo de carga de archivos PHP?
        • ¿Cómo puedo cambiar el valor límite de memoria de PHP?
        • ¿Cómo se cambia el valor del puesto de tamaño máximo?
        • ¿Cómo habilito listado de directorios en PHP?
        • ¿Cómo puedo dejar de ejecutar scripts PHP en un directorio?
        • ¿Cómo puedo configurar páginas de error para mi sitio PHP?
        • ¿Cómo puedo instalar mi propio módulo PEAR?
        • ¿Cómo se configura la zona horaria predeterminada para un sitio web Linux / PHP?
        • ¿Cómo puedo hacer una redirección 301?
        • ¿Cómo puedo habilitar el scripting CGI dentro de mi carpeta de raíz?
        • ¿Cómo puedo cambiar el juego de caracteres predeterminado de HTML?
        • ¿Cómo habilito Server Side Includes?
        • ¿Por qué el modo de reescritura no funciona en mi sitio?
        • ¿Cómo habilito el Listado de Directorio en ASP/.NET?
        • ¿Cómo agrego suplantación a Mi sitio Nube ASP.NET?
        • ¿Cómo puedo cambiar el documento predeterminado en mi sitio de Windows / IIS?
        • ¿Cómo habilito errores detallados en el clásico ASP y servidor de Errores secundarios en los Sitios de la nube?
        • ¿Cómo configuro customErrors en ASP/.NET en sitios Nube?
        • ¿Cómo reconstruir una aplicación ASP/NET en sitios Nube
        • ¿Cómo implementar un ensamblado Bin ASP/.NET en sitios Nube?
        • WCF e IIS enlaces
        • ¿Por qué mis HttpHandlers no funcionan para mi sitio ASP.NET en sitios de la nube?
        • ¿Cómo puedo rectificar un error de estado de vista que no es válido con una aplicación ASP.NET?
        • El modo integrado de ASP/.NET en sitios Nube
        • ¿Cómo puedo configurar 404s personalizados para ASP/.NET?
        • Modificando confianza de medios en sitios Nube
      • Uso de clientes FTP/SSHFS/FTP
    • Generalidades - Cloud Web Hosting >
      • Crear tareas programadas o Cron Jobs
  • E-Backup
    • Configurando Versión Workgroup
    • Configurando Versión Server
    • Preguntas y Respuestas
Configuración
Fiomega Email
  • Inicio
  • TIENDA EN LINEA
    • Sitio web tienda
    • Productos y Categorias
    • Shipping
    • Pedidos
    • Tienda Facebook
  • Email
    • Microsoft Exchange >
      • Creando buzones exchange >
        • Creación buzones Exchange
        • Creando una lista de distribución
        • Creando un contacto Exchange
      • Configurando la zona DNS >
        • Configuración de los registros MX
        • Autodiscover y Microsoft Exchange
      • Configurando clientes de correo y dispositivos móviles >
        • Configuración Guiada - Exchange
        • Microsoft Exchange 2010
        • Microsoft Exchange 2010 >
          • Outlook para Windows
          • Outlook 2011
          • Outlook 2010
          • Outlook 2007
          • Mac Mail
          • Entourage
        • Microsoft Exchange Dispositivos Móviles >
          • Configuración simple para iPhone
          • iPhone, iPad, iPod
          • Android
          • Blackberry
          • Windows Phone
          • Samsung Andorid o tableta
        • Microsoft Exchange 2007 >
          • Outlook 2011
          • Outlook 2010
          • Outlook 2007
          • Mac Mail
          • Entourage
        • Microsoft Exchange 2007 en dispositivos móviles >
          • iPhone, Ipad, iPod
          • Android
          • Blackberry
          • Blackberry 10
        • Ingresar a Microsoft Hosted Exchange vía Web browser >
          • Ingresando a OWA
          • Filtros de Spam y correo basura en Microsoft Exchange
          • Preferencias de Spam, listas seguras y listas negras
        • Migrar de su Exchange actual a Microsoft Hosted Exhcange
        • Preguntas frecuentes Microsoft Exchange
        • Artículos Generales >
          • Folders públicos en Microsoft
    • Business Email >
      • Panel de Control - Business Email
      • Webmail - Business Email
      • Creación y edición de buzones >
        • Agregar buzones
        • Agregar Listas de Grupos
        • Crear Alias
      • Configuración DNS >
        • Actualizar MX Records
        • Glosario de Términos DNS
      • Configuracion de Email >
        • Configuración Guiada
        • Diferencia entre IMAP y POP
        • Outlook 2011
        • Outlook 2010
        • Outlook 2007
        • Mac Mail
        • Entourage
        • Mobile Sync - iPhone / iPad
        • Mobile Sync - Android
        • IMAP en iPhone / iPad
        • IMAP en Blackberry
        • IMAP en Android
      • AntiSpam y AntiVirus >
        • Funcionamiento - Filtro de Spam
        • Configuración de AntiSpam
      • Configuraciones Generales >
        • Agregar firma en Webmail
        • Configurar Alias
    • Cloud eSend - Email Marketing >
      • Antes de empezar
      • Preparando mi ambiente
      • Configurando Registros SPF
      • Creando nuestro primer Email para envio >
        • Crear Email en HTML
        • Agregar imágenes al email
        • Crear Email en formato solo de texto (No HTML)
        • Guardar Email que se esta creando
      • Agregar Suscriptores a mi listas de envio >
        • Eliminando suscriptores
        • Actualización de un usuario inscrito individualmente
        • Creando Filtros >
          • Segmentar mi lista
        • Creando listas >
          • Cómo crear una lista
      • Realizando el Envío >
        • Realizar un envio
        • Realizar Envío de prueba
        • Cancelando un envio programado
        • Integrando Google Analytics a mi envío
      • Entrega >
        • Preguntas frecuentes sobre la entrega
      • Reportes >
        • Rebotes vs. No entregados
        • Click vs. Vistas
        • Cómo interpretar un reporte de entrega
      • Recomendaciones y sugerencias >
        • Que no hacer al realizar un envio
        • Reglas Clave que causan un análisis de SPAM
        • Por qué mi envio fue rechazado
        • Hints para mejorar la entrega
        • Cómo crear formularios personalizados de suscripción
        • Email Estándars
    • Cloud SMTP - Email Transaccional >
      • Prueba de conectividad
      • Ejemplos de código >
        • Perl
        • PHP
        • Python / Django
        • Ruby
      • Integración >
        • Frameworks >
          • CakePHP
          • CodeInteger
          • Django
          • Rubi On Rails
          • Symfony
          • Zend
        • Clientes de Correo >
          • Apple Mail
          • Outlook
          • Thunderbird
        • Mail Servers >
          • Exchange 2010
          • Exim
          • Microsoft IIS 7.5
          • Postfix
          • Qmail
          • SendMail
          • Ssmtp
        • Open Sources >
          • Drupal
          • Joomla
          • Magento
          • phpBB
      • Reporte de Entrega >
        • Alertas
        • Mensajes de Error en Email
        • Reporte de envio
      • Generalidades y recomendaciones >
        • Practicas de envio y limitacioes
        • Puertos de Cloud SMTP
        • Qué es Throttling
        • Preparando una IP (Warming UP)
        • Generalidades para el diseño de correo electrónico
        • ¿Cómo diseñar un correo electrónico HTML?
      • Documentación Cloud SMTP
    • ¿Cómo realizar encabezados para Correo Electrónico?
  • Hosting y Dominios
    • Panel de Control - Cloud Web Hosting
    • Subiendo contenido
    • Configurando registros DNS
    • Bases de datos >
      • Crear y administrar una Base de Datos MySQL
      • Ingresar a PHPMyAdmin para administrar mi base de datos MySQL
      • Crear y administrar una Base de datos MSSQL
      • MyLittleAdmin para administrar mi base de datos MSSQL
    • Tecnologias - Cloud Web Hosting >
      • Administrar la tecnología de la cuenta
      • Tips y trucos para uso de .htaccess y web.config >
        • ¿Cómo puedo ver mi .Htaccess?
        • ¿Cómo puedo proteger con contraseña mi nube? >
          • ¿Cómo puedo encontrar mi Nube Linux en los Sitios web?
        • ¿Cómo niego ciertas direcciones IP?
        • ¿Como puedo evitar Hotlinking en sitios nube?
        • ¿Cómo se cambia el valor del tamaño máximo puesto?
        • ¿Cómo puedo cambiar el conjunto de caracteres por defecto para PHP?
        • ¿Cómo puedo cambiar el tiempo máximo de ejecución de PHP?
        • ¿Cómo puede PHP mostrar los errores en lugar de una página en blanco?
        • ¿Cómo puedo cambiar el tamaño máximo de carga de archivos PHP?
        • ¿Cómo puedo cambiar el valor límite de memoria de PHP?
        • ¿Cómo se cambia el valor del puesto de tamaño máximo?
        • ¿Cómo habilito listado de directorios en PHP?
        • ¿Cómo puedo dejar de ejecutar scripts PHP en un directorio?
        • ¿Cómo puedo configurar páginas de error para mi sitio PHP?
        • ¿Cómo puedo instalar mi propio módulo PEAR?
        • ¿Cómo se configura la zona horaria predeterminada para un sitio web Linux / PHP?
        • ¿Cómo puedo hacer una redirección 301?
        • ¿Cómo puedo habilitar el scripting CGI dentro de mi carpeta de raíz?
        • ¿Cómo puedo cambiar el juego de caracteres predeterminado de HTML?
        • ¿Cómo habilito Server Side Includes?
        • ¿Por qué el modo de reescritura no funciona en mi sitio?
        • ¿Cómo habilito el Listado de Directorio en ASP/.NET?
        • ¿Cómo agrego suplantación a Mi sitio Nube ASP.NET?
        • ¿Cómo puedo cambiar el documento predeterminado en mi sitio de Windows / IIS?
        • ¿Cómo habilito errores detallados en el clásico ASP y servidor de Errores secundarios en los Sitios de la nube?
        • ¿Cómo configuro customErrors en ASP/.NET en sitios Nube?
        • ¿Cómo reconstruir una aplicación ASP/NET en sitios Nube
        • ¿Cómo implementar un ensamblado Bin ASP/.NET en sitios Nube?
        • WCF e IIS enlaces
        • ¿Por qué mis HttpHandlers no funcionan para mi sitio ASP.NET en sitios de la nube?
        • ¿Cómo puedo rectificar un error de estado de vista que no es válido con una aplicación ASP.NET?
        • El modo integrado de ASP/.NET en sitios Nube
        • ¿Cómo puedo configurar 404s personalizados para ASP/.NET?
        • Modificando confianza de medios en sitios Nube
      • Uso de clientes FTP/SSHFS/FTP
    • Generalidades - Cloud Web Hosting >
      • Crear tareas programadas o Cron Jobs
  • E-Backup
    • Configurando Versión Workgroup
    • Configurando Versión Server
    • Preguntas y Respuestas

¿Cómo diseñar un correo electrónico en HTML Autoajustable para cualquier dispositivo?


En los últimos años, el alza de uso de los móviles ha provocado una evolución, o tal vez la revolución en la forma en que nos acercamos a la entrega de contenido a usuarios en línea. El objetivo final es mostrar el correo electrónico en versión web ó móvil,  independiente del dispositivo, y esta ha generado una cantidad de mejores prácticas para lograr esto: Responsive Design, una nueva técnica que adapta su diseño a cualquier dispositivo en el que se este visualizando . Sin embargo, mientras que el espíritu en el diseño web ha cobrado fuerza, el diseño y desarrollo de correo electrónico  ha tenido problemas para mantener el mismo ritmo.

Esto se debe, en parte, al hecho de que los correos electrónicos HTML son un medio notoriamente difícil para los desarrolladores. La tecnología de cliente de correo electrónico es arcaica y la falta de normas han limitado muchas de las reglas del diseño web en estos tiempos. Lo que si es cierto es que el correo electrónico sigue siendo un importante canal de marketing y comunicación para que este sea pasado por alto. En el 2012 un informe indicó un aumento del 80% en el correo electrónico que se abre en los dispositivos móviles. En el mismo año, Campaign Monitor reveló que, por primera vez, su tasa de apertura de correo electrónico móvil ha superado realmente el uso en ordenadores de escritorio.

Obviamente, es importante llevar a cabo un análisis adecuado de su público antes de tomar la decisión de invertir en optimización móvil. Sin embargo, un diseño de correo electrónico que se autoajuste (Responsive Design) puede asegurar una excelente experiencia de usuario tanto para usuarios de escritorio y usuarios móviles - y con amplio 4G, la tendencia a la del móvil es inexorable.

Clavija cuadrada, agujero redondo

Si alguna vez ha tenido la mala suerte de abrir un fixed-width de correo electrónico en un dispositivo móvil, entonces usted entenderá la necesidad del diseño de correo autoajustable (responsive design). El Screen-bursting y los diseños de varias columnas pueden ser un poco tediosos, ya que los tamaños de las fuentes se reducen hasta el punto de ilegibilidad. Los usuarios se pueden acercar y hacer zoom en el contenido, pero esto hace que tengan luego que desplegarse hacia la izquierda o derecha y viceversa con el fin de leer el contenido. Los vínculos aparecen pequeños y no muy reconocibles, sin tener en cuenta los dedos gordos en pantallas táctiles. Los diseños de bajo contraste en las pequeñas ventanas, atenuado para ahorrar energía, a menudo no se pueden leer. Claramente, la optimización móvil es importante, pero ¿cuál es la mejor manera de hacerlo?
Picture
Buenas prácticas de diseño de Email en el Móvil

Antes de escribir una sola línea de código, la consideración de las características de diseño puede mejorar enormemente la experiencia del usuario para aquellos en el móvil, aunque podría decirse que se trata de concesiones convenientes sin importar el tamaño de pantalla.

Contenido claro y conciso: En las pantallas pequeñas lo mejor es dar importancia a los usuarios, por lo que mientras que el contenido sea más directo y conciso, mejor será la experiencia y participación del usuario.

Diseños de una sola columna: simplicidad es la clave. La distribución de no más ancho que 640px degradan con gracia. Una sola columna garantiza que ningún contenido que se pierda por completo fuera de la ventana cuando se hace zoom in.

Utilice un asunto atractivo: esta es una de las armas más eficaces de la comercializadora de correo electrónico. Sea breve y ágil. algunas veces funciona bien redactar el asunto del correo electrónico en forma de pregunta, ejemplo: Le gustaría bajar de peso?

Elabore llamados a la acción / "Call to Action (CTA)": no castigue los dedos gordos!  la guia de la interfás de IOS de Apple recomiendan un área objetivo " hacer tapping ' mínimo de 44 × 44 puntos, esto para que sea fácil para cualquier usuario hacer click en el link deseado.

Tamaños de fuente generosas: asegurarse de que su mensaje se pueda leer fácilmente.

Pre- encabezado: otro tip clave cuando se trata de la pre - visibilidad en la bandeja de entrada es el evitar mostrar simplemente el texto 'Ver en el explorador'. esto hara que sus usuarios 

Texto alineado a la izquierda: hay una serie de razones para la alineación de los elementos importantes en el lado izquierdo del área de contenido. (Ojo la investigación de seguimiento sugiere que los usuarios occidentales centran la mayor parte de su atención en el lado izquierdo de contenido del correo electrónico. Esto no es sorprendente ya que leemos el texto de izquierda a derecha. Algunos sistemas operativos, especialmente android, no escalan el contenido para adaptarse a la pantalla, por lo tanto, muestra sólo la mitad izquierda de un correo electrónico. Desde el punto de vista ergonómico, la mayoría de los usuarios encontrarán que es más fácil de interactuar con los elementos en la parte inferior izquierda / centro de la pantalla de su portátil).

Jerarquía vertical: espacio en pantalla disminuida da más credibilidad que nunca en la idea de "la tapa". Los CTAs significativos deben colocarse lo más cerca de arriba posible; si no se observan de inmediato, tal vez no van a ser utilizados.

Utilizar las imágenes cuidadosamente: primero no asuma que se verán las imágenes inmediatamente. La aplicación de correo electrónico nativo del iPhone mostrará imágenes por defecto, pero muchos clientes no lo harán.

Estos consejos pueden mejorar la experiencia de usuario para los clientes móviles, pero se puede, y probablemente deberían optimizar aún más. Gracias al creciente apoyo de CSS3 entre clientes de correo electrónico móvil, el correo electrónico autoajustable  es ahora posible.

Primeros pasos

Como mencionamos anteriormente, los correos electrónicos HTML sufren de una lamentable falta de normas - para los no iniciados, gran parte de lo que sigue será un viaje en el tiempo a los primeros días de desarrollo web. Las presentaciones deben concertarse en el renderizado HTML anticuados de algunos clientes de correo electrónico y CSS que debe aplicarse las etiquetas directamente. Varios clientes de correo electrónico desconocen por completo las declaraciones de las hojas de estilo hechas en la sección <head> del documento.

HTML Email Boilerplate

Como punto de partida, pero por el bien de la demostración, vamos a empezar desde cero.

Doctype

Hotmail y Gmail insertarán automáticamente la de XHTML 1.0 doctype estricto. Por tanto, no es una mala idea para usarlo, pero es importante probar a fondo su correo electrónico con y sin un doctype como muchos clientes de correo electrónico simplemente eliminarla por completo.
Picture
Ahora podemos insertar una etiqueta de el area de Meta tags dentro de Head para asegurarse de que nuestro correo electrónico se muestre correctamente en dispositivos móviles. Es también una buena idea especificar el tipo de contenido y una etiqueta de título también. Estos serán ignorados por muchos clientes de correo electrónico, pero son una buena idea si usted está pensando en proporcionar un enlace a una 'versión del navegador de su correo electrónico.

Dado que el tipo de contenido muy probablemente será ignorado, es recomendable codificar todos los caracteres especiales en su correo electrónico como entidades HTML.  ej : &aacute para "á"

Además, vamos a incluir un par de estilos sensatos que se restablecen para asegurar que nuestro correo electrónico se representa como queremos que sea una plataforma a otra.
Picture
Consecuencias negativas para Blackberry

Ahora podemos insertar nuestras preguntas de los medios; cuántos dependen del nivel de especificidad que desea entregar a cada dispositivo. En este ejemplo vamos a utilizar sólo una - haciendo la suposición razonable de que la mayoría de los dispositivos con un tamaño de pantalla no superior a 600px son modernas, móvil y de pantalla táctil y se beneficiarán de un estilo optimizado para móviles. Además, vamos a suponer que siguiendo las mejores prácticas técnicas móviles universales, señalado anteriormente, los usuarios móviles en los dispositivos más grandes que reciben el diseño de escritorio se encontrarán sin mayores problemas de usabilidad.

Estamos utilizando preguntas de los medios en la misma forma en que realizamos la construcción de un sitio web; si el tamaño de la ventana se encuentra dentro de las limitaciones establecidas en la consulta de los medios de comunicación después aplicar ese estilo.
Picture
En el ejemplo anterior, le estamos diciendo a algunos elementos con una clase "hide"  que se oculten en las pantallas más estrechas que 600px. La Propiedad !important asegura que cualquier estilo en línea sea anulado y sea considerado el indicado en esa linea. Este es el principio básico de diseño de correo electrónico autoajustable (responsive design). Una notable excepción en la aplicación de Gmail es que ignora las declaraciones de estilo en la sección <head>. Sin embargo, de conciencia la alineación a la izquierda del contenido deben garantizar una experiencia de usuario satisfactoria para los fans de Gmail en su lista de correo. Obviamente, esto no es una solución ideal, pero en la actualidad, el diseño de correo electrónico autoajustable debe de ser un compromiso ya adquirid, ya que se trata de técnicas vanguardistas.

Renderizado capricho del correo Yahoo

Picture
Ya hemos señalado en nuestra consulta de medios de que todas las tablas con una clase de "content_block" deben escalar a la anchura del 92% en los dispositivos con un tamaño de pantalla de hasta 600px. Ahora todo lo que tenemos que hacer es especificar un atributo inline ancho (600px) para cualquier tabla con una clase de content_block y tenemos un contenedor de ancho fijo, que luego escalas proporcionalmente en las pantallas bajo un cierto tamaño. A condición de que los atributos de anchura de los elementos secundarios de este contenedor están especificados como porcentajes, se trata de una plantilla básica de correo electrónico de respuesta.

Tenga cuidado al deshabilitar el ajuste automático de tamaño del texto en la etiqueta body, como regla general, trate de mantener los tamaños de fuente por encima del mínimo 12px.

Botones

Las llamadas a la acción "Call to Action" (CTA) suelen ser la parte más importante de un e-mail marketing. Deben ser llamativos, bien situados y, sobre todo, útiles. Los criterios para una gran CTA son diferentes dependiendo de si es para ser seleccionados por un cursor o un dedo. Esta es una poderosa función de correo electrónico autoajustable; proporciona a los usuarios con dispositivos de pantalla táctil con botones táctiles sencillos que no son afectados por los bloqueadores de imagen.
Picture
Por desgracia, este tipo de botones no se pueden mostrar universalmente ya que se basan en las propiedades de relleno que no se admiten en algunos clientes de correo electrónico de escritorio.
Picture
Las declaraciones de estilos anteriores transformarán etiquetas con una clase de "botón", como la de abajo, en la que participan grandes botones, colores que abarcan todo el ancho del área de contenido, siempre que la anchura de la pantalla del dispositivo no es superior a 600px.  El soporte CSS3 no debería ser un problema, ya que se puede suponer que la tecnología móvil nos dirigimos es bastante moderna.
Picture
El estilo en línea es suficiente para que los usuarios de ratón que pueden seleccionar los vínculos con mayor precisión, pero anulando estos estilos para hacer enlaces grandes y claros para los usuarios de la pantalla táctil, que reduce la probabilidad de errores de interacción. Es importante destacar que este enfoque no se basa en imágenes y así evita los problemas de usabilidad que los bloqueadores de imagen de otro modo presente.

En conclusión

El Diseño de Correo Electrónico autoajustable (responsive email design) sigue siendo un compromiso. El conjunto desconcertante de diferentes dispositivos, clientes de correo electrónico, diseñadoresy desarrolladores tiene una tarea de enormes proporciones en cuanto al diseño y desarrollo de correo electrónico se refiere. Pero a medida que avanza la tecnología es cada vez es más fácil de proporcionar a los usuarios diseños apropiados que sin esfuerzo pueden visualizar e interactuar.  El apoyo creciente por preguntas de los medios en el correo electrónico ha cambiado el panorama de la optimización del correo electrónico móvil y nos proporciona una plataforma para mejorar drásticamente la experiencia del usuario en más dispositivos. Ahora nos toca a nosotros, los diseñadores y desarrolladores, experimentar con formas creativas de llegar a la audiencia móvil.
Fiomega Knowledge Center
Website by Fiomega Cloud Websites