Construcciones Andrés: la web de una empresa de tejados y fachadas

Este es el único caso de cliente que publicamos con nombre y dominio: el resto de nuestro trabajo son proyectos propios o encargos sin permiso para difundirlos. Los datos de esta página salen de los documentos del proyecto, no de una nota de prensa.

Punto de partida

La empresa no tenía web: su imagen vivía en la rotulación del vehículo y en el arte vectorial que se usó para imprimirla.

Construcciones Andrés es una empresa de tejados y fachadas de Avilés (Asturias). Su negocio se mueve por teléfono y por obra, con clientes de la zona que preguntan por tejados, goteras y fachadas. Lo que existía era material real y aprovechable: un logotipo en arte vectorial pensado para rotulación, una paleta tomada del propio vehículo y fotos reales de obra que facilitó la empresa.

Ese fue el encargo: partir de lo que la empresa ya era, no de una plantilla. Sin inventar identidad, sin fotos de stock y sin una web que dijera cosas que la empresa no hace.

Qué se hizo

Se construyó una web estática en Astro, en español y en inglés, publicada el 12 de octubre de 2026 en construccionesandres.com.

El trabajo se ordenó en cinco frentes: identidad, contenido, idiomas, contacto y base técnica. Cada uno con una decisión concreta detrás.

Identidad: el logo original, no una versión parecida

El logotipo se extrajo del arte vectorial original del cliente y se conservaron sus trazados: las letras, el muro de ladrillo y sus proporciones. No se redibujó, no se buscó una tipografía parecida y no se pasó ningún OCR por encima.

El único ajuste fue el que pidió el propietario: reducir uniformemente el bloque «AN» un 4 % y centrarlo sobre «DRES». Las letras no se deforman.

La paleta sale de su rotulación real, no de una carta de color inventada. El naranja ladrillo #FF8140 es el valor digital del arte original: se usa en botones, separadores y acentos, con texto negro encima, y no cambia en modo oscuro. Para texto naranja sobre fondo claro hay un derivado oscuro con contraste suficiente.

Contenido: las fotos son del cliente

Las tres fotografías publicadas son de la propia empresa, elegidas de su material y recortadas en origen para que el detalle se vea nítido sin ampliar una imagen pequeña. No hay fotos de stock, no hay retoques generativos y no se publican datos de localización ni matrículas.

Los recortes se hicieron en el archivo original, no en la web: así el navegador recibe el tamaño que necesita en vez de una imagen enorme reducida con CSS.

Los textos están organizados alrededor de lo que busca un cliente de la zona —tejados, goteras, fachadas— y no alrededor de un catálogo genérico de servicios. Las preguntas frecuentes responden a dudas concretas, con la garantía condicionada al tipo de trabajo, sin prometer de más.

Español e inglés, claro y oscuro

La web está en español en / y en inglés en /en/, con sus páginas legales en los dos idiomas. Cada página declara su gemela con hreflang, de modo que un buscador no trata las dos versiones como contenido duplicado.

Los dos temas, claro y oscuro, están resueltos con variables de color: la identidad no se rompe al cambiar de tema y el naranja se mantiene.

Contacto: WhatsApp, sin formulario que mienta

El formulario prepara un mensaje de WhatsApp y abre el chat con el texto ya escrito; el visitante solo tiene que enviarlo. El titular descartó el correo electrónico, así que no hay una dirección que se presente como buzón atendido.

Con JavaScript desactivado el formulario queda deshabilitado y aparece un enlace directo: en ningún caso se envía un formulario que nadie va a recibir, ni se hace un GET con datos personales en la URL. Los botones de llamada y de WhatsApp están cubiertos por las pruebas, y el punto en el que el envío depende del servicio externo está declarado.

Base técnica: estática, sin piezas que actualizar

La web se genera como HTML estático y se publica en Cloudflare Pages. No hay base de datos, ni gestor de contenidos, ni extensiones de terceros: son las tres cosas que más se rompen y más se olvidan en una web pequeña.

Lo que se cuidó en la construcción:

• Datos estructurados de negocio con la empresa identificada en Avilés, su área de servicio y su web, más las páginas y el sitio como entidades. Nada de valoraciones, horarios ni certificaciones inventadas.
• SEO: títulos y descripciones propios por idioma, un solo H1 por página, canonical, hreflang recíproco con x-default, sitemap y robots.txt derivados de un único origen, y un llms.txt con los datos reales del negocio.
• Imágenes en AVIF y WebP con tamaños responsivos, dimensiones reservadas y la portada con prioridad alta; el resto, en carga diferida.
• Tipografía variable autohospedada y precargada: cero peticiones a servidores de fuentes de terceros.
• Sin scripts de terceros. La analítica (Umami) se sirve desde el propio dominio y no usa cookies de seguimiento, así que no hay un banner que estorbe.

Rendimiento: compruébalo tú

Las puntuaciones de PageSpeed de la web son públicas: no hay que fiarse de nuestra palabra, se pueden medir en cualquier momento.

Puedes pasar el análisis en PageSpeed Insights eligiendo el dominio construccionesandres.com. No publicamos cifras aquí porque una medición cambia con el día, la red y el dispositivo; lo que no cambia es dónde se comprueba.

Pruebas y accesibilidad

Cada versión pasa por comprobaciones automáticas de tipos y de SEO antes de publicarse, y el proyecto incluye pruebas de navegador con Playwright en Chromium y Firefox, incluidas las de accesibilidad.

Entre las cosas que se prueban están el logo original, la cabecera a 320 px de ancho, los dos temas y los recorridos de contacto. Lo que no está probado se dice: WebKit y Safari no se han validado, y el envío real de WhatsApp se prueba con el servicio interceptado, no enviando mensajes.

Publicación: Cloudflare Pages y coste

La web se publica en Cloudflare Pages (plan gratuito) desde su repositorio. El coste recurrente es cero salvo el dominio: no hay servidor propio ni servicio de correo detrás.

Cada compilación genera además las cabeceras de seguridad del alojamiento —política de contenido con los hashes del JavaScript en línea, protección contra iframes y política de referrer— y caché larga solo para los recursos con hash.

Cómo se mantiene

La mantenemos nosotros: alojamiento, comprobaciones tras cada publicación y los cambios de contenido que pida el titular.

Al no haber gestor de contenidos ni extensiones, el cuidado no consiste en actualizar plugins cada semana. Consiste en cambiar lo que el cliente pida, revisar que la web sigue respondiendo y que las comprobaciones automáticas siguen en verde en cada publicación.

Una web así se construye en días, no en meses: lo que la alarga casi nunca es el desarrollo, sino reunir textos y fotos.

Lo que aprendimos de este encargo

Lo que más valor dio no fue una decisión técnica, sino no inventar: usar su logo original, su naranja real y sus fotos.

Una web pequeña se sostiene en tres cosas: que la identidad sea de verdad la del cliente, que el contacto funcione sin depender de un formulario que nadie lee y que no haya piezas que actualizar para seguir en pie. El resto —datos estructurados, idiomas, imágenes y rendimiento— está para que eso se encuentre y se lea.

Si quieres algo parecido, así trabajamos el diseño y desarrollo web: desde la identidad que ya tienes, con el dominio y el código a tu nombre.