Aprendé qué es una landing page responsive
Última actualización: 27/03/2020
Te explicamos en qué consisten estas páginas de aterrizaje y cómo usarlas en tu web.
Saber adaptarte es una de las características más importante que debés tener como experto en marketing digital. Dentro de esa adaptación, está la necesidad de entender la importancia de las landing pages responsives y su naturaleza.
Un diseño no responsive en una landing page omite todas las reglas de usabilidad web que tu marca debe seguir para ofrecer una experiencia de usuario efectiva.
Diseño responsive: ¿qué es y cómo funciona?
El diseño responsive es el patrón de diseño recomendado por Google. Ofrecé una navegación más fácil y eficaz. Podés girar tu teléfono, ponerlo al revés, cambiar la orientación, lo que quieras, pero el contenido del sitio siempre se ve bien. Así, mientras los sitios web adaptativos se ajustaron a tamaños de pantalla específicos, los responsive se diseñan utilizando porcentajes de la pantalla total del dispositivo en el que se está viendo. Los elementos de la landing pages responsives están codificados para ocupar un determinado porcentaje de una pantalla. Por lo tanto, solo ocuparán esa parte de la pantalla sin importar el tamaño del dispositivo.
Principios básicos de las landing pages responsives
Te damos algunos principios básicos que te ayudarán con tu landing page:
1- ¿Móvil o escritorio primero?
Comenzá diseñando la versión móvil primero, te agregará limitaciones adicionales y te ayudará a tomar decisiones útiles. Luego, podrás replicarla de forma más simple.
2 – Valores máximos y mínimos
Pensá en los valores máximos y mínimos para cada dispositivo y su impacto. Por ejemplo, tener un ancho mínimo de 320 px y un ancho máximo de 1000 px significaría que el contenido llenará la pantalla, pero no sobrepasará los 1000 px. Diseñá el tamaño en función de lo que estés buscando.
3 – Webfonts vs. fuentes del sistema
¿Querés tener unos tipos de letra que se vean muy bien y sean diferentes en tu sitio web? Utilizá webfonts. Aunque se vean impresionantes, cada fuente se tiene que descargar cada vez que un usuario entra en tu web. Así, cuantas más tengas más tiempo tardará en cargar tu landing page. Las fuentes del sistema son rápidas, lo usual es que los usuarios las tengan en local. Si es así, esa fuente se convertirá en la predeterminada.
4- Imágenes bitmap vs. vectores
¿Tu icono de marca tiene muchos detalles e incluso algunos efectos aplicados? Si es así, utilizá un mapa de bits. Si no, considerá usar una imagen vectorial.
Para los mapas de bits utilizá un jpg, png o un gif, mientras que para los vectores la mejor opción sería una fuente SVG o un icono. Lo más importante es tener en cuenta el tamaño.
5- Unidades de medida
La landing page puede estar diseñada para una pantalla de escritorio, móvil u otro dispositivo. La densidad de píxeles también puede variar. Por eso, necesitás que las unidades de medida sean flexibles y funcionen en todas partes. Acá es donde los porcentajes son recomendables.
6- Puntos de ruptura en el diseño
Los puntos de ruptura permiten que el diseño cambie en puntos predefinidos. Es decir, que tenga 3 columnas en un escritorio, pero solo 1 columna en un dispositivo móvil. Si se rompe una frase, es posible que tengas que agregar un punto de ruptura.
7- El contenido
Lo más importante en una landing es el contenido. A pesar de que todo lo que te dijimos anteriormente, la clave de un buen diseño de landing page es el contenido. Esto es lo que interesa al usuario.
Una landing page responsive es solamente el vehículo que te ayuda a llevar ese contenido a tus usuarios. Priorizá la calidad frente a la cantidad. Escribí un contenido que genere impacto entre los usuarios, que les interese y les aporte valor.
¿Te sentís listo para crear las mejores landing pages responsives y ocupar los primeros puestos en el ranking de buscadores? #Realecommerce.
Aplicación certificada Platinum
