Empezar a adaptarnos a mobile: Fluid Design

¿Estás pensando en empezar a hacer tus comunicaciones mobile pero no sabes por dónde arrancar? ¿Querés algo que te lleve poco tiempo y sea fácil de aplicar? En esta nota vas a ver cómo adaptar tus piezas a dispositivos móviles sin la necesidad de que tu código se vuelva un chino.

Para este tutorial armé un diseño Fluid tipo newsletter que fácilmente podrían adaptar a sus comunicaciones. Es un diseño muy simple, de una sola columna, con header, cuerpo y footer.

Muy lindo, no? Bueno, empecemos. Primero la estructura y luego el contenido.

Estructura

Una tabla al 100% con fondo blanco (podría ser cualquier color) va a ser nuestro contenedor.
Si bien el blanco es el color de fondo default, lo sé, algunas aplicaciones de emails (por ejemplo, la nativa de mi S3 mini) no me toman el blanco como default, sino un gris, asique mejor lo especificamos.

<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style="background:#ffffff;">
  <tr>
    <td align="center" style="font-size:0; margin:0; padding:0;">Contenido</td>
  </tr>
</table>

Bueno, ahora dentro de esta tabla, tenemos que poner nuestra tabla de contenido. Esta va a ser una tabla al 90%. La vamos a hacer al 90% para que nos quede un margen con la tabla contenedora y luego en mobile no queden los textos totalmente pegados a los bordes de la pantalla. A esta tabla también le vamos a agregar un max-width de 600px, para que sea el ancho máximo hasta donde se "estire". Esta tabla se vería así:

<table align="center" width="90%" border="0" cellspacing="0" cellpadding="0" style="max-width:600px;">
  <tr>
    <td align="center" style="font-size:0; margin:0; padding:0;">Contenido</td>
  </tr>
</table>

Yo necesité en total 28 filas, entre las filas que tenian texto, las que tenian imagenes, y las que funcionan de espacios.

Contenido

Como ven este diseño no tiene muchas imágenes. Unas lineas, los botones y las redes sociales.
Las líneas de colores que tenemos en el header y en el footer estan al 100%, y se adaptan a la tabla de contenido, la que esta al 90%. En el código se ve así:

<img src="images/hrc_03.jpg" width="100%" height="4" border="0" style="display:block;" alt="border">

Los botones y los logos de las redes sociales mantienen su width y height original (ya que son pequeños) y en el caso de los logos de las redes sociales, no incluimos el style="display:block;" ya que queremos que esten uno al lado del otro y si agregamos dicho estilo se podrían en columna.
En este ejemplo, las imágenes tienen ruta local, pero recuerden: las imágenes siempre deben tener una ruta absoluta.

Para las notas tenemos el título en una celda, y luego en otra celda, una tabla al 90% con un max-width de 550px, dónde tenemos la introducción a la nota. El código se ve así:

    <tr>
    <td align="center" style="font-size:22px; text-align:center; font-family:Arial, Helvetica, sans-serif; color: #2388c9;"><strong>Mobile-first, Fluid o Responsive Design?</strong></td>
  </tr>
    <tr>
    <td align="center" height="20" style="font-size:0; padding:0; margin:0;">&nbsp;</td>
  </tr>
    <tr>
    <td align="center" height="20" style="font-size:0; padding:0; margin:0;">
    <table  align="center" width="90%" border="0" cellspacing="0" cellpadding="0" style="max-width:550px;">
      <tr>
        <td align="center" style="font-size:14px; text-align:justify; font-family:Arial, Helvetica, sans-serif;">No hace mucho alguien me dijo <strong>”Yo creia que eso del Responsive para emails era un mito”</strong>. No solo <strong>NO</strong> es un mito, si no que un Email Mobile tiene más de una forma de ser. Desde <strong>Mobile-first</strong>, pasando por <strong>Fluid</strong> y finalmente <strong>Responsive Design,</strong> en esta nota te cuento las diferencias, ventajas y desventajas de cada uno.</td>
      </tr>
    </table>
    </td>
  </tr>

Los botones, que tienen estilos para que el texto alt no sea una línea de texto sin gracia si no se descargan las imágenes, están en otra celda y se ven así en el código:

<td valign="middle" align="center" style="font-size:0; padding:0; margin:0;">
<a href="http://haceloresponsiveche.blogspot.com.ar/2014/11/mobile-first-fluid-o-responsive-design.html">
<img src="images/hrc_09.jpg" alt="Ver m&aacute;s" width="150" height="40" style="display:block; background-color:#096; font-size:14px; color:#000000; text-align:center; font-weight:bold;" border="0">
</a>
</td>

Ahora, como siempre, tenemos que atajarnos ante los imprevistos. En este caso tenemos a Microsoft Outlook que no interpreta los max-width. Hay un código, que se llama "condicional", que nos permite agregar tablas o estilos, que solamente van a tener lugar en Outlook, y en el resto de clientes de correo no va a tener efecto.
En el caso de este NL, lo que hacemos es envolver todo nuestro contenido en una tabla de 600px, y esto es lo que se ve en el código:

    
    <!-- Condicional abre Tabla 600px -->
    
    <!--[if gte mso 9]><table align="center" width="600" border="0" cellspacing="0" cellpadding="0"><tr><td width="600">
<![endif]-->

<!-- Condicional abre Tabla 600px -->

      <table align="center" width="90%" border="0" cellspacing="0" cellpadding="0" style="max-width:600px; table-layout: fixed;">
        <tr>
          <td height="20" style="font-size:0; padding:0; margin:0;">Contenido</td>
        </tr>
      </table>

<!-- Condicional cierra Tabla 600px -->

<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->

<!-- Condicional cierra Tabla 600px -->

Y esto es todo! De acá se pueden descargar todo lo que usamos hoy para que lo veas bien y lo testees si querés.
Acá les dejo capturas de pantalla para que vean como se ve en las diferentes apps de mi dispositivo móvil (recuerden, tengo un Samsung S3 mini)
Si lo probás, contame como te fue en los comentarios y si te quedó alguna duda, dejá tu pregunta!

¡No te olvides de seguir el blog en las redes sociales!
Twitter: @haceloresponsiv
Facebook: Hacelo Responsive Che
Y todo se repostea en Medium.

También pueden seguirme a mi!
Twitter: @marieseen
Linkedin: Marie Seen