A website alert should help someone make a decision: change a journey, avoid a closed building, or find the latest service information. Choose its placement by asking who needs the message, how soon they need it, and what they should do next. A larger interruption is useful only when it improves that decision.
For municipal and transit websites, a practical starting point is a durable notice page supported by the smallest effective attention cue. Use a banner to reach visitors across the site, a homepage notice for prominent operational news, and an alert center for the full collection. Reserve a modal for situations where interrupting the current task is justified by your communications policy.
Match the format to the reader’s need
These formats can work together. The important distinction is between where people discover a notice and where they read its complete, current details.
| Format | Use it when | Watch for |
|---|---|---|
| Alert center | People need a reliable place to check several notices. | A list that mixes expired and active information without labels. |
| Homepage notice | An update deserves prominence for visitors entering through the homepage. | Visitors arriving directly on a service page may miss it. |
| Sitewide banner | A time-sensitive issue affects visitors across several services. | Repeated banners that crowd out navigation or essential content. |
| Modal | An approved, exceptional message warrants interrupting a visit. | An inaccessible or repeatedly appearing interruption. |
Write the detail page before the banner
The detail page should answer five questions: what changed, who is affected, when it applies, what to do instead, and when another update is expected. Include a visible update time and an accountable department or contact. A visitor should not have to interpret an internal department label to work out whether their appointment or journey is affected.
For example, an illustrative closure notice could say: “The downtown permit counter is closed Tuesday morning. Submit applications online or visit the west office. We expect to reopen at noon; this page will be updated by 11 a.m.” The banner can summarize that message and link to the same detail page. The specific facts must come from the responsible department.
This approach also makes corrections easier. If the reopening time changes, staff update the authoritative notice and any short summaries that contain the old time. They do not have to reconstruct several independently written versions.
Make an interruption usable
A modal brings extra interaction requirements. The W3C modal-dialog pattern describes moving focus into the dialog, keeping keyboard navigation inside it while open, supporting Escape to close, and returning focus appropriately afterward. It also recommends a visible close control. Test these behaviors instead of assuming that a popup plugin provides them correctly.
Check the longest approved message on a small phone and at increased text size. Can someone reach the close control, follow the details link, and continue their original task? If a message can be dismissed, keep the information available elsewhere. Decide whether a material update should be shown again, and avoid reopening the same unchanged message on every page.
Give every notice an owner and an ending
Before publishing, assign responsibility for confirming the facts and removing or updating the attention cue. Record the affected service, the review time, and any known end time. For a developing issue, a review deadline is more useful than an invented resolution time.
Plan how expired alerts leave the active list without making useful historical information impossible to find. Also document who can publish after hours; our municipal website runbook covers that operational handoff.
Test the message as a visitor
Open a deep service-page link as well as the homepage. Read the notice without relying on its color or icon. Follow the alternate-service link and confirm it works. Finally, test the end of the notice: the banner should disappear when intended, while the detail page should explain the resolved or expired state. The goal is a clear next step throughout the incident, including after it ends.