El diseño responsivo se ha apoderado de los diseños de correo electrónico actuales, aplique estos diez consejos y demuestre a sus usuarios que usted es un experto del patrón de diseño!

    1. No es el icono, es la fuente. Muchos diseños de correo electrónico responsivos requieren alguna forma de icono en algún lugar de la pantalla y la mayoría de los dispositivos de alta densidad de pixeles tienen escalas de fuentes con mucha mayor nitidez que una imagen, todo lo que necesita hacer es encontrar el icono que desee en algunas fuentes y usarlo correctamente. Se mostrara hermoso y se entenderá el mensaje.
    2. Los dedos no estiletes. En las famosas palabras de Steve Jobs “nadie quiere un stylus” y es por eso que las pantallas de los teléfonos de hoy en día están diseñadas para los dedos e incluso para los pulgares. Desafortunadamente la mayoría de dígitos humanos no son capaces de selecciones de pixeles precisos por lo que tiene más remedio que cumplir con el estándar de Apple de tener 44 pixeles cuadrados como mínimo para cualquier enlace o botón.
    3. Cuidado con el límite de la fuente. Parece una paradoja que mientras las pantallas de retina de Apple se encuentran entre las más densas de pixeles, las pantallas de mayor resolución en la industria, el iPhone limita las fuentes que aparecen en él a un mínimo de 13 puntos. Puede correr el riesgo de convertir su diseño bien pensado en el desayuno de un perro si usted usa cualquier texto más pequeño en un iOS de lujo, sin tener en cuenta el hecho de que no va a encajar en su diseño.
    4. Mantenga su diseño estrecho. Limite las disposiciones de columnas individuales a no más de 500 px de ancho para lograr una mejor visualización en pantallas de dispositivos  móviles.  La ventaja adicional a esta limitación de anchura es que si hay un problema de presentación será menos catastrófico que si tuviera una distribución mucho más amplia de 800 px o más.
    5. Enfoque sus preguntas en los medios. Usted no tiene que limitarse en el diseño de sus mensajes de correo electrónico flexibles en torno a un rango específico de pixeles de alturas y anchuras cuando también se puede diseñar para la orientación actual de la pantalla, así como las relaciones de pixeles. Nota: Puede volverse loco y pasar horas pensando o puede seleccionar los denominadores comunes más bajos y tendrá un gran día.
    6. Tipo de entrada. Uno de los mayores dolores de cabeza con los dispositivos iOS es que los caracteres especiales pueden ser difíciles de encontrar, pero si se utiliza las diferentes tipos de entrada type = “email” en su dirección de correo electrónico forman el teclado estándar para dar paso a un especial que cuenta con los caracteres que más quiere, incluyendo todos los importantes como la  arroba @.
    7. Imágenes que no se descargan. Para ocultar las imágenes que no caben en la pantalla en realidad  el dispositivo móvil tiene que descargar la imagen, siendo un total desperdicio de ancho de banda.  Es mejor la implementación de uno de los CSS o técnicas de carga de imágenes basadas en Java para cuando el usuario se desplace en el diseño.
    8. Prueba de todo todo el tiempo. Incluso la mayoría de los diseñadores web que utilizan códigos adeptos no pueden hacer los diseños responsivos para todas las pantallas y ahí es donde son absolutamente indispensables los grandes sitios de prueba como la que está en mattkersley.com. Todo lo que necesita hacer es colocar su diseño sobre cualquier URL (incluso uno que no es público) y ver los resultados en la anchura y en los  tamaños de los dispositivos también.
    9. Obviar el retraso de las especificaciones HTML. Parece como si los grandes que determinan las especificaciones de HTML han estado arrastrando sus pies durante siglos en la integración de las imágenes sensibles en el santuario. Usted no tiene que esperar una eternidad para conseguir el resultado deseado, ya que se puede aplicar cualquier número de soluciones con JavaScript para hacer el trabajo correctamente.
    10. El fenómeno Jobsis Daan. Jobsis es un diseñador que descubrió un efecto muy raro durante las compresiones de imagen en Photoshop: Tome cualquier imagen, cambie su tamaño al 200%, lo comprime al 25% de la calidad original, cambia el tamaño de nuevo al 100% en el navegador y el tamaño del archivo de imagen resultante será más pequeño y totalmente optimizado para pantallas de alta DPI, ya que mantiene su densidad de pixeles duplicado.  Extraño, pero práctico.

La plantillas con diseño responsivo sigue evolucionando y las marcas que tomen el riesgo serán los que obtengan las mejores métricas.