Sitio vitrina local

Manual de vitrina

Una vitrina es un sitio web de escaparate (folleto) para un negocio local: unas pocas páginas que responden "¿qué haces, para quién, cuánto cuesta, puedo confiar en ti, cómo te contacto?". Los visitantes llegan desde Google o una referencia, deciden en segundos y se van si tienen que buscar. Este manual dice qué construir y en qué orden; las habilidades de dominio contienen las reglas detalladas.

Puerta de dirección

Haz esto antes de cualquier código para una nueva página, pantalla o rediseño, incluso si la solicitud es de una línea. El resto de esta habilidad elimina errores; no da un carácter de pantalla. Si se omite, el resultado es la página mediana que todo modelo genera: correcta en los detalles, pero sin dueño.

1. Cinco líneas. Producto: qué hace, para quién. Carácter: dos o tres palabras concretas (tranquilo, exacto, un poco cálido), nunca limpio, moderno, elegante, minimalista o premium. Mundo: el lugar o material al que pertenece el producto; tiñe los neutros y define el acento. Momentos: los uno o dos lugares que reciben color y detalle ricos: para un negocio local, generalmente una foto real del trabajo o las personas, o una lista de precios con el formato del documento impreso que usa el oficio. Firma: un pequeño detalle que solo este producto tiene, usado de manera consistente. Un momento se dibuja con cuidado, no solo se limpia: un gráfico redibujado para lo que debe decir (líneas suaves, una comparación reflejada, una escala real), o el propio objeto del producto renderizado con peso y luz.
2. Inventario, luego la idea. Enumera de 8 a 12 cosas que ningún competidor comparte (nombre, calle, números en el resumen, materiales, herramientas, rituales, documentos que el oficio imprime). Escribe: "En esta página, [un elemento] se convierte en [el dispositivo]". Ese dispositivo es el momento.
3. Rechaza los valores predeterminados de segundo orden a menos que la marca ya los posea. Son lo que un modelo alcanza una vez que se prohíben las obviedades:
   • un fondo blanco crema, piedra o beige cálido con un acento naranja quemado, terracota, salvia o bosque, con o sin titular serifa (el aspecto "papel y tinta" es el nuevo predeterminado, no una dirección);
   • Fraunces, Instrument Serif, Playfair o Georgia como tipografía de titular por reflejo; system-ui como la única tipografía;
   • Inter o Geist sobre blanco con un acento índigo o azul;
   • héroe, servicios, reseñas, área de servicio, contacto, en ese orden, sin argumento al respecto;
   • una ceja centrada, titular y dos botones como toda la primera pantalla.
4. Prueba de intercambio. Reemplaza el nombre y el oficio con los de un competidor. Si la página aún encaja, cambia la propuesta, el momento y la firma, y prueba de nuevo.
5. Muestra y espera. Muestra las cinco líneas y la idea, y espera al dueño. Si no puedes preguntar (el usuario dijo que solo lo construyas, o trabajas sin una persona), escríbelas como comentario en la parte superior del archivo principal y construye exactamente eso.

Profundidad: manual de anti-slop §2 (dirección) y §12 (pantallas de aplicación); la habilidad design-inspiration-index para referencias reales.

Lo que necesita una vitrina

1. Una oferta clara por página. La primera pantalla dice qué se vende, a quién y dónde, en palabras sencillas, con una acción principal. Un lector que se salta todo lo demás aún lo sabe. Páginas separadas para servicios separados superan a una página que vende todo.
2. Precios, o un precio "desde". Los compradores comparan. Un precio inicial y lo que incluye filtra malos prospectos y genera confianza; "contáctenos para un presupuesto" solo hace que la gente pierda interés frente a competidores que publican un número. Indica qué cambia el precio. Mantén los montos en un solo archivo de datos para que todas las páginas y los datos estructurados coincidan.
3. Reserva o contacto en un solo paso. Un enlace de teléfono visible y un formulario corto o enlace de reserva en cada página. Pide solo lo necesario para responder (nombre, contacto, qué quieren). Indica cuándo recibirán respuesta. Confirma claramente después de enviar. Tocar para llamar en móvil.
4. Pruebas. Proyectos reales con un resultado, reseñas reales con nombres y fechas (o enlaces a ellas), logotipos solo si están permitidos. Pocas pruebas específicas superan a muchas vagas. Sin equipo de fotos de archivo, sin testimonios inventados.
5. Conceptos básicos de SEO local.
   • Una página por área de servicio que valga la pena posicionar, cada una con contenido genuinamente local (no el mismo texto con la ciudad cambiada).
   • LocalBusiness (o un subtipo más específico) JSON-LD con nombre, dirección o área de servicio, teléfono, horario y rango de precios que coincida con los precios publicados. Añade FAQPage solo en una página canónica.
   • Un perfil completo de Google Business Profile: mismo nombre, dirección y teléfono que el sitio, categorías, horario, fotos, un enlace a la página correcta y el hábito de responder reseñas.
   • Un h1 por página, títulos y meta descripciones descriptivos, hreflang para ambos idiomas, un mapa del sitio, URL legibles.
6. Un presupuesto de velocidad. Los visitantes locales están en teléfonos con conexiones medias. Precarga la imagen LCP y ajústala correctamente (formato moderno, ancho y alto explícitos); fuentes autoalojadas, una o dos familias, font-display configurado, subconjunto; sin 3D pesado, fondos de video o bibliotecas JavaScript grandes para decoración; scripts de terceros solo cuando se ganan su lugar. El contenido está presente al cargar. Objetivo LCP inferior a 2.5 s en móvil y prueba con estrangulamiento real.
7. Bilingüe FR/EN cuando el mercado lo requiera. Una fuente de mensajes por idioma con la misma estructura y paridad de contenido, un conmutador de idioma visible que mantiene la página actual, URL localizadas y hreflang. El texto en francés suele ser un 20% más largo, por lo que los diseños no deben romperse. Aplica la habilidad french-typography a cada cadena en francés y añade su guardia de CI.
8. Quebec: Ley 25. Un sitio que recopile información personal en Quebec (un formulario de contacto es suficiente) ejecuta la habilidad loi-25-website: política de privacidad, persona responsable visible, aviso en el momento de la recopilación, seguimiento desactivado por defecto, revisión de herramientas fuera de Quebec. Trátalo como parte de la construcción, no como una ocurrencia tardía; elige herramientas de análisis y formularios teniéndolo en cuenta.
9. Movimiento: como máximo un momento característico. Una interacción memorable y con propósito (un selector de proyectos con fundido cruzado, un antes/después) más comentarios de prensa y hover simples. Sin revelaciones al hacer scroll, bibliotecas de desplazamiento suave o adornos en bucle. Usa la habilidad motion; movimiento reducido muestra el estado final.

Páginas sugeridas

Inicio, Servicios (o una página por servicio), Proyectos con casos de estudio, Precios, Contacto. Añade páginas de área y algunas guías solo si las mantendrás honestas y actualizadas. Omite una página "Acerca de" a menos que contenga pruebas; integra una breve presentación humana en inicio o contacto.

Orden de trabajo

1. Oferta y pruebas. Escribe la oferta de una frase, las líneas de precio, tres pruebas y la ruta de contacto antes de cualquier diseño. Usa la habilidad ux para el texto simple.
2. Dirección y tokens. Ejecuta la puerta de dirección anterior, luego paleta, una o dos fuentes autoalojadas, espaciado, radios, con la habilidad ui (valores predeterminados de buen gusto si el proyecto no tiene ninguno).
3. Maqueta, escritorio y 390 px. Inicio primero, luego una página interior. El dueño la evalúa; itera antes de construir (habilidad ui, maqueta primero).
4. Construye páginas con contenido real. Fotos y texto reales, no lorem ipsum. Verifica cadenas largas en francés.
5. SEO y esquema. Títulos, meta, JSON-LD, mapa del sitio, hreflang, páginas de área, Google Business Profile alineado con el sitio.
6. Idioma y ley. Ejecuta french-typography en todo el texto en francés, luego loi-25-website para el informe de auditoría.
7. Pase de velocidad. Mide LCP, CLS y transferencia total en un perfil móvil estrangulado y corrige el elemento más grande primero.
8. Movimiento, luego pase anti-slop. Añade el momento característico, luego ejecuta anti-slop y su detector.

Errores comunes

• Un héroe que dice "Bienvenido" o un eslogan en lugar de la oferta.
• Precios ocultos detrás de un formulario, o precios antiguos que quedan en el esquema y las páginas de ciudad después de un cambio.
• Cinco métodos de contacto sin uno principal obvio.
• Páginas de ciudad que son la misma página con el nombre del pueblo cambiado.
• Banners de cookies añadidos por decoración mientras el seguimiento aún se carga por defecto.
• Un conmutador de idioma que envía a los visitantes de vuelta a la página de inicio.

Lista de verificación de finalización

• La primera pantalla indica oferta, audiencia, lugar y una acción principal.
• Un precio inicial y su alcance aparecen en la página de precios y coinciden con JSON-LD.
• El teléfono y el formulario de contacto funcionan en un solo paso en móvil; la confirmación indica qué sucede después.
• Al menos tres pruebas reales y específicas.
• LocalBusiness JSON-LD válido; Google Business Profile coincide con nombre, dirección, teléfono.
• Las páginas de área tienen contenido local distinto; el mapa del sitio y hreflang son correctos.
• Imagen LCP precargada; fuentes autoalojadas; LCP inferior a 2.5 s en móvil estrangulado; sin 3D pesado.
• FR y EN tienen el mismo contenido; la verificación de french-typography pasa.
• El informe de loi-25-website no tiene ningún elemento de corrección abierto (sitios de Quebec).
• Como máximo un movimiento característico; se respeta el movimiento reducido.
• El detector de anti-slop está limpio; se verificaron 390 px y escritorio; tsc, lint y pruebas en verde.