Landing pages responsives: Guía efectiva para triunfar

Saber adaptarte es una características más importante que debes tener como experto en marketing digital. Como parte de ese proceso de adaptación al cambio está la necesidad de entender la importancia de las landing pages responsives y su naturaleza.

En este mundo de constante cambio, las landing pages responsives son uno de los mayores cambios que la industria del marketing ha vivido.  Las cosas eran mucho más fáciles para los diseñadores web antes de que los iPad, móviles y tablets existiesen. Los usuarios de Internet buscaban estrictamente en pantallas de escritorio y portátiles que no variaban mucho en tamaño, lo que significaba que la mayoría de los sitios web se veían similares sin importar el tipo de pantalla que cada usuario tuviese.

Pero, todo cambió cuando se empezó a navegar en los sitios webs de las marcas con este tipo de dispositivos. De hecho, en 2014, la mayoría del tráfico de Internet en todo el mundo vino de dispositivos móviles, y ha sido así desde entonces. Un año después, las estadísticas dicen que los usuarios de promedio se pasaban tres horas al día en sus dispositivos móviles, un gran cambio en comparación con los 20 minutos del 2008.

Este cambio resultó de lo más impactante para los diseñadores web que con sus métodos de diseño tradicionales no se ajustaban a las necesidades de los usuarios. Un diseño no responsive en una landing page  se salta todas las reglas de usabilidad web que una marca debe seguir para ofrecer una experiencia de usuario efectiva.

Diseño web adaptable y el inicio del uso del móvil

Cuando la revolución móvil empezó hace varios años, inicialmente la forma más popular de adaptar un sitio web a los usuarios era a través de landing pages responsives completamente nuevas a la versión de escritorio. Una nueva landing page diseñada exclusivamente para este tipo de dispositivos.

El mayor problema de esta práctica era el doble mantenimiento del sitio web que requería tener dos páginas web separadas y diferentes. Era necesario crear y diseñar campañas de SEO separadas, campañas de PPC, estrategias de contenido, etc., para las versiones de escritorio y móvil de un sitio web.

Esta practica común siguió hasta que el número de tamaños de pantalla y resoluciones se convirtieron en una labor demasiado ardua para mantenerse al día y tener un sitio web en condiciones. Tal y como se observa en la imagen superior, la variación de dispositivo a lo largo del día esta clara.

Las preferencias de uso de dispositivos cambian según el momento del día de cada usuario. Desde un smartphone por la mañana pasando por la versión escritorio y terminando por la tablet.  Y esto tiene sentido porque en cada momento las necesidades del usuario son diferentes.

Landing pages responsives

Con el tiempo cada vez iba siendo más obvio que la creación de múltiples versiones de un sitio web no era una solución viable. Mira sino la imagen superior. Es un resumen de todos los dispositivos que la marca Samsung ha ido comercializando con el tiempo. ¿Crees que una marca puede gestionar tantos tamaños de sitio web? Es prácticamente imposible.

Traslada este mismo esquema a otras marcas y sus propias dimensiones. Sin embargo, algunas marcas se ha resistido a dejar el diseño web adaptable hasta que Google intervino para revelar que su algoritmo de búsqueda cambiaría pronto para recompensar a los sitios que fuesen responsive y penalizaría a aquellos que no lo fuesen:

“A partir del 21 de abril (2015), expandiremos nuestro uso de la compatibilidad con dispositivos móviles como una señal de clasificación. Este cambio afectará las búsquedas móviles en todos los idiomas del mundo y tendrá un impacto significativo en nuestros resultados de búsqueda. En consecuencia, a los usuarios les resultará más fácil obtener resultados de búsqueda relevantes y de alta calidad que estén optimizados para sus dispositivos«.

Un mensaje claro. O adaptarte sin problema a todos los dispositivos móviles o no aparecerás en los resultados de búsqueda de Google. ¿La solución? Las landing pages responsives.

Diseño responsive: ¿Qué es y cómo funciona?

Google  llevaba tiempo abogando por un diseño responsive antes de hacerlo público. «Si está listo para crear un sitio compatible con dispositivos móviles, elija un diseño web responsive» «El diseño responsive es el patrón de diseño recomendado por Google«.

El diseño de landing pages responsives hacen que la navegación sea más fácil y eficaz. Puedes girar tu teléfono, ponerlo al revés, cambiar la orientación, lo que quieras pero el contenido del sitio siempre se ve bien. A diferencia de los sitios web móviles aislados, las landing pages responsives adaptan el diseño al entorno de visualización mediante el uso de cuadrículas fluidas basadas en proporciones e imágenes flexibles.

Básicamente, mientras los sitios web adaptativos se adaptaron 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. Debido a que los elementos de la landing pages responsives están codificados para ocupar un determinado porcentaje de una pantalla. De esta forma solamente ocuparán esa parte de la pantalla sin importar el tamaño del dispositivo.

Principios básicos de las landing pages responsives

El diseño web responsive es la solución para el problema de pantallas múltiples. Sin tamaño de página fijo, ni milímetros ni pulgadas, ni restricciones físicas contra las que luchar puede resultar algo complicada diseñarla. Puede resultar difícil crear una landing page responsive. Estos son algunos principios básicos que te ayudarán con tu landing page:

1.- Móvil o escritorio primero

Técnicamente, hoy en día no debería haber mucha diferencia si un proyecto se inicia desde una pantalla más pequeña a una más grande o viceversa. Sin embargo, agrega limitaciones adicionales y te ayuda a tomar decisiones si empiezas con la versión móvil primero.

2.- Valores máximos y mínimos

A veces es genial que el contenido ocupe todo el ancho de una pantalla. En un dispositivo móvil tiene su lógica. Pero tener el mismo contenido que se extiende a todo el ancho de la pantalla de tu televisión por ejemplo, tiene menos sentido. Es por esto que los valores mínimos y máximos ayudan. Por ejemplo, tener un ancho de 100% y un ancho máximo de 1000 px significaría que el contenido llenará la pantalla, pero no sobrepasará los 1000 px. Diseña el tamaño en función de lo que estés buscando.

3.- Webfonts vs. Fuentes del sistema

¿Quieres tener unos tipos de letra que se vean muy bien y sean algo diferentes en tu sitio web? Utiliza entonces webfonts. Pero recuerda que aunque se vean impresionantes, cada fuente se tiene que descargar cada vez que un usuario entra en tu web. Por lo tanto, cuantas más tengas más tiempo tardará en cargar tu landing page. Las fuentes del sistema sin embargo, 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í, utiliza un mapa de bits. Si no, considera usar una imagen vectorial. Para los mapas de bits usa un jpg, png o un gif. Para los vectores, la mejor opción sería una fuente SVG o un icono. Cada uno tiene sus beneficios e inconvenientes. Sin embargo, lo más importante es tener en cuenta el tamaño. Las imágenes no deben estar online sin haber sido optimizadas. Por otro lado, los vectores a menudo son pequeños, pero algunos navegadores antiguos no los admiten. Además, si tiene muchas curvas, podría pesar más que un mapa de bits.

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, necesitas que las unidades de medida sean flexibles y funcionen en todas partes. Aquí es donde los porcentajes son recomendables. Por lo tanto, hacer algo con un 50% de ancho significa que siempre ocupará la mitad de la pantalla. O la mitad de la ventana gráfica, que es el tamaño de la ventana del navegador abierta.

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. La mayoría de las propiedades de CSS se pueden cambiar de un punto de ruptura a otro. Usualmente el lugar de poner cada uno depende del contenido. Si se rompe una frase, es posible que tengas que agregar un punto de ruptura.

7.- El contenido

Lo más importante en un landing es el contenido. A medida que los tamaños de pantalla se hacen más pequeños, el contenido empieza a ocupar más espacio vertical. Todo lo que se encuentra debajo también será empujado hacia abajo. Por eso, a pesar de que todo lo que se ha mencionado anteriormente es clave, un buen diseño de landing page lo hace el contenido.

El contenido es lo que realmente interesa al usuario. Una landing page responsive es solamente el vehículo que te ayuda a hacer llegar ese contenido a tus usuarios. Prioriza la calidad frente a la cantidad. Escribe un contenido que genere impacto entre los usuarios, que les interese y les aporte valor.

En MDirector podemos ayudarte a crear tu landing page con nuestro software de generación del landing pages. Podrás crear las mejores landing pages responsives y ser el primero en el ranking de buscadores.