Emblem

El hero describe a Emblem como 'tostador de café de una sola tienda en Portland' y le entrega al lector una foto de la fachada. La afirmación de que Emblem realmente tuesta en sitio, en lugar de revender granos de otro, sólo aparece dentro de la historia de origen cerca del final de la página. Un lector de primera visita que rebota antes de llegar hasta ahí se va sin el diferenciador.

Arriba del pliegue el copy podría aplicarse a cualquier cafetería con un interior bonito. El tostado es la razón por la que la tienda existe y la razón por la que una bolsa cuesta $22 en lugar de $14, y el sitio lo trata como un detalle a mitad de página.

Un cliente que llega al sitio de una cafetería normalmente responde tres preguntas en los primeros diez segundos: ¿están abiertos ahora?, ¿dónde están?, ¿puedo conseguir mesa? Emblem responde la segunda (dirección en el hero), entierra la primera (horario en el pie) y omite la tercera por completo.

El horario en el pie significa que el usuario tiene que hacer scroll por toda la página para saber si la tienda está abierta a las 4pm un martes. La mitad no lo hará.

La carta muestra los precios de espresso y pour-over con claridad. El precio de la bolsa al menudeo, que es el producto de mayor margen en el sitio, aparece sólo dentro de la historia de origen como una línea de paso: 'El Yirgacheffe lavado sale en $22 la bolsa.' No hay ficha de producto, no hay agregar al carrito, no hay una sección Granos en la navegación.

El único CTA es 'Visítanos', que ancla a la dirección. No hay 'Llama con anticipación', no hay 'Reserva una bolsa', no hay una acción clara para un cliente recurrente que ya sabe dónde está la tienda. El sitio es un folleto con un mapa.

Si Emblem no toma pedidos en línea, está bien, pero el sitio debe decirlo y ofrecer un teléfono como alternativa. Ahora mismo la única opción de un cliente recurrente es teclear el número del pie en su propio marcador.

La navegación superior tiene Carta, Origen, Visita, Contacto. Carta hace scroll a la sección del menú, lo cual funciona. Pero la carta es una lista larga sin anclas internas. Un visitante que sólo quiere ver los precios de pour-over pasa antes por espresso y drip.

Espresso y pour-over aparecen como dos columnas lado a lado en desktop. Mismo peso visual, misma escala tipográfica, sin señal de que uno es la especialidad de la casa. La historia de origen de Emblem es una historia de pour-over de especialidad; el tratamiento de la carta no lo refleja.

En móvil las columnas se apilan y el pour-over queda debajo del espresso, lo cual refuerza la lectura de menor énfasis.

El hamburguesa en móvil abre una capa a pantalla completa. El botón de cerrar es una × terracota pequeña en la esquina superior derecha, con el mismo peso que los ítems del menú. En la primera apertura, dos usuarios de prueba tocaron la marca en la esquina superior izquierda en lugar de la × porque la marca se lee como el objetivo más prominente.

El acento del sitio es un terracota cálido (#C25E44) que se usa en CTAs y en encabezados destacados. Un secundario verde oliva (#7A8659) aparece en el badge 'Tostado esta semana' y en la cita destacada de la historia de origen. Dos acentos sobre un fondo crema cálido significa que el ojo tiene que decidir cuál color señala la acción primaria.

Terracota y oliva se llevan bien juntos, y compiten por la atención en la zona hero-y-primer-pliegue.

El padding de sección es inconsistente: el hero usa px-8, la carta usa px-6, la historia de origen usa px-10, la sección de visita usa px-8. El max-width interno también varía (max-w-5xl en unos lados, max-w-6xl en otros, sin max en la historia de origen).

En desktop el efecto es sutil. En móvil el padding horizontal variable produce un pequeño bamboleo lateral mientras el usuario hace scroll.

El h1 del hero usa clamp(32px, 6vw, 72px). A 375px de ancho el brazo 6vw resuelve a 22.5px, por debajo del mínimo, así que el clamp se queda en 32px. El body del mismo pliegue es de 20px. La razón 32:20 aplana la jerarquía, y a 320px el h1 se lee más como pie de foto.

La imagen de la fachada en el hero pesa 1.9MB en JPEG a 2400px de ancho. next/image no está en uso; la imagen es un <img> plano. En una prueba con 3G limitada la imagen bloquea el LCP a 3.4 segundos.

AVIF con calidad visual equivalente aterriza cerca de 240KB. WebP como fallback cerca de 380KB. Aun sin un pipeline de conversión en build, un pase manual con sips o squoosh ayuda.

La home tiene title y meta description. Las rutas /origen y /visita heredan el mismo title ('Emblem: tostador de café en Portland'). Las etiquetas Open Graph sólo están en la home. Un enlace a /origen compartido en un mensaje de texto se previsualiza sin marca.

sitemap.xml lista tres URLs (/, /origen, /visita) con la fecha de hoy como lastmod en cada entrada. Esa señal tiene casi nulo valor de rastreo porque el crawler no puede distinguir qué página realmente cambió. Sitio chico, y la señal de prioridad de rastreo no cuesta nada enviarla bien.

Los encabezados de la carta ('Espresso', 'Pour-over', 'Drip', 'Granos') están marcados como <div class='menu-title'>. Lo mismo con los títulos de capítulo de la historia de origen. Un usuario de lector de pantalla recibe un párrafo largo sin landmarks, sin saltar a sección, sin manera de escanear.

La sección 'Tostado esta semana' pone body color crema sobre una foto de granos tostados oscuros. El texto llega a cerca de 3.9:1 de contraste en el tercio medio de la imagen, donde los granos aclaran. WCAG AA exige 4.5:1 para body.

El párrafo se lee de reojo y empieza a suavizarse bajo luz ambiente fuerte en un teléfono.

Los enlaces de nav, el botón CTA y las anclas de la carta dependen del anillo de foco por defecto del navegador. En Safari 17 el anillo por defecto es un azul de bajo contraste que sobre el crema cálido se lee como bug del navegador. Un usuario de teclado puede navegar, y el indicador de foco actual es inconsistente entre navegadores.

La imagen del hero es el elemento LCP de la home. Se renderiza como un <img> plano sin pista de preload y sin fetchpriority. En desktop-cable el LCP mide 1.8s. En móvil-3G mide 3.4s y es el principal contribuidor a una calificación 'Necesita mejora' en Core Web Vitals.

Las fuentes se cargan vía <link rel='stylesheet'> desde fonts.googleapis.com en el head. Eso bloquea el primer pintado en 200 a 400ms en móvil. Se cargan dos familias (serif para encabezados, sans para body) y cada una envía dos pesos.

Para un sitio de este tamaño, fuentes auto-hospedadas con font-display: swap eliminan el ida y vuelta que bloquea el render.