https://
The https:// in the address bar means your information is encrypted and can not be accessed by anyone else
.gov
Only government entities in the U.S. can end in .gov
Digital Standards

Site alerts

There are two types of alerts: service updates and sitewide alerts.

Service updates

Service updates call out important time-sensitive information. They can be used on the phila.gov homepage and department homepages. They tell users the status of a system (transportation, trash, government facilities, etc.). This includes current system disruptions as well as warnings.

You have one sentence for an alert. Begin with what is affected. Then what is happening. Then how long it will be going on. Don’t include a time frame if you don’t know how long it will be going on.

If there is a URL where users can go to get more information, include a link in a second sentence. Don’t use the phrase “click here.”

If you know how long the thing will be going on, you can include that information in a third sentence. Here are three possible formats:

  • [Single Date] In Effect: July 26, 2016
  • [Multiple Dates] In Effect: July 26 - 28, 2016 - or- In Effect: July 25, 2016 & July 30, 2016
  • [Dates & Time] In Effect: From 9:00 a.m. to 10:00 a.m. on July 26, 2016

The color of a service update indicates the level of severity.

  • Red indicates the service is currently experiencing a major problem.
  • Yellow indicates a service may be affected, but is not completely unavailable.
  • Green indicates it’s all good.

Site-wide alerts

Site-wide alerts are used to call out important information across all pages of the website. These are meant to be used for emergencies.

Site-wide alerts appear on every page of the site as part of the header. They should be used sparingly so they have real impact every time they are used.

Site-wide alerts consist of:

  • A headline stating the kind of emergency.
  • A subhead containing an instruction and a link for more information.
  • A third line with information on how long this will be in effect, if known.

The format for how long something will be in effect is:

In effect: 6:30 p.m. on Friday, Sept. 9 to noon on Saturday, Sept. 10

or

In effect: Friday, Sept. 9 to Saturday, Sept. 10

<table class="service-update">
    <tr scope="row" class="service-update--critical">
        <th class="phl-mu">
            <i class="fas fa-trash fa-2x fa-fw" aria-hidden="true"></i>
            <span class="icon-label">trash</span>
        </th>
        <td class="pam">
            <span>Trash and recycling collection is suspended due to weather. Hold trash until next Thursday. <a href="http://www.philadelphiastreets.com/" class="external">Visit Philadelphia Streets for more information.</a></span>
            <span class="date small-text"><em>In Effect: Tuesday, Feb. 21 </em></span>
        </td>
    </tr>
    <tr scope="row" class="service-update--warning">
        <th class="phl-mu">
            <i class="fas fa-subway fa-2x fa-fw" aria-hidden="true"></i>
            <span class="icon-label">transit</span>
        </th>
        <td class="pam">
            <span>The Market-Frankford SEPTA line is operating on a modified schedule today. <a href="http://www.septa.org/" class="external">Learn more about the schedule from SEPTA.</a></span>
        </td>
    </tr>
    <tr scope="row" class="service-update">
        <th class="phl-mu">
            <i class="fas fa-institution fa-2x fa-fw" aria-hidden="true"></i>
            <span class="icon-label">city</span>
        </th>
        <td class="pam">
            <span>All City buildings are open for their regular business hours.</span>
        </td>
        </th>
</table>
Site-wide alerts
<div id="site-wide-alert" data-closable>
    <div class="row">
        <div class="medium-16 medium-centered">
            <div class="row equal-height pvs">
                <div class="small-1 columns center equal icon">
                    <div class="valign">
                        <div class="valign-cell">
                            <i class="fas fa-exclamation fa-3x" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
                <div class="small-23 columns equal message">
                    Due to extremely cold conditions, the City is implementing <a href="https://phila.gov/services/mental-physical-health/code-blue/">special measures</a> to keep homeless people safe. If you see a person who needs shelter, call (215) 232-1984.
                    <div class="dates pts">
                        In effect: 11:30 a.m. on Wednesday, Feb. 22 to 11:30 a.m. on Saturday, Feb. 25
                    </div>
                </div>
            </div>
            <button class="close-button" data-close>&times;</button>
        </div>
    </div>
</div>