Hotel boutiqueLisboa
Miradouro 14.
Sitio de un hotel de 14 habitaciones en un edificio de 1890 en lo alto de Graça, en Lisboa. La casa tenía que diferenciarse por detalles concretos, sin premios, calificaciones ni adjetivos de hotel, y llevar al huésped de la vista a la reserva directa.
Caso de estudio
El desafío.
Los sitios de hoteles boutique suelen repetir los mismos recursos: el barrio descrito como “el corazón de la ciudad”, texto de habitación igual al de las plataformas de reserva, premios de listas y calificaciones de reseñas como prueba, y una reserva que abre en un motor lento, en otra dirección web. En una casa de 14 habitaciones, eso borra justamente lo que la diferencia. El sitio tenía que mostrar lo específico de la casa, responder las dudas prácticas antes de la reserva y mantener el botón de reservar siempre a mano.
- 01 Barrio descrito de lejosGraça es parte del producto, y una descripción vaga desperdicia el principal argumento de una casa en lo alto de la colina.
- 02 Habitaciones que parecen igualesUn texto genérico hace que tres categorías de habitación parezcan una sola, y la elección pasa a depender solo del precio.
- 03 Limitaciones en la letra pequeñaUna casa de 1890 sin ascensor y con el tranvía pasando por la puerta tiene que decirlo antes de la reserva.
- 04 Reserva fuera del sitioCuando reservar obliga a ir a otra dirección web, la decisión se enfría; la reserva tenía que estar a un toque desde cualquier punto.
Método Flowt
El diagnóstico.
El sitio presenta la casa de 1890 con detalles que se pueden comprobar, como superficie, vista y tiempos a pie, y lleva al huésped de la primera pantalla a la reserva directa sin salir del sitio del hotel.
- Primera pantalla y propuesta de valorLa primera pantalla dice qué es y dónde (hotel de 14 habitaciones en Graça, Lisboa), da el diferencial concreto (casa de 1890, patio, terraza sobre el río) y ya trae la búsqueda de fechas.
- VelocidadFuentes y bibliotecas servidas por el propio sitio, fotos en AVIF con 800 px de ancho para celular y foto de apertura de 62 KB.
- Accesibilidad verificableLighthouse 100 y axe sin violaciones.
- Reserva directaMotor simulado en el propio sitio, en 4 pasos: fechas, habitación y tarifa, datos, revisión.
- Información de la estadíaCada habitación con superficie, cama, vista y una “línea honesta” (tranvía por la mañana, balcón pequeño).
Ver el análisis completo
Los 13 criterios, con la evidencia de cada punto: lo que cumple, lo que cumple en parte y lo que depende de una empresa real. Como la marca es un concepto, no existe un "antes" ni una nota total.
Ser encontrado
Título y descripción propios por página, un H1, JSON-LD de Hotel y de las 3 habitaciones, versiones EN y PT enlazadas. Queda parcial: noindex a propósito, dirección solo con el barrio y ninguna mención de terceros.
SEO 100 sin el noindex
Marca conceptual, sin reseñas reales. En un proyecto real, el volumen, la recencia y las respuestas se miden antes y después en Booking.com, Google y Tripadvisor.
Marca conceptual, sin ficha en Google. En un proyecto real, se mide la ficha en Google Hotels y en Maps y si el precio del sitio oficial aparece entre las opciones.
Ser elegido
La primera pantalla dice qué es y dónde (hotel de 14 habitaciones en Graça, Lisboa), da el diferencial concreto (casa de 1890, patio, terraza sobre el río) y ya trae la búsqueda de fechas.
6 de 6 verificaciones
Datos verificables (m², horarios, tiempos a pie comprobados en OpenStreetMap), pero sin personas con nombre ni dirección completa, y las fotos de IA no tienen aviso en la página. En una casa real entran fotos propias.
No hay canales externos para comparar. Dentro del sitio, los precios (desde €160, €220 y €340), los horarios y las reglas de cancelación son iguales en las páginas en inglés y en portugués.
Precio “desde” por habitación en la home y en Rooms, tarifa por noche en el calendario y tarifa no reembolsable 10% más baja. Falta decir la ventaja de reservar directo en lugar de en una plataforma.
Cada habitación con superficie, cama, vista y una “línea honesta” (tranvía por la mañana, balcón pequeño). “Good to know” cubre check-in, cancelación, edad mínima de 12 años, escaleras sin ascensor y llegada, en EN y PT.
Ser contactado
Fuentes y bibliotecas servidas por el propio sitio, fotos en AVIF con 800 px de ancho para celular y foto de apertura de 62 KB.
Lighthouse 99 en celular · LCP 1,8 s
Lighthouse 100 y axe sin violaciones. La píldora “Book a stay” sale del orden del Tab cuando desaparece, y los 5 momentos del “día en la casa” se leen con lector de pantalla.
axe: 0 violaciones
Ningún rastreador y nada se envía: la reserva avisa que los datos no salen de la página. Sin medición instalada y sin política de privacidad, que un hotel real necesitaría para el formulario de reserva.
Fechas ya completadas en la primera pantalla: 1 toque abre el motor, 8 hasta confirmar. Pero el resumen no dice cuándo se paga ni si llega una confirmación, y no hay teléfono ni e-mail para dudas.
1 toque hasta el motor · 8 hasta confirmar
Motor simulado en el propio sitio, en 4 pasos: fechas, habitación y tarifa, datos, revisión. Total antes de confirmar y cancelación en cada tarifa; la tasa turística queda fuera del total y se paga en la casa.
4 pasos · simulado
Obligaciones del sectorRNET y el Livro de Reclamações (libro de reclamaciones) aparecen en el pie de todas las páginas marcados como ejemplo; como el sitio no muestra reseñas, la regla europea sobre el origen de las reseñas no aplica.
En un proyecto real, cada criterio se mide antes y después, con la misma regla y la evidencia de cada punto. No hay nota: lo que se ve es cuántos puntos siguen abiertos.
Estrategia
Estrategia y mapa del sitio.
La home se acortó a siete bloques y sigue el orden de una visita: la casa, las habitaciones, un día ahí, el barrio a pie, los detalles y la reserva. Las habitaciones llevan el nombre de la vista (Calçada, Varanda, Miradouro), lo que hace inmediata la diferencia entre ellas. Lo que suele quedar escondido se volvió contenido: un bloque “Conviene saber” con escaleras, edad mínima y estacionamiento, y una línea franca en cada habitación. La reserva aparece desde la barra de la apertura hasta la frase del cierre, y en la página de reserva el total siempre está visible.
01Inicio
- Apertura con barra de reserva
- La casa
- Habitaciones
- Un día en la casa
- Graça a pie y cómo llegar
- Los detalles de la casa
- Cierre con reserva en frase
02Habitaciones
- Apertura e índice
- Calçada
- Varanda
- Miradouro
- Toda estadía incluye
- Conviene saber
- Cierre
03Reserva
- Fechas
- Habitación y extras
- Datos del huésped
- Resumen
- Nota sobre el sitio
- Resumen de la estadía siempre visible
Sistema visual
Tipografía, color y ritmo.
Gloock, una serif de alto contraste, aparece en los títulos y en los numerales grandes de las horas y los minutos; Outfit hace ligero el texto corrido. La paleta viene de la ciudad: cal en la base, noche de Alfama en el texto y en las secciones oscuras, teja en una palabra por título y en los botones, oscurecida para pasar el contraste, y azulejo en los enlaces y en el mapa. El arco es la única forma curva del sitio y solo aparece donde hay algo que revelar.
- Barra de reserva en líneas
- Franjas de las habitaciones
- Regla de las horas
- Mapa de Graça a pie
- Reserva en frase
Momento distintivo
Un día en la casa.
La sección queda fija mientras el desplazamiento recorre el día, de las 8h a las 23h. El fondo pasa de cal a teja y después a noche, la foto de la terraza cambia de luz dentro del arco y una regla marca la hora. Cada momento trae el dato práctico: desayuno incluido, taller de azulejo los sábados, fado los jueves con 25 lugares. En lugar de leer una lista de servicios, el huésped ve cómo sería la estadía.
En el celular
Hecho para la pantalla pequeña.
Tres pantallas del sitio en un celular de 390 px de ancho, el más común hoy.
Comprobantes
Rendimiento medido.
Las puntuaciones siguientes se midieron en el sitio publicado con Google Lighthouse. No son una promesa: reflejan el estado del sitio en la fecha de medición. Las demostraciones se presentan en video. Las mediciones registran el estado del proyecto en la fecha indicada.
En el celular
- Elemento visible más grande (LCP)
- 1.8 s
- Estabilidad (CLS)
- 0
- Bloqueo (TBT)
- 10 ms
En computadora
- Elemento visible más grande (LCP)
- 0.5 s
- Estabilidad (CLS)
- 0
- Bloqueo (TBT)
- 0 ms
Medido el 03/10/2026 con Lighthouse 13.5.0, en celular simulado y en computadora. *El SEO queda por debajo de 100 a propósito: el sitio conceptual lleva la instrucción noindex para no aparecer en Google ni competir con empresas reales. La accesibilidad también se verificó con axe (cero violaciones) y la alineación se revisó en 7 anchos de pantalla.
Detrás de escena
Ficha técnica.
- Páginas
- Inicio, Habitaciones, Reserva y página 404, en inglés y en portugués
- Idiomas
- Inglés (Reino Unido) y portugués (Portugal)
- Tecnología
- HTML, CSS y JavaScript sin framework, generados por un script propio en Python
- GSAP (ScrollTrigger, SplitText y DrawSVG) para las animaciones
- Lenis para el desplazamiento suave
- View Transitions en el cambio de páginas
- Fotos en AVIF con WebP de respaldo, en tamaños responsivos
- Fuentes y bibliotecas servidas por el propio sitio, JS comprimido con esbuild
- Datos estructurados de hotel y habitaciones, hreflang y sitemap, con noindex por ser una marca ficticia
- Imágenes
- Fotografías generadas con IA (Higgsfield), con una sola dirección de luz y lente, como una única sesión; la casa y las habitaciones no existen. Mapa de Graça, símbolo e íconos dibujados a mano en SVG.
- Accesibilidad
- Navegación completa con teclado y foco visible, contraste AA, los cinco momentos del día leídos por lectores de pantalla, versiones sin movimiento y sin JavaScript, cero violaciones en axe (WCAG 2.2 A/AA).
- Reglas del sector
- La clasificación turística, el número RNET y el Livro de Reclamações, exigidos en Portugal, aparecen en el pie de página marcados como ejemplo, y la reserva simulada no envía ni cobra nada.
Empieza ahora
Llevemos tu presencia digital al nivel de tu servicio.
Empieza con el diagnóstico gratuito: medimos tu presencia digital y te mostramos, punto por punto, qué corregir primero.
Agenda abierta para nuevos proyectos
Cuéntanos sobre tu proyecto
Con poca información basta. Lo demás te lo preguntamos.