Foundation for Emails 2: Responsive, Simple, Universal

Foundation for Emails 2: receptivo, simple, universal

Si bien puede usar HTML5 y CSS3 en navegadores modernos sin ningún problema, y ​​suponer que Chrome, Firefox e Internet Explore o Edge muestran todo de la manera que espera, los servicios de correo electrónico son una historia diferente. Cada programa tiene su propia idea de cómo mostrar HTML y CSS. «Foundation for Emails 2» es un marco nuevo y extenso que permite correos electrónicos sofisticados que funcionan en la mayoría de los programas, así como en las interfaces de correo web.

Kit de inicio con once plantillas

«Foundation» es un marco moderno para diseños receptivos y, recientemente, se lanzó una nueva versión para correos electrónicos HTML receptivos. «Fundación para correos electrónicos 2» está disponible en una versión CSS y SASS. Una vez que haya descargado el kit de inicio, encontrará once plantillas diferentes para correos electrónicos HTML.

Fundación para correos electrónicos 2Vista previa de las once plantillas de correo electrónico

Entre ellos, encontrará plantillas bastante simples, así como plantillas de varias columnas para diferentes propósitos. Por ejemplo, hay dos plantillas únicas de boletines con un gráfico de encabezado más grande y una o dos columnas de texto, según su elección. Además de eso, encontrará plantillas para ocasiones comunes, como confirmaciones de pedidos y correos electrónicos clásicos de «contraseña olvidada», que generalmente contienen un enlace para restablecer la contraseña.

Fundación para correos electrónicos 2Dos plantillas para boletín informativo

Todas las plantillas vienen con un archivo CSS externo, en el que se guardan todos los estilos. El diseño de las plantillas se mantiene simple a propósito para que haya un texto de origen CSS delgado y claro que se pueda ajustar fácilmente a sus propias ideas.

Foundation for Emails 2: diseño de tabla simple

Desafortunadamente, muchos programas de correo electrónico y servicios de correo web no saben mucho sobre el desarrollo web moderno. Si bien hay un suministro bastante limitado de navegadores, la cantidad de programas y servicios de correo electrónico es tan grande que necesita encontrar un pequeño punto en común.

Fundación para correos electrónicos 2Plantillas para pedidos y contraseñas olvidadas

Este punto en común es que los correos electrónicos HTML se marcan como tablas, al igual que en los viejos tiempos antes de CSS y HTML5. Sin embargo, el diseño no está marcado en una sola tabla. En su lugar, se utilizan varias tablas intercaladas que están etiquetadas con diferentes clases. La tabla superior recibe la clase «cuerpo». Define el área real del correo electrónico. Le siguen tablas con la clase «contenedor», que representan una sección del correo. Para tablas de varias columnas, agregue otra tabla con la clase «fila» dentro de la tabla contenedora. Dentro de esa clase, puede definir columnas con diferentes anchos.

Una cuadrícula de 12 para visualización receptiva

Como «Fundación» se basa en una cuadrícula de 12 columnas, tiene la opción de dividir sus columnas de forma flexible. Los diseños de dos, tres, cuatro y seis columnas son posibles sin ningún problema. Debido a las diferentes clases para ventanas grandes y pequeñas o tamaños de visualización, simplemente puede decidir cómo desea que se muestren las columnas en resoluciones pequeñas y grandes. Por ejemplo, para un diseño de tres columnas, asigne la clase «grande-4» a las celdas de su tabla para resoluciones grandes. Si desea que sean de una sola columna para resoluciones pequeñas, asigne también la clase «pequeño-12».

Botones, colores y fuentes predefinidos

Para facilitar el trabajo con «Foundation for Emails 2», hay muchos componentes predefinidos disponibles. Sin mucho esfuerzo, puede integrar botones personalizados en su correo electrónico. Aparte de los botones principal y secundario, hay botones específicos para mostrar advertencias y acciones exitosas.

Fundación para correos electrónicos 2Diferentes botones predefinidos

También hay ajustes preestablecidos de CSS para encabezados, textos y enlaces y, por supuesto, también puede ajustarlos y sobrescribirlos. Para la orientación de textos e imágenes, la «Fundación para el correo electrónico» proporciona clases que le permiten mostrar el texto ajustado a la izquierda o a la derecha, o centrado, y hacer que el texto fluya alrededor de las imágenes en el lado izquierdo o derecho.

Creación de estilos en línea

Además de la necesidad de marcar el diseño de un correo electrónico HTML como construcción de tablas, hay otra cosa a tener en cuenta. Muchos programas de correo electrónico solo interpretan las hojas de estilo cuando se definen como elementos en línea, lo que significa que deben establecerse a través del atributo «estilo» directamente dentro del elemento HTML. Como el marcado en línea requiere mucho esfuerzo y la edición posterior de correos electrónicos largos es muy tediosa, «Foundation» proporciona un «Web-Inliner». Aquí, copia tanto su HTML como su texto fuente CSS, y los pega en un campo de texto cada uno. Con un clic, el «Web-Inliner» crea un texto de origen HTML para usted, en el que todos los atributos definidos en la hoja de estilo externa se transfieren al texto de origen HTML como estilos en línea.

Fundación para correos electrónicos 2Web Inliner crea texto fuente HTML con estilos en línea

Además de eso, los ajustes de palabras y los espacios en blanco se eliminan en el texto fuente distribuido, de modo que el código fuente sea lo más delgado posible, incluso con estilos en línea. Este texto de origen ahora se puede enviar como un correo electrónico HTML. Solo las reglas de consulta de medios se definen en su propio elemento ««, ya que no se pueden marcar en línea a través del atributo «estilo». Sin embargo, el elemento «» no se coloca en el encabezado HTML como de costumbre, sino en el cuerpo, ya que algunos programas de correo electrónico eliminan todos los bloques de hojas de estilo del encabezado HTML.

Foundation for Emails 2: amplia compatibilidad con programas de correo electrónico y servicios web comunes

«Fundación para correos electrónicos 2» se ejecuta en muchos programas de correo electrónico, y no solo en sus versiones recientes. Por ejemplo, el marco es compatible con Microsoft Outlook en las versiones 2000 a 2016. También es compatible con las versiones 7 y 8 de Apple Mail. Las aplicaciones de correo electrónico predeterminadas móviles de Android 4.4 y iPhone 5 y 6, se admiten el iPad, así como la aplicación Android Gmail. Dado que muchos correos electrónicos se abren a través de interfaces de correo web, estos son compatibles con los servicios Gmail, Office 365, Outlook.com y Yahoo! en Chrome, Firefox, e Internet Explorer. En general, «Foundation for Emails 2» es muy fácil de manejar, muy flexible en lo que le ayuda a lograr, así como personalizable. La amplia compatibilidad con muchas aplicaciones de correo electrónico lo convierte en el marco elegido para correos electrónicos HTML. .

(dpe)

#Foundation #Emails #receptivo #simple #universal

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.