Skip to main content
live This is a new website – your feedback will help us to improve it.

Service unavailable page

Overview

Use this page pattern where a service is planned to be unavailable. This pattern should be shown for some 503 Service Unvailable errors, where action has been taken deliberately.

Page patterns represent complete pages that should be used with few changes to promote consistency. If you are using one of the Style Kit’s themes or templates, this page pattern is available as a special layout or view.

Use the problem with this service pattern where a service is unavailable unexpectedly, i.e. where a service crashes and there isn’t a fail-over.

This pattern is based on the service unavailable pattern from the Government Digital Service (GDS) Design System.

Uses

Use this pattern when a service:

  • will be temporarily unavailable because of a planned upgrade or another maintenance task
  • will be temporarily unavailable because of scheduled changes to a service or provider this service relies upon
  • is only used for part of the year (for example a annual or seasonal task)
  • has been replaced with another service
  • has been closed without a replacement (because a task is no longer needed)

When using this pattern, do not:

  • blame the user or use red (danger) text
  • use technical jargon like ‘503’ or ‘resource unavailable’
  • use vague terms like ‘we are making improvements’
  • use informal or humourous words like ‘oops’
  • include information that is not known, or cannot be relied upon

Variants

Basic

Use the .bsk-pattern-service-unavailable class to create a page element containing:

  • a page title of ‘Service unavailable - [website or application]’
  • a page header with ‘Sorry, [website or application] is unavailable’ as a h1 header
  • a lead paragraph with ‘You will be able to use the service later.’
  • include an email address for, or link to information on, a team that can provide information on:
    • when the service will be available again (i.e. the technical owner)
    • how a task can be completed, or information accessed, whilst the service is unavailable (i.e. the business owner)
    • if there isn’t a contact for a service use the BAS IT Service Desk.

Try not to use specific people as contacts, as they may be on holiday or change role.

Sorry, [website or application] is unavailable

You will be able to use the service later.

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-service-unavailable">
  <h1 class="bsk-page-header">Sorry, <em>[website or application]</em> is unavailable</h1>
  <p class="bsk-lead">You will be able to use the service later.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>

Sorry, South is unavailable

You will be able to use the service later.

Contact the BAS IT Service Desk for more information.

Contact the Polar Operations Support Team if you need to check your travel arrangements.

<main class="bsk-pattern-service-unavailable">
  <h1 class="bsk-page-header">Sorry, <em>South</em> is unavailable</h1>
  <p class="bsk-lead">You will be able to use the service later.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
  <p>Contact the <a href="https://www.bas.ac.uk/team/operational-teams/operational-delivery/field-planning-science-support/">Polar Operations Support Team</a> if you need to check your travel arrangements.</p>
</main>

Open full example

Availability

Where known, change the lead paragraph to explain when the service can be used again.

Where a time is known, make sure to include a time zone.

Sorry, [website or application] is unavailable

You will be able to use this service on the 24th August 2012 from 14:00 (UTC).

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-service-unavailable">
  <h1 class="bsk-page-header">Sorry, <em>[website or application]</em> is unavailable</h1>
  <p class="bsk-lead">You will be able to use this service on the 24th August 2012 from 14:00 (UTC).</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>

Open full example

Alternative

Include a link to any other services users can use for some tasks, or to access some information, whilst the main service is unavailable.

Alternatives may include off-line information such as printed information.

Sorry, [website or application] is unavailable

You will be able to use the service later.

Until then, you can use another service to check some information.

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-service-unavailable">
  <h1 class="bsk-page-header">Sorry, <em>[website or application]</em> is unavailable</h1>
  <p class="bsk-lead">You will be able to use the service later.</p>
  <p>Until then, you can use <a href="#">another service</a> to check some information.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>

Sorry, [website or application] is unavailable

You will be able to use the service later.

Until then, you can check local noticeboards for important information.

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-service-unavailable">
  <h1 class="bsk-page-header">Sorry, <em>[website or application]</em> is unavailable</h1>
  <p class="bsk-lead">You will be able to use the service later.</p>
  <p>Until then, you can check local noticeboards for important information.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>

Open full example

Partly closed

If a service can only be used for part of the year, or until a specific event, change the lead paragraph to explain when the service can be used again.

Sorry, [website or application] is unavailable

This service can only be used from April to August.

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-service-unavailable">
  <h1 class="bsk-page-header">Sorry, <em>[website or application]</em> is unavailable</h1>
  <p class="bsk-lead">This service can only be used from April to August.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>

Open full example

Replaced

Change the lead paragraph to ‘This service has been replaced and can longer be used.’ and include a link to the service, or services, that replace the service.

Sorry, [website or application] is unavailable

This service has been replaced and can longer be used.

Use another service to complete this task.

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-service-unavailable">
  <h1 class="bsk-page-header">Sorry, <em>[website or application]</em> is unavailable</h1>
  <p class="bsk-lead">This service has been replaced and can longer be used.</p>
  <p>Use <a href="#">another service</a> to complete this task.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>

Open full example

Closed

Change the lead paragraph to ‘This service has been closed and can no longer be used.’ and explain who users should contact if they have questions.

Sorry, [website or application] is unavailable

This service has been closed and can no longer be used.

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-service-unavailable">
  <h1 class="bsk-page-header">Sorry, <em>[website or application]</em> is unavailable</h1>
  <p class="bsk-lead">This service has been closed and can no longer be used.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>

Open full example