Design
When things go wrong, we present a calm, professional response and concisely advise people what to do next.
The content in error pages must always provide a pathway to resolution, never leaving the user stranded without a way to proceed. If they can resolve the problem themselves, explain how to do so. If they cannot solve it themselves, give them contact details for someone who can help.
Stand-alone System Errors
Stand-alone system errors must be as light and robust as possible. They are for use in situations where the normal static resources may not be available, for example a CDN error page may be shown during system downtime. This is why the errors use such a minimal design, relying only on system typefaces, very few images and none of the usual production assets like ACE or other libraries.
Code
Stand-alone System Errors
General coding requirements for error pages:
- Write all code for maximum backwards compatibility via graceful degradation.
- Content must work on all devices.
- Test with JavaScript disabled. Content must all be shown and copy should still make sense.
- All CSS, JS and images must be inline.
- Use vanilla JavaScript only, no libraries.
- Data URIs and inline SVGs are acceptable, although try to avoid using them for required content.
- All controls must have visible text and not just icons (fallback reasons).
The wrapper code is set for all pages, with a block of CSS in the HEAD providing all style. The basic structure of the error page content is:
<div id="errorpage">
<div id="errorcontent">
<h1 class="ace-h1">Error heading</h1>
<div class="errorcopy">
<p class="ace-p">One or more items of error copy.</p>
</div>
</div>
<div id="errorcontrols"><a href="#" class="ace-link">One or more controls</a><a href="#" class="ace-link">One or more controls</a></div>
<div id="contactus">
<h2 class="ace-h2">Contact Us</h2>
<p class="ace-p">A block of content with relevant contact details, such as Support.</p>
</div>
</div>Full code for the system error page (copy to a .html file, serve minified):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Error Pages</title>
<style>body { background: #fff; color: #2C2C2E; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.286; padding: 10px; }
h1 { color: #168208; font-weight: normal; font-size: 30px; line-height: 1.2; }
h2 { font-family: aktiv-medium,aktiv-regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-weight: 400; color: #57575A; font-size: 24px; line-height: 1.25; }
a:link, a:visited, a:focus, a:hover, a:active { color: #168208; text-decoration: none; }
.errorcode { font-family: monospace; }
#errorpage { text-align: left; }
#errorcontrols a + a { margin-left: 2em; }
#errorcontrols svg { position: relative; top: 1px; margin-right: 10px; }
@media (min-width: 767px) {
body { padding-top: 100px; padding-top: 15vh; }
#errorpage { text-align: center; max-width: 40em; margin: 0 auto; }
h1 { margin: 20px 0; }
.errorcopy { margin: 40px 80px; }
.errorcopy + .errorcopy { margin-top: 0; }
#contactus { margin-top: 40px; }
#errorcontrols a + a { margin-left: 60px; }
.cloudflare-error { margin: 40px 0 20px 0; }
.cloudflare-error ul { list-style: none; padding: 0; }
.cloudflare-error ul li + li { margin-top: 5px; }
.cloudflare-error ul + ul { margin-top: 20px; }
.cloudflare-error ul.cferror_details,
.cloudflare-error ul.cferror_details li { margin: 0; }
}
</style>
</head>
<body>
<div id="errorpage">
<div id="errorcontent">
<h1>Looks like something went wrong</h1>
<div class="errorcopy">
<p>We track these errors automatically. You can refresh and try again. If it still doesn't work, let us know.</p>
</div>
</div>
<div id="errorcontrols" style="display:none;"><a href="javascript:void(0)" id="showcontacts"> <svg width="18" height="14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="#518017"><path d="M17.007 13C17.002 13 17 9.002 17 1.007 17 1.003 11.664 1 .993 1 .998 1 1 4.998 1 12.993c0 .004 5.336.007 16.007.007zM0 1.007A1 1 0 0 1 .993 0h16.014A1 1 0 0 1 18 1.007v11.986A1 1 0 0 1 17.007 14H.993A1 1 0 0 1 0 12.993V1.007z"/><path d="M9.071 6.847L1.312.648l-.624.781 8.39 6.703 8.287-6.744-.631-.776z"/></g></svg>Let us know</a><a href="javascript:void(0)" id="refresh"><svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><g fill="#518017" fill-rule="evenodd"><path d="M14 8.94C13.142 11.861 10.395 14 7.139 14 3.196 14 0 10.866 0 7s3.196-7 7.139-7c2.878 0 5.358 1.67 6.487 4.075l-.905.425C11.728 2.386 9.564 1 7.14 1 3.744 1 1 3.69 1 7s2.744 6 6.139 6c2.759 0 5.154-1.794 5.901-4.342l.96.281z" fill-rule="nonzero"/><path d="M14 0v5H9z"/></g></svg>Refresh page</a></div>
<div id="contactus">
<h2>Contact Support</h2>
<p>Americas: +1 312 638 2200<br>Europe: +44 (0)20 3058 1060<br>Asia Pacific: +61 (0)2 8241 0888</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
<script>if (document.addEventListener) {
var contactinfo = document.getElementById('contactus');
contactinfo.style.display = 'none';
document.getElementById('errorcontrols').style.display = 'block';
document.getElementById('refresh').addEventListener('click', function() {
window.location.reload(true);
return false;
});
document.getElementById('showcontacts').addEventListener('click', function() {
contactinfo.style.display = (contactinfo.style.display === 'none') ? 'block' : 'none';
return false;
});
}
</script>
</div>
</body>
</html>