Rediseño completo del sitio corporativo de una constructora cántabra fundada en 1954, con triple certificación ISO y tres líneas de negocio. La web nueva está diseñada, desarrollada y lista para desplegar; la presentamos como propuesta a la espera de la aprobación final del cliente para sustituir al sitio actual.
Construcciones Rotella lleva más de 70 años construyendo Cantabria: viviendas, naves industriales, líneas eléctricas y obra civil para administraciones públicas. Su web, sin embargo, había quedado anclada a principios de los 2000: maquetación rota, no responsive, dos páginas indexadas en Google y una imagen digital que no acompañaba a su trayectoria real.
El reto era doble:
Vista previa del rediseño. URL de preview: trowelapp-technologies-sl.github.io/web-rotella/
Construcciones Rotella es cliente de Trowel, el SaaS para constructoras desarrollado por nuestro mismo equipo. El servicio de rediseño web se ofrece a clientes seleccionados de Trowel cuya presencia digital no está a la altura de su trayectoria. Trowel aporta la relación con el sector y el conocimiento del cliente; Pindia diseña, desarrolla y entrega la nueva web.
En este caso, la oportunidad estaba clara: una empresa con triple ISO, miles de obras a sus espaldas y una web que estaba dañando activamente su credibilidad ante administraciones y clientes potenciales.
Auditamos el sitio actual (construccionesrotella.com) en cuatro ejes — diseño y UX, contenido y marca, SEO y visibilidad, tecnología — y los problemas eran sistémicos, no cosméticos.
/pc_4.htm, sin lógica semántica.Schema.org, sin Open Graph, sin Twitter Cards.sitemap.xml ni robots.txt coherentes.Coste real de la web actual: pérdida de credibilidad ante administraciones, invisibilidad en buscadores, incompatibilidad móvil y barrera para captar talento joven. La web no era un problema de imagen; era un problema de negocio.
Construimos la nueva identidad digital alrededor del rojo corporativo de la marca (#D30815), combinado con negro y blancos cálidos para dar peso institucional sin caer en el corporativo plano. Tipografía sobria — Poppins en titulares, Open Sans en cuerpo — y respiración generosa para una empresa con historia que contar.
Rojo Rotella #D30815 como color de marca, negro institucional para contraste y blancos cálidos para fondos. Aplicada de forma consistente en CTAs, acentos y estados activos.
Poppins en titulares para presencia y peso, Open Sans en cuerpo para legibilidad. Cargadas con preconnect a Google Fonts y font-display: swap.
Menú dedicado en móvil, breakpoints definidos, imágenes adaptativas. El móvil deja de ser problema y se convierte en el canal principal de captación.
Teléfono 942 882 378 clicable y botón "Solicitar presupuesto" siempre accesibles en pantalla, en desktop y móvil.
Migas en interiores para orientación y SEO. Navegación sticky en páginas de servicios para saltar entre las tres líneas de negocio sin perder el foco.
Animaciones sutiles que respetan prefers-reduced-motion. Aportan sensación de calidad sin entorpecer la lectura ni penalizar el rendimiento.
Estructura pensada para tres tipos de visitante: la administración pública que evalúa una licitación, el particular que busca presupuesto y el profesional joven que considera incorporarse al equipo. Cada página responde a un objetivo claro.
Hero corporativo con claim, servicios destacados, cifras clave (1954, 70+ años, +2.000 viviendas, 17.400 m² comerciales, 5.600 m² industriales), logos de las tres ISOs y formulario rápido de contacto.
Timeline visual desde 1954 (fundación) → 1973 (actividad inmobiliaria) → años 90 (especialización en líneas eléctricas) → ISOs. Seis valores corporativos y equipo directivo con responsables de departamento.
Detalle de Líneas Eléctricas (alta, media y baja tensión), Obra Civil y Promoción Inmobiliaria con descripción, tipos de trabajo, casos de uso y CTA por línea. Navegación sticky entre las tres.
Galería de obras filtrable por categoría (eléctrica, obra civil, inmobiliaria). Por primera vez, la trayectoria real de Rotella es visible públicamente y sirve como prueba ante administraciones y clientes.
Formulario completo con tipo de servicio y descripción del proyecto, mapa, departamentos con email directo, teléfono clicable y canal de denuncias específico requerido por compliance corporativo.
Páginas legales construidas desde cero con la información real de la empresa. Banner de cookies con consent mode antes de cualquier tracking.
Una empresa con la trayectoria de Rotella no necesita inventarse mensajes; necesita ordenar los que ya tiene. Reescribimos el contenido entero apoyándonos en las cifras y certificaciones reales de la empresa, y diseñamos cada bloque para que fuese fácil de mantener.
La nueva web nace con SEO on-page completo en cada página, no como un parche posterior. Cada URL tiene su <title> único, su meta description, canonical, Open Graph y Twitter Card. Y se apoya en Schema markup específico para empresas locales, clave para licitaciones públicas y búsquedas por proximidad.
Titles únicos por página, meta descriptions específicas, URLs semánticas y limpias (/servicios/lineas-electricas/ en vez de /pc_4.htm) y canónicas correctas en todo el sitio.
JSON-LD LocalBusiness con dirección postal (Av. del Besaya 1, Torrelavega), teléfono, coordenadas geográficas, horario y certificaciones. Optimizado para búsquedas locales y rich snippets.
Meta tags sociales en todas las páginas. Cuando alguien comparte el sitio en LinkedIn, WhatsApp o Twitter, aparece la imagen, el titular y el resumen correctos — clave para administraciones que validan referencias.
sitemap.xml con todas las URLs nuevas. Plan de redirecciones 301 desde URLs antiguas (/pc_4.htm...) a la nueva estructura para conservar el poco SEO existente sin generar 404 en el cambio.
Lazy loading en imágenes no críticas, preconnect a Google Fonts, cache busting versionado, HTML semántico limpio. Carga rápida en 4G, no solo en fibra.
Coordenadas explícitas, areaServed con Cantabria + norte de España, contenido optimizado para términos como "constructora Cantabria", "obra civil Torrelavega" o "líneas eléctricas Cantabria".
Una empresa que trabaja con administraciones públicas necesita una web accesible — y no por imagen, sino porque a partir de cierto tamaño es exigible legalmente. Construimos cada componente pensado en teclado, lectores de pantalla y usuarios con visión reducida desde el primer día, no como auditoría posterior.
label visible, validación en tiempo real y mensajes de error vinculados.header, main, nav, footer, article, section con jerarquía coherente.La web actual no captaba presupuestos: no había CTA, no había formulario funcional y el teléfono no estaba visible. La nueva pone la captación en el centro sin convertirla en spam.
942 882 378 en tel: en el header, accesible siempre. En móvil, una llamada está a un toque de distancia desde cualquier página.
Botón principal en header (desktop y móvil), hero, cada servicio, secciones CTA dedicadas y footer. Siempre visible, siempre el mismo color, siempre la misma promesa.
Uno simplificado en home (nombre, contacto, mensaje) y otro completo en contacto (con tipo de servicio y descripción del proyecto). Validación en tiempo real, feedback claro de errores.
Recepción, obra, recursos humanos, compras. Cada visitante puede elegir el interlocutor adecuado sin pasar por una bandeja genérica.
Mapa de la sede en Av. del Besaya 1 (Torrelavega) embebido en contacto. Reduce fricción para visitas comerciales y refuerza la presencia local real.
Sección específica de canal de denuncias, requerida por compliance corporativo en empresas de cierto tamaño. Independiente del formulario comercial, con tratamiento confidencial.
HTML + CSS + JavaScript vanilla. Sin WordPress, sin plugins que actualizar, sin base de datos que asegurar, sin licencias que renovar. La web se mantiene editando los archivos directamente, y el cliente solo paga el dominio y el SSL.
¿Por qué estático? Porque para una web corporativa de 5 páginas con cambios poco frecuentes, un CMS es overhead innecesario: rendimiento peor, superficie de ataque más grande y coste de mantenimiento mayor. Estático significa que la web sigue funcionando dentro de 10 años exactamente igual que hoy.
Once dimensiones que resumen el salto. No es un retoque — es un reemplazo completo.
| Aspecto | Web actual | Nueva web |
|---|---|---|
| Diseño | Estética años 2000, no responsive | Diseño moderno, 100% responsive |
| Páginas | ~2 básicas | 5 completas + legales |
| Navegación | Confusa, sin jerarquía | Header fijo, menú móvil, breadcrumbs |
| Servicios | Mención genérica | 3 páginas detalladas con CTA por línea |
| Proyectos | Sin portafolio | Galería filtrable por categoría |
| Equipo | No existe | Responsables visibles con cargo y email |
| SEO | 2 páginas indexadas, titles duplicados | SEO completo, Schema LocalBusiness, sitemap |
| Certificaciones | No visibles | Logos ISO + documentos descargables |
| Accesibilidad | No cumple WCAG | Roles ARIA, skip links, semántica |
| Rendimiento | Sin optimizar | Lazy loading, cache busting, preconnect |
| Móvil | No adaptado | Menú dedicado, mobile-first |
Propuesta presentada en abril de 2026. Web nueva diseñada, desarrollada y funcional, alojada en GitHub Pages como preview. Pendiente de aprobación del cliente para puesta en producción en construccionesrotella.com con redirecciones 301 desde las URLs antiguas para conservar SEO. Diseño y desarrollo: Pindia Software · Relación con el cliente y conocimiento del sector: Trowel.
¿Tu web también se ha quedado en otra década?
Presupuesto personalizado en menos de 48 horas. Sin compromiso, sin letra pequeña, sin atajos.
