landing-page-master

Landing Page Master

Úsalo cuando un propietario dice que la gente visita pero nadie reserva, compra o se pone en contacto, envía una página para arreglar, o pide una nueva página de aterrizaje.

El objetivo es una página que parezca que una pequeña empresa con buena financiación le pagó a un buen diseñador, que diga todo lo que un comprador necesita a simple vista, y que permita a un visitante de teléfono actuar con un solo toque, usando solo lo que el propietario te dijo. Usa tu propio criterio de diseño completo. Estas reglas marcan lo que las páginas fuertes hacen bien y las débiles omiten; no son una plantilla. Trabaja en silencio, luego responde en la forma que se indica en "Entrégala".

Alcance: si se proporciona una página, audítala y repárala. "Solo audítala" significa hallazgos y cambios exactos, sin nuevo HTML. Si no hay página, crea una nueva. Nunca publiques, envíes, rastrees ni cambies una cuenta.

1. Obtén todos los hechos

Enumera para ti mismo: qué se vende y cada precio, complemento, plan, cuota, total, depósito, reembolso y garantía; cada lugar atendido; para quién es y para quién no; de dónde vienen los visitantes y las palabras que vieron allí; cada ruta que un visitante puede usar (reserva, pago, teléfono, mensaje de texto, correo electrónico, perfil, recursos) y si cada una funciona; cada pieza de prueba en sus palabras exactas; cada límite; las preguntas que hacen los compradores con las respuestas del propietario; y las fotos o archivos que el propietario confirma. El resumen del propietario supera a la página anterior cuando están en desacuerdo.

Antes de escribir, verifica que cada uno de esos hechos tenga un lugar en la página. Perder un precio, una opción de pago, un enlace de compra o un lugar atendido es el error más costoso que una reparación puede cometer.

2. Nombra lo que cuesta más

Recorre la página anterior como un visitante de teléfono. Nombra los pocos fallos que pierden a la mayoría de la gente: un titular que ignora de dónde vinieron, un botón muerto, un precio oculto, una opción de pago faltante, una afirmación falsa, un área reducida o inflada, respuestas ocultas o vacías, una imagen rota, un formulario que no envía a ningún lado, contraste ilegible. Conserva lo que es verdadero y funciona: enlaces y archivos que funcionan, citas y precios reales, las palabras verdaderas del propietario. No conserves un diseño débil. Reemplázalo por uno completo.

3. Un diseño acabado, no un esquema

La página debe sentirse rica y completa tanto en ancho de teléfono como de escritorio.

• Primera pantalla. Lidera con lo que el visitante vino a buscar, en sus palabras: la promesa del anuncio, el servicio buscado y el lugar, o el dolor que describe el resumen. Debajo, una línea simple sobre para quién es, el precio o precio inicial, el botón principal y la segunda ruta real. En escritorio, usa el ancho: un héroe de dos columnas con un panel lateral fuerte (la tarjeta de oferta, una tarjeta corta de "qué incluye", la foto del propietario, o una ilustración SVG en línea del oficio) en lugar de una columna estrecha solitaria.
• Sistema visual. Una paleta extraída del oficio, una escala tipográfica clara con un tamaño de visualización seguro para los encabezados, etiquetas de sección pequeñas en mayúsculas, bandas de sección teñidas, tarjetas con bordes o sombras suaves, espaciado generoso, y un contenedor de página de aproximadamente 1100 a 1200 px de ancho. Texto del cuerpo de 16 px o más grande y longitud de línea legible dentro de las tarjetas y columnas.
• Secciones que el resumen respalda, en el orden que resuelve las dudas a medida que surgen: una tira de prueba (calificación con recuento y fuente, años, seguro, membresías, exactamente como se indica), lo que obtienes, la oferta y los precios, cómo funciona en tres o cuatro pasos numerados, las citas del propietario como tarjetas, una nota corta del propietario en su voz, respuestas, un llamado a la acción final, un pie de página. Dale a cada sección un encabezado que diga algo específico sobre este negocio. Escribe tanto como los hechos justifiquen: completo, nunca relleno.
• Acción persistente en teléfonos. Una barra delgada fijada en la parte inferior de la pantalla por debajo de 720 px de ancho, con la acción principal y la segunda ruta real (llamar, enviar mensaje de texto). Agrega relleno inferior a la página para que nunca cubra el contenido, y mantenla fuera del camino de los campos del formulario. En escritorio, el encabezado lleva la acción.
• Sin ventanas emergentes, cuentas regresivas ni urgencia falsa.

4. Respuestas a la vista

• Responde las preguntas que nombra el resumen (precio, área, horario, qué traer o poseer, qué sucede después, reembolsos) como texto visible: una cuadrícula de respuestas de tarjetas cortas o una lista de dos columnas. No escondas las respuestas clave en <details> o acordeones. Un pliegue es aceptable solo para extras menores después de que las respuestas clave ya sean visibles.
• Coloca cada respuesta cerca de la duda que resuelve también, para que el área aparezca junto al botón de reserva y el reembolso aparezca junto al precio.
• El área de servicio, completa. Nombra cada lugar que el propietario atiende en la línea superior del héroe o justo debajo del titular, y nuevamente cerca de la sección de contacto. Nunca lo acortes al primer o lugar más grande, y nunca lo amplíes.

5. La oferta, completa

• Construye un bloque de oferta claro: cada opción como su propia tarjeta con su nombre, precio exacto, lo que incluye, cualquier plan de pago con su monto de cuota y total exactamente como se indica, y su propio botón a su propio enlace de compra o reserva que funcione.
• Si hay varios enlaces de compra (único pago, plan de pago, niveles), cada uno aparece como su propio botón claramente nombrado. Nunca los colapses en uno solo.
• Coloca los términos de garantía, reembolso o depósito en la tarjeta o junto a ella en tipo de letra normal legible.
• Cada precio, complemento, plan, cuota y total que el propietario dio aparece exactamente; ninguno se agrega.

6. Rutas que funcionan, y nada que finja

• Usa solo los enlaces, números y direcciones proporcionados. Nunca inventes una URL, un sistema de reserva o un servicio.
• Cada ruta funciona con JavaScript desactivado: enlaces simples y elementos nativos. El teléfono es tel:, el texto es sms: con un cuerpo inicial, el correo electrónico es mailto: con un asunto y un cuerpo que enumera lo que el propietario necesita. Muestra el número o la dirección en sí también como un enlace.
• Nunca pongas un formulario deshabilitado donde existe una ruta que funciona. Elimina los formularios que no publican en ningún lado y enlaza la ruta que funciona en su lugar. Si el resumen pide un marcador de posición, construye un formulario etiquetado con una action de marcador de posición obvia, sus campos en un <fieldset disabled>, una línea que dice que aún no está conectado, y la ruta que funciona junto a él.
• Di una brecha una vez, en una línea simple donde sea importante. No repitas notas de "nada se envía" o "no conectado" por toda la página.
• Conserva cada destino que funcione que aún sirva a un propósito, etiquetado honestamente. Elimina los destinos muertos o falsos y nombra cada eliminación en la auditoría.

7. Recursos

• Usa las fotos confirmadas del propietario en las rutas exactas dadas, con alt, width, height específicos y un color de fondo.
• Elimina cualquier imagen, logotipo o archivo que el resumen no confirme, y dilo en la auditoría. Reemplázalo con una ilustración SVG en línea del oficio marcada aria-hidden="true", dimensionada para llenar su panel, que nunca pueda pasar por el trabajo real del propietario.
• Un archivo HTML. Sin fuentes externas, scripts, rastreadores ni imágenes remotas.

8. Accesible para todos

Un enlace de salto, un h1, estilos de enfoque visibles, etiquetas reales en cada entrada, objetivos táctiles de al menos 44 px, contraste suficiente, y un diseño que funcione desde 360 px hasta escritorio sin desplazamiento lateral.

9. Reglas de verdad

Ejecuta cada línea contra estas. Elimina cualquier cosa que falle.

• Solo los hechos del propietario. Sin reseñas, recuentos, calificaciones, logotipos, premios, garantías, tiempos de respuesta o "mejor del pueblo" inventados. Elimina los falsos que la página anterior tenía y dilo.
• Citas exactas, con los nombres y lugares que el propietario dio. Cambiar la redacción de una cita cuenta como inventarla.
• Límites respetados. Nunca prometas fuera del área, capacidad, edades o alcance. Sin promesas médicas, de ingresos, de ahorros o de velocidad. Sin escasez o plazos falsos.
• Nunca escribas "próximamente" ni ninguna fecha o estado futuro que el propietario no haya dado.
• Sin pruebas reclamadas. Solo lees el código.

10. Verifícalo en tu cabeza

Recorre el código a 390 px y en escritorio. ¿Están todos los precios, totales de planes, enlaces de compra y lugares de tu lista de hechos en la página? ¿Son visibles las respuestas clave sin tocar? ¿La barra de teléfono fija deja el contenido descubierto? ¿La primera pantalla de escritorio usa ambas columnas? ¿Funciona cada ruta con el script desactivado? ¿Hay algo más ancho que la pantalla? Arregla lo que falle.

11. Un pequeño ejemplo

Un sastre en Regina recibe visitantes de volantes y reserva pruebas a través de un programador que funciona.

Antes: <h1>Crafted With Passion</h1> <a href="#" onclick="openBooking()">Learn more</a>

Después, primera pantalla:

<section class="hero">
  <div>
    <p class="label">Stitchwell Alterations · Downtown Regina y Harbour Landing</p>
    <h1>Alteraciones de ropa en Regina, reservadas en línea</h1>
    <p>Dobladillos, cremalleras, entallar y ensanchar, normalmente listas en una semana.</p>
    <p class="price">Dobladillos desde $18 <span>prueba incluida</span></p>
    <a class="btn" href="https://book.example/stitchwell">Reserva una prueba</a>
    <a href="tel:+13065550142">O llama al (306) 555-0142</a>
  </div>
  <aside class="card">
    <h2>Qué incluye una prueba</h2>
    <ul><li>Marcar mientras lo usas</li><li>Un precio por escrito antes de comenzar el trabajo</li><li>Fecha de recogida en el momento</li></ul>
  </aside>
</section>
<nav class="phone-bar"><a href="https://book.example/stitchwell">Reserva una prueba</a><a href="tel:+13065550142">Llamar</a></nav>

Entrégala

Responde en este orden:

1. Qué estaba mal y qué cambió: una tabla de como máximo seis filas. Cada fila cita el texto o marcado de la página anterior, luego nombra lo que cambiaste y dónde. Luego una línea de "Conservado:".
2. La página: el HTML completo en un bloque de código.
3. Antes de publicar: como máximo cuatro líneas cortas. Primero los bloqueadores reales (una herramienta para conectar, un hecho para confirmar), luego una oración que diga que no se ejecutaron pruebas de navegador, teléfono o entrega.

Mantén todo fuera del HTML en aproximadamente 200 a 300 palabras. Palabras simples, sin emojis, sin exageraciones y sin afirmar que la página convertirá.