Términos relacionados

¿QUÉ ES ACRELIA NEWS?

Plataforma de email marketing en español con todo lo que necesitas para diseñar, enviar y realizar de forma efectiva el seguimiento de tus campañas de email

REGISTRATE AHORA

Responsive design

Diseño que se adapta al dispositivo desde el que se consulta una página o correo electrónico. Así, sea con ordenador, tableta o teléfono inteligente, se consigue la misma visualización utilizando un único diseño en lugar de uno diferente para cada resolución de pantalla.

El editor de campañas de email de Acrelia te permite crear campañas que se adaptan a todo tipo de dispositivos. Prueba gratis ahora.

¿Cómo funciona el diseño responsive?

El diseño responsive es flexible para ajustarse automáticamente al dispositivo que está abriendo la web o el email. Funciona con porcentajes y valores proporcionales, de manera que no se establece un ancho fijo de pantalla porque podría provocar que apareciese un scroll vertical u horizontal si tiene un tamaño diferente para el que se diseñó.

Aunque una traducción habitual de responsive es adaptativo, en realidad son conceptos diferentes: el primero utiliza un único diseño mientras que el segundo diseña un contenido para cada dispositivo (como varios ordenadores con diferentes sistemas operativos y navegadores) y así adaptarse a sus características (tamaño de pantalla, resolución).

El diseño responsive contribuye a ofrecer una buena experiencia al usuario y asegurar así que se queda en la página. Si no se cuida este aspecto del contenido, las conversiones pueden bajar dado que le resultará más difícil realizar la acción, por ejemplo si el botón es demasiado pequeño o no visualiza correctamente las imágenes.

¿Cómo hacer un diseño responsive?

Todos los gestores de contenido incluyen plantillas responsive, también los proveedores de email marketing. Esta es la forma más sencilla de asegurarse de que todos los usuarios ven correctamente el mensaje. Además, al ser personalizables, no se puede estropear el diseño al realizar los cambios para ajustarlo a la identidad corporativa o al introducir el contenido correcto.

Para saber si es el diseño que se está utilizando lo es, basta con hacer la prueba cambiando el tamaño del propio navegador: al reducir el ancho, la estructura y las imágenes deben variar para adaptarse a las nuevas dimensiones. Por lo general, se reduce el número de columnas y el menú se condensa. También es posible hacer un envío a una lista de prueba para verificar la plantilla en varios dispositivos.

El responsive design funciona con hojas de estilo (CSS). En ese código es donde se deben incluir las etiquetas de medidas máximas (en píxeles), por ejemplo para establecer el ancho de la pantalla que servirá de base para el resto de dispositivos. También hay que tener en cuenta que la tipografía y las imágenes no se vean muy pequeñas o grandes, por eso se utilizan valores relativos en lugar de absolutos (por ejemplo 80% del ancho y no 1024 px).