Cuando alguien pregunta por las medidas de una landing page suele querer decir una de estas dos cosas: qué tamaño en píxeles hay que darle al diseño, o cuánto debe ocupar la página (corta y directa o larga y detallada). Las dos tienen respuesta, y la buena noticia es que no hace falta elegir: primero se fija el lienzo y luego se decide cuánto contar en él.
¿Qué medidas en píxeles debe tener una landing page?
Una landing no tiene un tamaño fijo como un cartel: se adapta a la pantalla de quien la abre. Lo que sí se fija son tres cosas: el ancho del diseño, el ancho del contenido y la altura de la primera pantalla.
| Medida | Valor recomendado | Por qué |
|---|---|---|
| Ancho del diseño en ordenador | 1440 px | Cubre bien desde portátiles de 1366 px hasta monitores de 1920 px. |
| Ancho del contenido (textos y bloques) | 1140–1280 px, centrado | En pantallas grandes, las líneas demasiado largas cansan al leer. |
| Ancho del diseño en móvil | 360–390 px | Es el ancho de la mayoría de móviles; diseña a 375 o 390 px y prueba a 360. |
| Primera pantalla en ordenador | unos 650–750 px de alto | Es lo que se ve sin hacer scroll en un portátil normal, ya descontada la barra del navegador. |
| Primera pantalla en móvil | unos 600–700 px de alto | Ahí tiene que caber el titular, la frase que lo explica y el botón. |
| Imagen de cabecera | 1920 px de ancho, en WebP, menos de 200 KB | Se ve nítida en pantallas grandes y no frena la carga. |
Con estas cifras el diseño funciona en casi cualquier pantalla. Lo que no conviene es diseñar a 1920 px y dar por hecho que todo el mundo lo verá así: la mayoría de visitas a una landing llegan desde el móvil, y es ahí donde más se nota si algo no cabe.
Diseña primero para el móvil
Si empiezas por la versión de ordenador, la de móvil acaba siendo «la de ordenador apretada». Al revés funciona mejor: diseñas a 390 px con lo imprescindible (titular, beneficio principal, botón) y luego aprovechas el ancho extra del ordenador para colocar la imagen al lado del texto, poner tarjetas en columnas o añadir detalles.
Truco rápido: abre tu landing en el móvil y, sin tocar la pantalla, pregúntate si se entiende qué ofreces y qué tienes que hacer. Si la respuesta está por debajo de la primera pantalla, hay que subirla.
¿Qué tiene que caber en la primera pantalla?
La primera pantalla (lo que en inglés llaman above the fold) no tiene que contarlo todo, pero sí lo suficiente para que el visitante decida quedarse. Debe incluir:
- Un titular que diga qué consigue quien está leyendo, no lo que haces tú. «Tu tienda online lista en una semana» funciona mejor que «Somos expertos en comercio electrónico».
- Una frase de apoyo que quite la primera duda: precio, plazo, para quién es.
- Un único botón principal, visible y con un texto que diga qué pasa al pulsarlo («Pedir presupuesto», «Descargar la guía»).
- Una imagen que enseñe el resultado, no una foto genérica de gente sonriendo en una oficina.
Landing corta o landing larga: ¿cuál convierte más?
Esta es la otra «medida», y aquí la respuesta honesta es depende de lo que cueste decir que sí. Una landing debe ser tan larga como haga falta para resolver las dudas de quien la lee, y ni un bloque más.
Cuándo funciona una landing corta
Si lo que pides es poco (descargar algo gratis, apuntarse a una lista, pedir que te llamen) o el visitante ya te conoce porque viene de tu boletín, cada párrafo extra es una excusa para irse. Aquí basta con el titular, tres beneficios y el formulario. Cuantos menos campos tenga el formulario, mejor: nombre y correo o teléfono suelen ser suficientes.
Cuándo necesitas una landing larga
Si lo que pides cuesta más (un servicio de cierto precio, un contrato, algo que el visitante no conocía), necesita respuestas antes de decidir. Una landing larga bien hecha no es un muro de texto: es una sucesión de bloques que van contestando, por orden, las preguntas que se haría un cliente:
- ¿Qué es y qué consigo? (titular y primera pantalla)
- ¿Por qué vosotros? (beneficios concretos, mejor con cifras)
- ¿Es verdad? (opiniones, casos, logotipos de clientes)
- ¿Cuánto cuesta y qué incluye? (precio claro, sin letra pequeña)
- ¿Y si…? (preguntas frecuentes)
- Vale, ¿qué hago? (el mismo botón, repetido)
El botón principal tiene que aparecer varias veces a lo largo de la página, más o menos cada dos o tres pantallas, para que quien ya está convencido no tenga que volver arriba a buscarlo.
Errores de tamaño que hacen perder clientes
- Una imagen de cabecera de varios megas. Es la causa más habitual de que una landing tarde en aparecer, sobre todo con datos móviles. Redúcela a 1920 px de ancho y conviértela a WebP.
- Textos a 14 px en el móvil. El cuerpo de texto debería rondar los 16–18 px; si hay que hacer zoom para leer, la gente no lo hace: se va.
- Botones pequeños o pegados. En el móvil, un botón debería medir al menos 44 px de alto para pulsarlo con el dedo sin acertar al de al lado.
- Formularios eternos. Cada campo que añades reduce las respuestas. Pide solo lo que necesitas para el siguiente paso.
- Un servidor lento. Puedes optimizar todo lo anterior y que la página tarde igual si el alojamiento responde despacio. Para una landing que recibe tráfico de campañas, un hosting WordPress con LiteSpeed o un hosting profesional bien configurado marca la diferencia.
Cómo saber si tu landing tiene la medida justa
No hay que adivinarlo: se mide. Instala una herramienta de analítica y mira hasta dónde llega la gente al hacer scroll y en qué punto abandona. Si casi nadie pasa de la segunda pantalla y el botón está en la quinta, sobra página o falta interés arriba. Si la gente llega al final pero no pulsa, faltan respuestas o el botón no convence.
Y cuando dudes entre dos versiones (corta o larga, un titular u otro), haz una prueba A/B: muestra cada versión a la mitad de las visitas durante unas semanas y quédate con la que más conversiones consiga. Antes de lanzar la campaña, comprueba también que Google ya tiene la página indexada; tienes cómo hacerlo en nuestra guía sobre el comando site de Google.
¿Quieres que te diseñemos la landing?
La hacemos en WordPress o programada a medida, pensada primero para el móvil y con el hosting incluido. Cuéntanos qué quieres conseguir y te pasamos presupuesto.
