Cada día es mas seguro hacer mails que se adapten a dispositivos mobiles ya que cada vez son mas los clientes de correos que tienen soporte a css y a media queries así que en este tutorial te indicaremos como hacer un mail con una distribución de grilla que sea responsive y disponer las columnas de manera que de adapten a nuestro diseño.
Primero crearemos la tabla que contendra el header de nuestro mail, el ancho del mismo sera de 600px en desktop.
<table>
<tbody>
<tr>
<td class="center full-header" width="600" height="80" style="text-align: center; vertical-align: middle; background-color: #00A7C7" >
<span class="header center" style="font-size:60px; font-weight: 600; color: #FFFFFF; font-family: Arial; text-align:center">
HEADER
</span>
</td>
</tr>
</tbody>
</table>
Luego crearemos la tabla que contendrá la grilla:
<table class="device-width" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="center full" width="300" height="250" style="text-align: center; vertical-align: middle; background-color: #F2F2F2" >
<span class="letter center" style="font-size:80px; font-weight: 600; color: #00CBC7; font-family: Arial; text-align:center">
A
</span>
</td>
<td class="center full" width="300" height="250" style="text-align: center; vertical-align: middle; background-color: #E6E6E6" >
<span class="letter center" style="font-size:80px; font-weight: 600; color: #00A7C7; font-family: Arial; text-align:center">
B
</span>
</td>
</tr>
</tbody>
</table>
<table class="device-width" dir="rtl" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="center full" dir="ltr" width="300" height="250" style="margin: 0; padding: 0; font-size: 0; text-align: center; background-color: #F2F2F2">
<span class="letter center" style="font-size:80px; font-weight: 600; color: #00CBC7; font-family: Arial; text-align:center">
D
</span>
</td>
<td class="center full" dir="ltr" width="300" height="250" style="margin: 0; padding: 0; font-weight: 600; font-family: Arial; vertical-align: middle; text-align: center; ; background-color: #E6E6E6">
<span class="letter center" style="font-size:80px; font-weight: 600; color: #00A7C7; font-family: Arial; text-align:center">
C
</span>
</td>
</tr>
</tbody>
</table>
De esta manera conseguiremos este resultado:
Ahora determinaremos los estilos para conseguir una correcta visualización en responsive:
<style type="text/css">
@media handheld, only screen and (max-device-width: 599px) {
.letter {
font-size: 8rem !important; /*tamaño de la letra en la grilla*/
}
.header {
font-size: 4rem !important; /*tamaño de la letra en el header*/
}
.center{
text-align: center !important; /*Centrar contenido*/
margin: auto !important;
float: none !important;
}
.full {
display:block !important; /*Display block para que la columna ocupe todo el ancho de la tabla*/
width:100% !important;
height: 200px !important;
vertical-align: middle !important;
padding-top: 3rem !important;
}
.full-header {
width:100% !important;
height: 80px !important;
vertical-align: middle !important;
}
.device-width{
max-width: 300px; /*Determinamos que el ancho de la tabla en mobile sera de 300px*/
width:300px!important;
padding: 0 !important;
}
}
</style>
Resultado:
Ahora bien se preguntaran como ocurre que la columna D se vea debajo de la B en responsive cuando en desktop luego de B sigue la columna C, esto es debido a que en la orientación de la tabla se determino que la alineación seria <table dir="rtl".. esto significa que las columnas de la tabla se organizaran de derecha a izquierda (rlt: right to left), de esta manera disponemos las columnas en el html al contrario de como sera el resultado por ejemplo:
Tabla con una distribución normal:
<table>
<tbody>
<tr>
<td>
<span >
C
</span>
</td>
<td >
<span>
D
</span>
</td>
</tr>
</tbody>
</table>
Tabla con atributo dir=»rtl» :
<table dir="rtl" >
<tbody>
<tr>
<td dir="ltr" >
<span >
D
</span>
</td>
<td dir="ltr" >
<span>
C
</span>
</td>
</tr>
</tbody>
</table>
El resultado visual de estas 2 tablas en desktop seria el mismo, la diferencia reside en la distribución de las columnas en responsive:
De esta manera te presentamos algunos tips para disponer los elementos de tu mail de manera adecuada para su correcta lectura en los distintos dispositivos mobile.