Tutorial: Cómo crear un e-mail en bloques de color

• Añadir varios colores HTML de fondo en un e-mail
• Establecer varias columnas
• Formatear el texto (color, tamaño, altura de la línea, enlaces, etc.)
• Adecentar un e-mail con espaciados y rellenos de precisión

Offscreen es una revista impresa y un boletín semanal “con un punto de vista sobre la tecnología y la web reflexivo y centrado en el ser humano”. Admiramos desde siempre el estilo simple y característico de su boletín, Offscreen Dispatch. Offscreen usa en cada e-mail la misma técnica de bloques de color, con un efecto muy lindo: hace que el e-mail parezca la página de una revista. La parte superior, donde el diseñador web Kai Brach escribe una nota a los suscriptores, es siempre rosa. El resto del e-mail es siempre blanco. Así:

No tiene particularmente llamativo, ni arte ni fotografía, pero el dinamismo del esquema, el texto bien formateado y el diseño en bloques de color dan personalidad al e-mail.

Es un diseño fácil de crear, y en el editor BEE no requiere escribir código. ¡Veámoslo en detalle! Abre el editor BEE y sigue los pasos.

Abre el editor BEE y empieza con una plantilla básica de una columna sin nada más.

Antes de empezar a arrastrar elementos a la estructura, tomemos un minuto para examinar el e-mail de Offscreen Dispatch e identificar los componentes del diseño. En esta versión podemos ver el formato:

El e-mail alterna estructuras de una columna y dos columnas, que son fáciles de montar en BEE.

Arrastra las conformaciones de fila correspondientes desde el menú Estructuras a la derecha. Para este e-mail necesitaremos las dos opciones de arriba:ù

Veamos qué aspecto tiene nuestro e-mail con las estructuras de filas en su sitio:

Ahora que tenemos montado el esqueleto base de nuestro e-mail, arrastra los bloques de contenido que se correspondan con el tipo de contenido (texto y/o imagen) que quieres en cada sección. Hecho esto, pega el texto y arrastra hasta allí las imágenes.

Veamos cómo situar el contenido en tres pasos. Empezamos con la primera línea, el encabezado:

(1) Arrastra una estructura de dos columnas:

(2) Añade bloques de texto a la izquierda y un bloque de contenido de imagen a la derecha:

(3) Suelta el texto y la imagen:

Repasemos cada fila para organizar el contenido. Aquí está nuestro e-mail con los restantes bloques de contenido en su sitio:

Por último, añadiremos texto:

¡Ya está! A continuación, formateamos.

Ahora viene la parte divertida. Observa qué fácil es crear el efecto de bloques de color.

Primero, para obtener el tono exacto de rosa pálido del e-mail de Offscreen Dispatch’s, usamos HTML-Color-Codes.info para identificar el color de la imagen del encabezado.

HTML Color Codes identifica el color con el código hexadecimal #F5BBA2. Para dar el color exacto a la primera fila:

1. Seleccionamos la fila
2. En el menú de la derecha vamos a Color de fondo de la fila
3. Pegamos el código del color (o lo seleccionamos manualmente)

¡Ya tenemos el color liso de lado a lado! Completamos ahora el bloque de color rosa. Simplemente seleccionamos la siguiente fila y volvemos a hacer lo mismo.

Finalicemos este diseño de e-mail con algunos toques de formato. Empezaremos con el texto.

Elige una fuente predefinida para el e-mail

En lugar de pasar por cada uno de los bloques de contenido para elegir la fuente para el e-mail, ve al menú de Ajustes a la derecha y selecciona la fuente a utilizar en todo el mensaje.

Después podrás cambiar la fuente del encabezado o de las secciones que selecciones.

Toca cualquier bloque de texto y usa el menú desplegable para ajustar el tamaño de fuente.

Personaliza los colores del texto

Usa ese mismo menú para elegir los colores que prefieras. Y, de nuevo, usa el mismo código de color para obtener el tono que coincida exactament

Formatea el estilo del enlace

¡No olvides los enlaces! En el mismo menú Ajustes en que elegiste la fuente predefinida para el cuerpo de texto, puedes elegir el estilo para el enlace. En este caso, elegiremos el negro.

Altura de la línea

Asegúrate de que tu cuerpo de texto tiene espacio para respirar. En cualquier bloque de texto que edites, ajusta la altura de línea del texto.

Sugerencia: duplica la fila

Si la formatación del texto de una fila en particular te ha llevado mucho tiempo, cuando pases a otra fila puedes simplemente duplicarla en lugar de hacer de nuevo todos los ajustes manualmente.

Toca la fila que quieres copiar. Haz entonces clic en la imagen de doble recuadro en el extremo derecho.

De ese modo copiarás tu fila Hecho esto, simplemente arrástrala tomando el icono direccional a la izquierda, para colocar la nueva fila en el e-mail.

¡Último paso! Es un paso importante. Antes de terminar el e–mail, fíjate en los espacios entre tus bloques de contenido. Si todavía hay demasiados huecos —o si hay zonas donde no queda espacio para respirar—es muy fácil de ajustar.

Por ejemplo, hay un hueco entre “Offscreen” y “Dispatch” en el encabezado del borrador de tu e-mail. Para ajustarlo, toca en cualquiera de los bloques de contenido, desciende hasta Propiedades de columna en el menú de la derecha y asegúrate de que en Relleno esté activado Más opciones. Ahí podrás disminuir (o aumentar) el relleno en cualquier lado de cualquier contenido.

Ya está—solo un último paso (esta vez de verdad es el último) . Cuando diseñes un e-mail, controla la vista previa a medida que lo vas haciendo, para asegurarte del aspecto que cobra, tanto en PC como en móvil. Aquí podemos ver la forma que está tomando el nuestro:

Simple, rápido, con un gran impacto visual. Háznos saber en los comentarios si has probado esta técnica y qué resultados has obtenido.