Plantilla de página en mantenimiento en HTML y CSS

Plantilla de página en mantenimiento en HTML y CSS: mensaje claro, alcance de la interrupción y contacto sin falsas barras de progreso.

Un mensaje de mantenimiento debe orientar

Esta plantilla página mantenimiento HTML ofrece una pantalla breve para explicar una interrupción y un siguiente paso. No muestra un porcentaje inventado ni una cuenta atrás que se reinicia al recargar. Cuando el servicio no está disponible, el usuario necesita saber qué ocurre con su tarea y dónde puede consultar información. Una composición tranquila y un mensaje preciso resultan más útiles que un dibujo animado que no explica si debe esperar, volver más tarde o contactar con soporte.

Mantenimiento programado e incidencia son situaciones distintas

Adapta el título al caso real. Si estás atendiendo una incidencia inesperada, no afirmes que todo forma parte de una mejora programada. Explica el alcance conocido con lenguaje sencillo: acceso al sitio, área de clientes o proceso de compra. No asegures que los datos están a salvo si todavía no se ha comprobado. Puedes reconocer qué información está pendiente y señalar cuándo habrá una nueva actualización, siempre que exista alguien encargado de publicarla.

Código completo para probar en tu navegador

Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. Los nombres y datos de demostración se deben sustituir antes de publicarlo.

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>En pausa — Volvemos con más claridad</title>
<style>

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}img,svg{max-width:100%}button{color:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0}.links{display:flex;gap:24px;flex-wrap:wrap}.links a{text-decoration:none;font-size:.88rem}.brand{font-weight:900;letter-spacing:-.06em;font-size:1.65rem;text-decoration:none}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 23px;border:1px solid currentColor;text-decoration:none;font-weight:700;border-radius:999px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}h1,h2,h3,p{margin-top:0}h1,h2{line-height:1.04;letter-spacing:-.055em}h1{font-size:clamp(3rem,7.5vw,6.5rem)}h2{font-size:clamp(2rem,4vw,3.7rem)}h3{line-height:1.2}p{max-width:64ch}.section{padding:88px 0}footer{padding:32px 0;font-size:.8rem}.demo{font-size:.72rem;opacity:.75}details{border-top:1px solid #8885;padding:18px 0}summary{cursor:pointer;font-weight:700}summary+p{margin:16px 0 0}dialog{border:0;border-radius:20px;width:min(760px,calc(100% - 32px));padding:24px}dialog::backdrop{background:#000b}.close{float:right;border:1px solid #8885;border-radius:50%;background:transparent;width:40px;height:40px}section[id]{scroll-margin-top:24px}[hidden]{display:none!important}.reveal{animation:arrive .6s both}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.wrap{width:calc(100% - 32px)}.nav{align-items:flex-start}.links{gap:14px}.section{padding:56px 0}h1{font-size:clamp(2.6rem,13vw,4.5rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

body{min-height:100vh;background:#101f2b;color:#edf5f3;background-image:radial-gradient(ellipse at 85% 20%,#24474365,transparent 50%)}.brand{font-size:1.5rem;letter-spacing:-.05em}.brand span{font-size:.65rem;color:#94d1bb;margin-left:8px}.nav{border-bottom:1px solid #ffffff18}.status-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;padding:90px 0}.status-pill{display:inline-flex;gap:9px;align-items:center;border:1px solid #94d1bb44;background:#94d1bb0a;padding:8px 12px;border-radius:30px;color:#b9dbce;font-size:.7rem}.status-pill i{width:6px;height:6px;border-radius:50%;background:#94d1bb}.status-copy h1{font-size:clamp(3.5rem,6.5vw,6rem);font-weight:600;margin:30px 0}.status-copy em{font-family:Georgia;font-weight:400;color:#94d1bb}.status-copy>p{max-width:470px;color:#9fb4be}.status-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:30px 0 20px}.button{background:#b4e0ce;border-color:#b4e0ce;color:#10232b;font-size:.85rem}.status-actions>a{font-size:.8rem;text-decoration:none;border-bottom:1px solid #7d9a9a}.status-art{position:relative;min-height:430px;display:grid;place-items:center}.ring{position:absolute;border:1px solid #94d1bb30;width:380px;height:380px;border-radius:50%}.r2{width:290px;height:290px}.r3{width:190px;height:190px}.server{position:relative;display:grid;gap:10px;transform:rotate(-9deg);width:235px}.server>div{height:64px;display:flex;align-items:center;gap:9px;padding:0 20px;background:linear-gradient(120deg,#43605e,#24413f);border:1px solid #8ab5a977;border-radius:12px;box-shadow:12px 16px 30px #0003}.server span{color:#94d1bb;margin-right:auto;font-size:.6rem}.server i{width:4px;height:15px;border-radius:3px;background:#7ca296}.tool{position:absolute;right:35px;bottom:70px;font-size:6rem;color:#b4e0ce;transform:rotate(15deg);line-height:1}.art-caption{position:absolute;bottom:0;font-size:.6rem;letter-spacing:.2em;color:#7d9a9a}.help{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;border-top:1px solid #ffffff25;padding-top:35px;padding-bottom:50px}.help article>span{font-size:.52rem;letter-spacing:.08em;color:#94d1bb}.help h2{font-size:1.2rem;letter-spacing:-.03em;margin:20px 0 15px}.help p{font-size:.8rem;color:#9fb4be;margin:0}footer{border-top:1px solid #ffffff18;color:#7d9a9a}footer p{font-size:.75rem;margin-bottom:8px}footer small{font-size:.65rem}@media(max-width:800px){.status-layout{grid-template-columns:1fr;padding:55px 0;gap:20px}.status-art{min-height:330px}.ring{width:290px;height:290px}.r2{width:230px;height:230px}.r3{width:170px;height:170px}.tool{right:10%;bottom:40px}.help{grid-template-columns:1fr;gap:30px}.nav .demo{max-width:130px;text-align:right}}

</style>
</head>
<body>

<header class="wrap nav"><a class="brand" href="#">en pausa<span>●</span></a><span class="demo">Página de estado · Demostración</span></header>
<main class="wrap status-layout reveal"><div class="status-copy"><span class="status-pill"><i></i> Interrupción temporal</span><h1>Un momento<br>para hacerlo<br><em>mejor.</em></h1><p>Estamos realizando tareas de mantenimiento. Sustituye esta explicación por el alcance real de la interrupción.</p><div class="status-actions"><button class="button" type="button" id="refresh">Volver a comprobar ↗</button><a href="#ayuda">Necesito ayuda ↓</a></div><p class="demo">El botón recarga esta página; no confirma la recuperación del servicio.</p></div><div class="status-art" aria-hidden="true"><div class="ring r1"></div><div class="ring r2"></div><div class="ring r3"></div><div class="server"><div><span>●</span><i></i><i></i></div><div><span>●</span><i></i><i></i></div><div><span>●</span><i></i><i></i></div></div><div class="tool">✳</div><span class="art-caption">REVISAR / AJUSTAR / VOLVER</span></div></main>
<section id="ayuda" class="wrap help"><article><span>01 / SI TENÍAS ALGO PENDIENTE</span><h2>Conserva la referencia.</h2><p>Guarda los datos de una operación pendiente y evita repetir un pago sin conocer su estado.</p></article><article><span>02 / PARA ESTAR AL TANTO</span><h2>Una actualización clara.</h2><p>Indica aquí cuándo habrá nueva información y la zona horaria correspondiente, si puedes mantener ese compromiso.</p></article><article><span>03 / SI NECESITAS CONTACTAR</span><h2>Estamos al otro lado.</h2><p>Configura un canal real de soporte que siga disponible durante el mantenimiento.</p></article></section><footer class="wrap"><p>Sin cuentas atrás inventadas. Información útil, cuando la necesitas.</p><small>Plantilla de comunicación. El mantenimiento y la respuesta HTTP se configuran en el servidor.</small></footer>

<script>
document.querySelector('#refresh').addEventListener('click',()=>location.reload());
</script>
</body>
</html>

La página HTML no activa por sí sola el mantenimiento

Guardar este archivo no impide que el resto del sitio siga accesible. Necesitas configurar el servidor, el alojamiento o el mecanismo de mantenimiento de tu aplicación para mostrarlo en el contexto adecuado. Comprueba qué ocurre con rutas internas, archivos estáticos y acceso de administración. No sustituyas la página principal y des por hecho que has cerrado todas las operaciones. La plantilla resuelve la comunicación visual, mientras que la activación depende de la infraestructura del sitio.

Respuesta del servidor y caché

En una interrupción temporal suele ser relevante revisar la respuesta HTTP y la política de caché, además del contenido visible. Configura esos aspectos desde el sistema que gestiona la disponibilidad y verifica el resultado con las herramientas de red. No mantengas una página de mantenimiento almacenada durante días después de recuperar el servicio. También debes comprobar el comportamiento de un CDN o una caché del alojamiento si existen. Un diseño correcto puede seguir apareciendo por una configuración de entrega equivocada.

Dar una fecha solamente cuando tenga sentido

Una estimación de recuperación no es una garantía. Si no puedes sostener un horario, indica la próxima actualización en lugar de prometer una apertura exacta. Incluye zona horaria cuando el público esté distribuido en varios países. No uses una cuenta atrás basada en el reloj del navegador para aparentar una previsión técnica. Si la situación cambia, actualiza el mensaje y conserva coherencia entre esta pantalla, soporte y otros canales públicos del negocio.

Cuidar operaciones que quedaron a medias

La lista del ejemplo invita a conservar referencias y evitar repetir pagos sin conocer su estado. Adapta esa orientación a los procesos de tu aplicación. Un visitante que estaba leyendo un artículo tiene necesidades distintas de quien acababa de confirmar una compra. Ofrece un canal real para consultar casos pendientes y evita pedir información sensible en un correo genérico. La pantalla de mantenimiento no debe simular que puede comprobar operaciones si no está conectada a un sistema que lo haga.

Recargar con una acción voluntaria

Volver a comprobar ejecuta una recarga normal. El texto inferior explica su alcance para que no parezca una comprobación en segundo plano. Puedes eliminar el botón si prefieres una página estática sin JavaScript. Evita recargar automáticamente cada pocos segundos: interrumpe la lectura, puede borrar datos y añade solicitudes durante una incidencia. Si utilizas una política de seguridad que impide scripts en atributos, mueve el manejador a un archivo permitido o prescinde de esta interacción opcional.

Revisar también la recuperación

Prueba la pantalla en una ruta interna y desde móvil, con caché y sin ella. Confirma que el canal de soporte funciona mientras el sitio principal está detenido. Después de restaurar el servicio, revisa que las rutas vuelven a su contenido correcto y que no queda la maqueta en resultados o accesos habituales. Elimina los textos de demostración antes de activarla. Una buena página de mantenimiento incluye un plan para retirarla en cuanto deja de ser necesaria.

Mantener disponibles los recursos necesarios

La página de mantenimiento debería depender de pocos recursos y, cuando sea posible, de los que siguen disponibles durante la interrupción. Una fuente externa o una imagen alojada en el mismo sistema que está fallando puede impedir que la pantalla se vea como esperas. La maqueta usa tipografía del sistema y CSS incluido para reducir esas dependencias. Si añades un logotipo, confirma que su archivo se sirve en este contexto. También revisa el canal de soporte: no sirve dirigir al usuario a otra ruta que muestra exactamente el mismo aviso.

Coherencia con soporte y otros canales

Si el equipo de soporte comunica un plazo y la página muestra otro, la persona recibe mensajes incompatibles. Define una fuente de información y una rutina de actualización durante la interrupción. No necesitas publicar detalles internos que no ayuden al usuario; sí debes comunicar cambios que afecten a sus tareas. Una marca de actualización puede ser útil si se mantiene correctamente. Evita una fecha generada al cargar la página que aparenta una revisión humana reciente aunque el mensaje lleve días sin cambiar.

Una página de próxima apertura es otro caso

Un sitio que todavía no se ha lanzado no tiene necesariamente el mismo contexto que un servicio temporalmente interrumpido. Si estás preparando una apertura, cambia título, expectativas y siguiente paso. No reutilices mensajes sobre operaciones pendientes si nunca existieron. Tampoco mantengas indefinidamente una respuesta temporal para una página de presentación que será permanente. La composición puede servir de base visual para ambos casos, pero la comunicación y la configuración de entrega deben responder al estado real del proyecto.

Ensayar la activación antes de necesitarla

Guarda una versión revisada y prueba el mecanismo de mantenimiento en un entorno apropiado antes de una intervención importante. Confirma que quien debe restaurar el servicio sabe retirar el aviso y verificar la respuesta. No esperes a una incidencia para descubrir que el canal de soporte depende de la misma aplicación detenida. Mantén a mano los datos que sí pueden publicarse y evita mensajes automáticos que prometan horarios sin autorización operativa. Una pantalla breve funciona mejor cuando forma parte de un procedimiento conocido, en lugar de improvisarse mientras el equipo intenta resolver el problema técnico.

Guías relacionadas para seguir practicando

Puedes ampliar esta práctica con Revisar contraste de texto y Inspeccionar respuestas de red.