Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
¿Cómo lo hacemos?
Para maquetar una newsletter apenas usaremos divs. Los divs son una herramienta indispensable para maquetar páginas webs. Sin embargo los lectores de correos funcionan como lo hacían los navegadores hace años. Leen tablas, y nuestras newsletter deben estar basadas en estas etiquetas.
Además, en general, tampoco son capaces de interpretar las media queries, por lo menos el lector de correo de gmail no lo hace.
Nosotros queremos que nuestra newsletter se vea correctamente cuando la ejecutemos en el navegador de nuestro pc y en nuestro teléfono móvil. Para ello debemos hacerla responsive. Pero el mecanismo fundamental para hacer una página responsive es el uso de media queries, y estas no funcionan para los lectores de correos… así que… ¿qué podemos hacer?
Si ha dos tablas les asigno el estilo display:inline-block, se pondrán en horizontal. Pero sólo en el caso de que quepan horizontalmente. Si no caben horizontalmente, se pondrán en vertical.
Si ha dos tablas les asigno el estilo display:inline-block, se pondrán en horizontal. Pero sólo en el caso de que quepan horizontalmente. Si no caben horizontalmente, se pondrán en vertical.
Por tanto, la idea consiste en que si tenemos dos columnas, escribamos el código de dos tablas que tienen el estilo display:inline-block para que se coloquen horizontalmente. Al ir reduciendo el tamaño de la pantalla, llegará un momento en que no quepan, y a partir de ahí se ubicarán verticalemente.
Luego, con los estilos max-width:300px y width:100% podremos afinar el resultado para que la tabla tenga el máximo ancho posible, siempre y cuando este no sea superior a los 300px, en cuyo caso se quedaría en esa medida.
Como ves, la mecánica es sencilla. La explico en los tres minutos que dura el siguiente tutorial. Sin embargo, el tema de los mailings y las newsletter es algo que piden a menudo en empresas de marketing aparece demandado en ofertas de empleo.
<table style="text-align:center; margin:auto">
<tr>
<td>
<table class="column" style="display: inline-block; max-width: 300px; width: 100%;">
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam maiores blanditiis vitae, esse incidunt officia, assumenda illo! Ratione et laudantium architecto repellendus obcaecati possimus. Quod voluptatibus porro, officiis eius voluptates.</td>
</tr>
</table>
<table class="column" style="display: inline-block; max-width: 300px; width: 100%;">
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt inventore harum dicta minus culpa recusandae consequuntur optio voluptas distinctio ratione! Accusantium, officiis. Ducimus, itaque sint vitae consequuntur est nihil possimus.</td>
</tr>
</table>
</td>
</tr>
</table>Ejercicio – Hacer la siguiente newsletter responsive
Para que las imágenes se vean, habrá que subirlas a google drive, y hacerlas públicas mediante este enlace.