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.

1

<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:

1

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">

2

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

3

</td>

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

1

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;">

2

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

3

</td>

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

1

<table border="0" cellpadding="0" cellspacing="0">

2

 <tr>

3

  <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">

4

   <a href="http://www.twitter.com/" style="color: #ffffff;">

5

    <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />

6

   </a>

7

  </td>

8

  <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>

9

  <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">

10

   <a href="http://www.twitter.com/" style="color: #ffffff;">

11

    <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />

12

   </a>

13

  </td>

14

 </tr>

15

</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!