Social Media: Introducción a Ink: Nuevo Marco Responsive de Correo Electrónico

martes, 14 de enero de 2014

Introducción a Ink: Nuevo Marco Responsive de Correo Electrónico

Icon of the open-source mail client Correo
En zurb.com han estado tomando cuenta sobre la importancia de los correos electrónicos Responsive por un tiempo. Con más del 40% de los mensajes de correo electrónico abiertos en un dispositivo móvil, pueden asegurar que sus correos electrónicos se veían bien en cualquier dispositivo, lo que era imprescindible. La iteración y la mejora de sus emails es algo que han estado trabajando desde el año pasado. Y han estado tomando el pelo para una nueva solución que se avecinaba. Pues bien, hoy es el día. Ink, es un marco Responsive a estrenar, por fin está aquí.

Lo que Aprendieron Elaborando el Marco de Correo Responsive


El desarrollo de Ink comenzó cuando lanzaron sus plantillas de correo electrónico Responsive el año pasado. Les estimuló por su creciente número de lectores móviles. En un principio, no se apoyaron en sus plantillas de Outlook, pero se dieron cuenta de que estaban cortando la segunda mayor cuota de mercado de clientes de correo electrónico. Vamos a profundizar más en las lecciones que aprendieron mientras realizaban la construcción de Ink.

1. La flexibilidad es la clave


Ink es un marco, no una plantilla. Las plantillas Responsive son más populares en los correos electrónicos, pero no son muy flexibles y tienen muchas limitaciones. No quieren esas restricciones. Se necesita flexibilidad y un marco la establece. Ink utiliza 12-columnas de cuadrícula máxima para la divisibilidad: se puede dividir la red en una, dos, tres o cuatro columnas. Originalmente habían pensado usar una de cuatro columnas, pero les pareció que estaban obstaculizado su flexibilidad. Con mayor flexibilidad, también se incluyen elementos de la interfaz, botones y paneles - que los diseñadores utilizan con frecuencia. Son completamente personalizables para adaptarse a las necesidades de diseño.

Pero Ink es más que un marco de referencia. Se trata de un proceso que crea convenios para las organizaciones y los desarrolladores para adoptar y que crea coherencia en el camino de los correos electrónicos que se han desarrollado.



2. Todavía asuntos de Outlook


Outlook aún tiene una importante cuota de mercado, y la gente cuando nos preguntaban que para apoyar la segunda más cliente de correo electrónico. Técnicamente, Outlook es el cliente de correo electrónico más limitante, que no admite max-width: 100 %, por ejemplo. Centrado en el cliente en las limitaciones les obligó a considerar las preguntas difíciles en las primeras fases del proceso de diseño. El diseño primero, Outlook antes de mejorar la experiencia móvil de capas en las consultas de la prensa. Ink le permite razonablemente a Outlook con apoyo de ancho fijo, en lugar de líquido, de diseños y Media Queries para dirigirse a las pequeñas pantallas. (Por supuesto, quiere probarlo en un servicio como Litmus a fin de asegurarse de que el aspecto es perfecto en diversos clientes y dispositivos antes de enviarlo.)

3. Media Queries es el Futuro


Han tenido muchas dificultades para encontrar formas de apoyar mejor a Gmail mobile. Terminaron con un no-media query solución de red, es decir, aunque el método Media Query es aún mejor. Esto provocó una gran cantidad de dolores de cabeza, así que han diseñado su propio inliner de CSS que permite colocar en línea para una mejor compatibilidad con Gmail. A medida que se avanza en la comunidad, las cosas se moverán hacia una mejor compatibilidad con Media Query.

El correo electrónico desde cualquier parte. En cualquier dispositivo. En cualquier cliente, incluso en Outlook. 


Ink le permite crear mensajes de correo electrónico que funcionan a través de dispositivos y clientes de correo electrónico, incluso Outlook. Su marco Responsive tiene una cuadrícula de 12 columnas que combina flexibilidad y estabilidad para que los lectores puedan ver sus actualizaciones y el boletín en donde sea que se encuentren. Hay cinco pasos fáciles para comenzar con Ink:
  1. Test en OutlookOutlook es el mejor, el peor enemigo es cuando se trata de mensajes de correo electrónico Responsive. Asegúrese de que se ve muy bien allí antes de seguir adelante.
  2. Añadir sus estilos Responsive — Incluya todos los estilos Responsive que desea incluir.
  3. Traiga sus estilos inline — Incluya todo lo que se vea muy bien en Outlook, traiga su estilo en línea usando inliner de Ink.
  4. Test su email — No envíe por el momento. Utilice la herramienta de prueba Litmus como una prueba en una serie de dispositivos.
  5. Envíelo a cabo — El correo electrónico está listo. Sal con él hacia el mundo. 
Entonces, ¿qué hay en Ink? Vamos a profundizar un poco más en sus características:
  • Ink utiliza 12-columnas, cuadrícula basada en Media-Query-con un envoltorio de 580px. En los dispositivos móviles, bajo 580px, las columnas se convierten en ancho y se apilan verticalmente.
  • Hay elementos de interfaz de usuario (UI) como botones y paneles para un rápido desarrollo. 
También se ofrecen plantillas para empezar, tales como:
  • Basic — Perfecto para el envío de los correos electrónicos de buen aspecto
  • Hero — le permite poner una imagen de hero elegante en su correo
  • Sidebar — incluye un área de barra lateral para obtener una lista de enlaces
  • Sidebar Hero — Este combina las plantillas de la barra lateral y hero
  • Newsletter — crear boletines con facilidad
A pesar de que se incluyen plantillas para empezar, puede construir su propio uso de Ink como marco. ¿La mejor parte? Ink funciona en todos los principales clientes de correo electrónico:

Cliente/Soporte Navegador
Cuestiones
Apple Mail (Desktop)
Apple Mail (iOS)
Outlook (2000, 2002, 2003)
Outlook (2007, 2010, 2013)
Outlook (2011)
Thunderbird
Android
Gmail (Desktop)
Gmail (Mobile Web, iOS, Android) Dado que Gmail no admite Media Queries, a los usuarios se les presentará la vista de escritorio. Si Gmail para móviles es una gran parte de su público, le recomendamos que utilice un diseño basado en block-grid.
AOL Mail
Hotmail
Outlook.com

Enviar correos electrónicos Responsive con Ink


Ink es de código abierto, y servirá como una colección de las mejores prácticas, la comunidad desarrolla. Nuestro marco de correo electrónico Responsive que da a sus plantillas una base muy sólida que ha sido probada a través de las plataformas principales / clientes.

Echa un vistazo a Ink

Artículos relacionados:




Enhanced by Zemanta