La cultura del envase

Imagen

14516437_687715941396396_2744495739369331772_n

Anuncios

Tips para maquetar emails

Estándar

Las tablas son el componente básico para maquetar emails:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top"></td>
  </tr>
</table>

 

Para insertar espacios entre tablas, se usa un archivo .gif transparente y se redimensiona como queramos:

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr>
    <td align="center" valign="top"> 
      <img src="img/spacer.gif"width="50" class="w10"> 
    </td>
  </tr>
</table>

 

Muchas de estas propiedades en las etiquetas HTML evitan que los diferentes clientes de correos añadan efectos que no queremos en nuestra plantilla, como sucede con las imágenes y el body.

<img src="img/beach.png" width="600" height="280" style=”display:block border=”0”>
<body style="margin:0; padding:0;" topmargin="0" leftmargin="0"
 marginheight="0" marginwidth="0">

 

Los colores SIEMPRE en formatos hexadecimal y los seis dígitos:

<td style=”color:#000000; background-color:#ffffff”> ...

 

Los textos y fuentes deben tener todo el estilo especificado y la etiqueta más próxima al texto:

<td style="font-family:Arial, Helvetica, sans-serif; 
font-size: 17px; line-height:22px; color:#FFFFFF;">
Este es mi texto
</td>

 

Los links también suelen ser víctimas de estilo no deseado:

<a href=”” style="text-decoration:none; color:#ffffff; 
text-decoration:underline”>Enlace a no sé donde</a> 

En móviles,  una dirección, un teléfono o una fecha se resaltan como un link. La solución  pasa por una combinación de HTML y CSS:

<style>
  .ios_texta { color:#000000!important; text-decoration:none !important; } 
</style>

<td style="font-family:Arial, Helvetica, sans-serif; font-size: 17px;
 line-height:22px; color:#000000;"> 
   Estaremos en <span class=”ios_fecha”>diciembre 28, 2016.</span>
</td>

 

Esta información la podrás encontrar y poner en práctica en este curso.

 

Plantillas de emails

Estándar

how-to-use-identity-data-to-win-at-email-marketing-gigya-12

Si alguna vez ha programado una plantilla para emails te habrás topado con que no todas las etiquetas de HTML y CSS sirven, además de cada cliente de correo tiene sus particularidades.

En este enlace verás una tabla con las etiquetas que aceptan los clientes de correos más comunes (Outlook, Gmail, Apple Mail, …).

Litmus es un servicio de pago con el que podrás testear tus plantillas en los diferentes clientes de correo electrónico, aunque tiene versión de pruebas de unos 7 días.

Y en mi cuenta de Github podrás encontrar una plantilla genérica con las características básicas y hacks para empezar a construir una plantilla responsive para emails.

 

Codemotion de Madrid 2016

Estándar

La Codemotion de Madrid es un evento dedicado a todo lo relacionado con el desarrollo de software, ya sea desde webs, apps, bases de datos, gestión de equipos, etc. Es un escaparate ideal para saber que se va moviendo en el sector, que está de moda y aprender de las experiencias de los propios ponentes.

He visto algunas de la charlas de este año y la verdad que es un lujo contar con tanta variedad, y además publicadas en la web. Algunas de ellas son:

Aquí su canal de Youtube.

Mi portafolio, mi carta de presentación como profesional

Estándar

En nuestra profesión, un currículo en pdf y una cuenta de Linkedin es insuficiente para demostrar realmente los conocimientos que tenemos. Así que por ello he publicado mi propia web que hará de portafolio profesional.

En ella muestro los proyectos en los que he trabajado hasta ahora, además de enlazar mis cuentas de Github y Codepen, con el objetivo de dar a conocer mis habilidades y mi capacidad como programador.

La web servirá también de enlace a mis cuentas en las redes sociales como Twitter e Instagram y a mis perfiles de redes laborales como Linkedin, Infojobs y Tecnoempleo. De esta manera, si alguien quiere conocer mi perfil lo podrá hacer desde mi web.