govuk-design-system-backlog
govuk-design-system-backlog copied to clipboard
alphagov
There is a problem with the service pages (Technical problem pages)
There is a problem with the service pages
Also known as 500 pages, Technical problem pages
Use this issue to discuss this pattern in the GOV.UK Design System.
Contributors
- @stevenaproctor
Related links
- HMRC also has a version for 500 pages: HMRC design patterns
- DWP have a version Error pages: DWP design patterns
- Home Office has a version Error pages: HO design system
Design review
This pattern was reviewed by a panel of designers from GDS, HMRC, DWP and Home Office on 22 March 2018.
The panel agreed that the pattern should be published in the GOV.UK Design System.
Recommendations
The panel recommended that the following actions be taken once the pattern has been published:
- Add guidance explaining how the URLs of these pages should be designed
- Recommend that services are designed so that user data isn’t lost when there’s a technical problem
- Recommend that the page tells users what has happened to any data they have entered and what they should do next
- Investigate whether the ‘Try again later’ copy is helpful to users or not, or is there is a more helpful alternative
For GOV.UK Publishing, the stack that serves www.GOV.UK, they have a hardcoded 500 page in their CDN configuration.
This is because if the application fails resulting in a 500 error, it cannot serve the assets it needs to serve a page to the user.
By hard coding a simpler page, the CDN can respond with something that is closer to GOV.UK branding.
This has come up in the X-GOV Frontend community slack, with a user suggesting that this is a common thing with Kubernetes:
"Anyone hosting stuff in kubernetes will have this requirement, at some point. "The default backend can only really deliver a single html page as a response to an error - everything else has to come from a different web server"
I have hosted the current GOV.UK Publishing 500 page so you can see it rendered: https://govuk-publishing-500-page.glitch.me
I have put together an improved version of this based on the current design system pattern: https://govuk-frontend-proposed-500-page.glitch.me
HTML for proposed page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sorry, there is a problem with the service - GOV.UK</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0b0c0c">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
color: #0b0c0c;
}
header {
display: block;
background: #0b0c0c;
color: white;
padding: 10px 0;
}
.logotype-crown {
vertical-align: text-bottom;
margin-right: 1px;
}
.logotype {
font-size: 29px;
font-size: 1.8125rem;
font-weight: bold;
line-height: 1;
}
.container {
max-width: 960px;
margin: 0 auto;
padding-right: 15px;
padding-left: 15px;
}
main {
display: block;
padding-top: 30px;
}
h1 {
margin-top: 0;
margin-bottom: 30px;
font-size: 32px;
font-size: 2rem;
line-height: 1.09375;
}
p {
font-size: 19px;
font-size: 1.1875rem;
line-height: 1.31579;
}
</style>
</head>
<body>
<header>
<div class="container">
<svg role="presentation" focusable="false" class="logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
<span class="logotype">GOV.UK</span>
</div>
</header>
<main>
<div class="container">
<h1>Sorry, there is a problem with the service</h1>
<p>Try again later.</p>
</div>
</main>
</body>
</html>
Given this we should consider changing the current pattern or adding additional guidance to help users with this technical restriction.
On my current service and on one of my previous ones, we packged up an error page as a single html file that was served independently. I imagine most services will need something like this.
In our case we did it manually, and had to update every so often. As it's a rare occurrence, it wasn't so bad if it was a bit out of date.
It would certainly be handy if GDS could somehow publish an error page with inlined styles that people could pull and keep in sync easily.
We've created this, which has a little bit more styling.
https://github.com/ministryofjustice/cloud-platform-custom-error-pages/blob/master/rootfs/www/4xx.html
We have removed the 'Experimental' tag from components, patterns, and guidance in the Design System. 😌
The tag was being used on the There is a problem with the service page pattern to raise awareness that more research is needed to validate it. However, we recently published new guidance on how to share findings from users which we hope will make it easier to collect and format more information about how the Design System is being used across services.
If your team has used this component please let us know. 💪
