Maintenance Pages

What is a maintenance page?

A maintenance page tells visitors that a site or service is temporarily unavailable because of planned work, such as a server upgrade, database migration or deployment. It replaces the normal site for a short time and should explain what is happening, how long it will take and where to find updates. A clear scheduled maintenance page reduces support requests and keeps trust during downtime.

Best practices for maintenance pages

• State that the downtime is planned and temporary, and give an expected end time with a time zone.
• Link to a status page or social account where you post progress updates.
• Provide a contact option for urgent issues, such as a support email.
• Serve the page with HTTP status 503 Service Unavailable and a Retry-After header so search engines do not index it as your real content.
• Keep the page fully self-contained: inline the CSS, embed small images or SVG, and avoid dependencies on the app or CDN being maintained.
• Do not use a countdown that keeps running after the announced time; update the message instead.

Accessibility

Use a single descriptive h1 such as "We are down for scheduled maintenance". Keep text readable on any background graphic and avoid animations that cannot be paused. If the page refreshes itself to check whether the site is back, do it at a modest interval and tell users it will happen, so screen reader users are not surprised by a reload.

Framework versions

Each maintenance page template comes with a live preview, code tabs, a copy button and a download. Bootstrap 6 versions use the new alpha with theme-* colour roles, Bootstrap 5 versions use its utilities, and Tailwind CSS and pure CSS versions are the easiest to turn into a single static file. Filter by framework, copy the HTML, inline what you need and point your web server or deployment tool at the file while maintenance mode is active.