Últimamente no paramos de escuchar estas palabras: media queries, responsive design, hojas de estilo para dispositivos móviles, etc. ¿Pero de qué va todo esto?

Responsive design no es más que preparar un diseño que pueda adaptarse a todos los diseños, des de pantallas de 1200px a 480px. Las media queries (declaración @media) son una pequeña parte de código que añadiremos a nuestras hojas de estilo para poder realizar modificaciones específicas en el css de dispositivos móvil concretos. Esto nos permitirá mostrar u ocultar elementos, redimensionarlos, cambiar colores, etc. Vamos a ver cómo:

Si queremos definir estilos específicos para un dispositivo móvil, haríamos:

<style type="text/css">
    @media only screen and (max-device-width: 480px) {
        /* Aquí poner el CSS para el móvil*/
    }
    /* Y aquí el CSS normal, recordando que según que dispositives
        no leerán CSS del head */
</style>

 

Definiremos los estilos de los elementos html con clases o selectores atributo para evitar que Yahoo!Mail pase por alto las clases.  Ambos funcionan de forma parecida pero el sistema de escritura es diferente. Hay que tener en cuenta que Gmail para android no las admite.

HTML

<table class=”contenedor_fondo” 
        style="background: #96c6eb; 
        padding: 20px; margin: 0px;" cellpadding="0" 
        cellspacing="0" width="100%" 
        bgcolor="def0f9" border="0"><tbody>
     <tr><td>
        <table class=”contenedor” 
               style="font-family: 'Verdana';" 
               cellpadding="0" cellspacing="0" width="600" 
               align="center" bgcolor="#FFFFFF"><tbody>
<tr><td>
             <p class=”parrafo_header” style="text-align: center; 
                 font-size: 11px; font-family: Helvetica, Arial, sans-serif; 
                 color: #fff; margin: 0px;" align="center">NewsletterSoft</p>

CSS

<style>
      @media only screen and (max-device-width: 480px) {
            table[class=contenedor] {
              width:350px !important; 
              background-color:#FFFFFF;
             /* Esto hará que el ancho total del newsletter sea de 350px, tendremos que modificar también los anchos de imágenes y otros elementos en el interior de dicha tabla */
             }
      /* Como hemos cambiado el color de fondo cambiaremos también el color del párrafo dentro del header para que pueda leerse*/
             p[class=”parrafo_header”] {
                  color:#000000;
              }
       }
</style>

 

Probad de insertar este código en vuestro newsletter y testead los cambios para ver cómo se ve. Podéis añadir tantos cambios como queráis y mantener el css del head para otros dispositivos fuera del @media. Tened en cuenta que todo este código es peso para vuestro newsletter y es posible que este aumente.

Si queréis ampliar vuestros conocimientos en la maquetación de vuestras campañas de email marketing, boletines informativos y/o newsletters, aquí tenéis otros artículos que os pueden ser de ayuda:

1. Utilizar las herramientas adecuadas

2. Maquetar con tablas anidadas

3. CSS en línea y atributos de tablas

4. Formato de links y optimización de imágenes

5. Responsive Email Design

6. Media Queries