Consejo rápido: recuerda agregar diseño al texto del atributo ALT

El atributo alt dentro de la etiqueta <img> provee una alternativa de contenido para los usuarios que no pueden descargar imágenes, o que tienen desactivada la descarga de imágenes. Utilizamos este atributo todo el tiempo para hacer nuestro contenido más accesible, pero ¿alguna vez has pensado cómo se muestra realmente?

Vamos a usar la plantilla de correo que construimos en el tutorial anterior como ejemplo, pero los principios son bien aplicados al diseño web basado en el navegador.

<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />

Si echamos un vistazo a nuestro archivo con la descarga de imágenes deshabilitada, así es como se visualizaría:

Es evidente que el texto ALT no es nada atractivo —especialmente los enlaces. Podemos hacer unas cuantas cosas para mejorarlo.

Para el encabezado principal, vamos a hacer el texto mucho más largo y cambiarlo a un color azul oscuro en lugar de blanco. Hacemos esto agregando los estilos al elemento padre (en este caso una celda). Estos estilos se aplicarán después a las etiquetas alt dentro de esa celda.

Esta es nuestra celda:

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
 <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

Vamos a agregar un poco de estilos al texto para que se vea así:

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;">
 <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

Y agregaremos estilos a nuestros enlaces de redes sociales para que se conviertan en color blanco:

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
   <a href="http://www.twitter.com/" style="color: #ffffff;">
    <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
   </a>
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
  <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
   <a href="http://www.twitter.com/" style="color: #ffffff;">
    <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
   </a>
  </td>
 </tr>
</table>

¡Tan simple como eso! Ahora podemos estar seguros que nuestro correo se mostrará bien, incluso cuando las imágenes estén desactivadas.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!