No existe una medida única de landing page: el alto depende de tu oferta, pero el ancho sí tiene reglas. La versión corta es que diseñes sobre un lienzo de 1440 px de ancho, con el contenido clave dentro de los primeros 1000 px de alto y todo pensado primero para móvil.
La medida correcta no es la más bonita, es la que deja tu mensaje y tu botón donde el ojo los encuentra.
Medidas base para diseñar tu landing
| Elemento | Medida recomendada |
|---|---|
| Ancho del diseño (desktop) | 1440 px, contenido a 1140–1200 px |
| Ancho móvil | 360–414 px de referencia |
| Above the fold | Primeros 600–1000 px de alto |
| Imagen hero | 1920 px de ancho, comprimida |
| Ancho de texto | 50–75 caracteres por línea |
El "above the fold" es lo que se ve sin hacer scroll. Ahí van tu propuesta de valor y tu primer botón.
Móvil primero, siempre
En México, la mayoría de tu tráfico de anuncios llega por celular. Si tu landing se ve bien en desktop pero se rompe en móvil, estás quemando presupuesto.
- Botones de mínimo 44 px de alto, fáciles de tocar con el pulgar.
- Tipografía de 16 px o más en el cuerpo.
- Formularios cortos, con el mínimo de campos.
- Imágenes que carguen rápido incluso con datos móviles.
¿Qué tan larga debe ser una landing page?
El largo depende de la temperatura del tráfico y del precio de tu oferta.
Para captar un lead simple con un formulario, una landing corta basta. Para vender un servicio caro que necesita convencer, una landing larga con pruebas y testimonios funciona mejor.
La regla es simple: tan larga como necesites para responder todas las dudas, ni una sección más. Si quieres ver formatos, revisa estos ejemplos de landing page.
Alto de cada sección: una guía
No hay una regla rígida, pero sí referencias que funcionan en móvil y desktop.
| Sección | Alto sugerido (desktop) |
|---|---|
| Hero | 600–800 px |
| Beneficios | 400–600 px |
| Prueba social | 300–500 px |
| Cierre y CTA | 400 px |
Deja aire entre secciones. Un diseño apretado cansa y esconde tu botón.
Errores de medidas más comunes
- Hero tan alto que el usuario ni sospecha que hay más abajo.
- Texto a todo lo ancho, imposible de leer en pantallas grandes.
- Botones diminutos en móvil.
- Imágenes pesadas sin comprimir.
Cada uno de estos errores le cuesta conversiones a una landing que, en papel, se veía bien.
Peso y velocidad: la medida que nadie mira
De nada sirve el diseño perfecto si la página tarda cinco segundos en cargar.
Apunta a menos de 2 segundos de carga. Comprime imágenes, evita videos pesados en el hero y limita los scripts de terceros. Cada segundo extra te cuesta conversiones.
Medidas de las imágenes clave
| Imagen | Tamaño sugerido |
|---|---|
| Hero | 1920 × 1080 px |
| Logos de clientes | 200 × 80 px |
| Íconos | 64 × 64 px (SVG mejor) |
| Foto de producto | 800 × 800 px |
Usa formatos modernos como WebP para bajar el peso sin perder calidad.
Preguntas frecuentes
¿Cuál es el ancho ideal de una landing page?
Diseña sobre 1440 px y mantén el contenido central entre 1140 y 1200 px. Así se ve bien en pantallas grandes sin estirarse de más.
¿Una landing debe caber en una sola pantalla?
No necesariamente; lo importante es que lo esencial esté above the fold. El resto de la página puede extenderse todo lo que la oferta requiera.
¿Qué medida uso para móvil?
Diseña con 360 a 414 px de referencia y prueba en dispositivos reales. Botones grandes, texto legible y formularios cortos importan más que la medida exacta.
¿El tamaño afecta el SEO y los anuncios?
Sí, sobre todo por la velocidad de carga, que influye en tu ranking y en tu Quality Score. Una landing pesada sube el costo de tus campañas de paid.
¿Importa el alto total de la página para Google?
No directamente; a Google le importa la velocidad y la experiencia, no cuántos píxeles mide. Una landing larga rankea bien si carga rápido y responde la intención.
¿Qué resolución uso para pantallas retina?
Exporta al doble del tamaño de despliegue y comprime; así se ven nítidas en pantallas de alta densidad sin disparar el peso. WebP te ayuda a mantener el archivo ligero.
En Dinametra diseñamos landing pages medidas para convertir tráfico de anuncios, no solo para verse bien, y las conectamos con tus campañas desde el mismo tablero. Si quieres una página que aguante tu inversión publicitaria, empieza por entender qué es una landing page y luego agenda una llamada con el equipo.
.svg)
