Skip to content

Commit

Permalink
publish: Merge pull request #835 from hmrc/SDT-678-404-pages
Browse files Browse the repository at this point in the history 
generated from commit b0707f7
  • Loading branch information
Jenkins HMRC committed Oct 24, 2017
1 parent 3932bc4 commit 25604e5
Show file tree
Hide file tree
Showing 9 changed files with 529 additions and 84 deletions.
364 changes: 364 additions & 0 deletions patterns/404-page/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,364 @@
<!doctype html>
<html lang="en" class="no-js tech-docs">
<head>
<base href="/assets-frontend/">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="robots" content="noindex">

<title>HMRC Design System</title>

<link rel="icon" type="image/x-icon" href="public/images/favicon.ico" />

<link rel="stylesheet" href="public/assets/stylesheets/design-system.css">
<link rel="stylesheet" href="public/assets/stylesheets/vendor/highlight/github.css">

<!--[if gt IE 8]><!--><link href="public/assets/stylesheets/govuk-template.css" media="screen" rel="stylesheet" type="text/css" /><!--<![endif]-->
<!--[if IE 6]><link href="public/assets/stylesheets/govuk-template-ie6.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]><link href="public/assets/stylesheets/govuk-template-ie7.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 8]><link href="public/assets/stylesheets/govuk-template-ie8.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->

<!--[if gt IE 8]><!--><link rel="stylesheet" href="public/stylesheets/application.min.css"><!--<![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="public/stylesheets/application-ie.min.css"><![endif]-->



<script src="public/assets/javascripts/vendor/modernizr.js"></script>
</head>

<body class="">
<div class="app-pane">
<div class="app-pane__header toc-open-disabled">
<a href="#content" class="skip-link">Skip to main content</a>

<header class="design-system-header design-system-header--full-width">
<div class="design-system-header__container">
<div class="design-system-header__brand">
<a href="index.html">
<span class="design-system-govuk-logo">
<img class="design-system-govuk-logo__printable-crown" src="public/assets/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36">
GOV.UK
</span>

<span class="design-system-header__title">HMRC Design System</span>
</a>
</div>

<!--
<div class="pattern-search pattern-search--in-header">
<input type="text" name="pattern-query" class="pattern-search__input" placeholder="Search Design System" autocomplete="off">
<ul class="search-results js-search-results">
</ul>
</div>
-->

<div class="mobile-nav-trigger">
<input class="button js-mobile-nav-toggle" type="submit" value="Menu">
</div>
</div>
</header>

<div class="design-system phase-banner">
<p>
<strong class="phase-tag">ALPHA</strong>
<span>This is a prototype</span>
</p>
</div>

<div class="sub-nav">
<ul class="sub-nav-list">
<li><a href="/assets-frontend/index.html">About</a></li>
<li><a href="/assets-frontend/components/index.html">Components</a></li>
<li><a href="/assets-frontend/patterns/index.html">Patterns</a></li>
</ul>
</div>
</div>

<!-- TODO: mobile_nav -->

<div class="app-pane__body">
<div class="app-pane__toc">
<div class="toc" data-module="table-of-contents">
<nav id="toc" class="js-toc-list toc__list">
<ul class="pattern-nav">
<li><a href="/assets-frontend/patterns/404-page/index.html">404 Page</a></li>
<li><a href="/assets-frontend/patterns/shutter-pages/index.html">Shutter Pages</a></li>
<ul>
</nav>
</div>
</div>

<div class="app-pane__content toc-open-disabled">
<main id="design-system-content" class="markdown" data-module="anchored-headings">
<!--
<div class="banner banner__out-of-date">
<p>This content has not yet been written using the Design System content guidelines</p>
</div>
-->

<!--
TODO: set title as data
<div class="pattern-header">
<p class="section-heading"></p>
<h1></h1>
</div>
-->

<h1 id="404-page">404 page</h1>
<div class="alert alert--info">

<p class="alert__message">This pattern is work in progress.</p>
<p class="alert__message">View the todo list for this pattern on <a href="https://github.com/hmrc/design-patterns/issues/104">GitHub</a>.</p>

</div>

<p>404 pages (usually described as a &#39;page not found&#39;) tell users that the page they were trying to access is not there.</p>
<div class="example">
<div class="scale-wrapper">
<div class="scale"><!-- COOKIE MESSAGE -->
<div id="global-cookie-message">
<p>GOV.UK uses cookies to make the site simpler. <a href="https://www.gov.uk/help/cookies">Find out more about
cookies</a></p>
</div>
<!-- END COOKIE MESSAGE -->
<!-- GOV.UK HEADER -->
<header role="banner" id="global-header" class="with-proposition">
<div class="header-wrapper">
<div class="header-global">
<div class="header-logo">
<a href="https://www.gov.uk" title="Go to the GOV.UK homepage" id="logo" class="content">
<img src="images/gov.uk_logotype_crown_invert_trans.png?0.19.2" width="36" height="32" alt="">GOV.UK</a>
</div>
</div>
<div class="header-proposition">
<div class="content">
<nav id="proposition-menu">
<a href="#" id="proposition-name">Service name</a>
</nav>
</div>
</div>
</div>
</header>
<div id="global-header-bar"></div>
<!-- END GOV.UK HEADER -->
<main id="content" role="main">
<!-- PHASE BANNER -->
<div class="phase-banner">
<p>
<strong class="phase-tag">BETA</strong>
<span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
</p>
</div>
<!-- END PHASE BANNER -->
<!-- PAGE CONTENT -->
<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-large">Page not found</h1>
<h2 class="heading-small">If you typed in the web address</h2>
<p>Check the address and make sure you typed it in correctly.</p>
<h2 class="heading-small">If you selected a link or button or typed in the web address correctly</h2>
<!-- FORM FOR USERS TO TELL US THEY GOT A 404 -->
<div class="form-group">
<details>
<summary><span class="summary">Let us know the page was not found.</span></summary>
<div class="panel panel-border-narrow">
<div class="form-group">
<label class="form-label" for="full-name">
Full name
</label>
<input type="text" class="form-control" id="full-name">
</div>
<div class="form-group">
<label class="form-label" for="full-name">
Email address (optional)
<span class="form-hint">We will let you know when the problem is fixed.</span>
</label>
<input type="text" class="form-control" id="full-name">
</div>
<div class="form-group">
<label class="form-label" for="full-name">
What were you doing?
</label>
<input type="text" class="form-control" id="full-name">
</div>
<div class="form-group">
<input type="submit" class="button" value="Send">
</div>
</div>
</details>
</div>
<!-- END FORM FOR USERS TO TELL US THEY GOT A 404 -->
<p><a class="button" href="#">Go back to the previous page</a></p>
</div>
</div>
<!-- END PAGE CONTENT -->
</main>
<!-- FOOTER -->
<footer class="group js-footer" id="footer" role="contentinfo">
<div class="footer-wrapper">
<div class="footer-meta">
<div class="footer-meta-inner">
<ul class="platform-help-links">
<li><a href="/help/cookies" target="_blank" data-sso="false" data-journey-click="footer:Click:Cookies">Cookies</a></li>
<li><a href="/help/privacy" target="_blank" data-sso="false" data-journey-click="footer:Click:Privacy policy">Privacy policy</a></li>
<li><a href="/help/terms-and-conditions" target="_blank" data-sso="false" data-journey-click="footer:Click:Terms and conditions">Terms and conditions</a></li>
<li><a href="https://www.gov.uk/help" target="_blank" data-sso="false" data-journey-click="footer:Click:Help">Help using GOV.UK</a></li>
</ul>
<div class="open-government-licence">
<p class="logo"><a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a></p>
<p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>
</div>
</div>
<div class="copyright">
<a href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
</div>
</div>
</div>
</footer>
<!-- END FOOTER --></div>
</div>
</div>



<h2 id="when-to-use-a-404-page">When to use a 404 page</h2>
<p>There is a chance in all services that people will encounter a 404 page.
Processes and systems should be put in place to prevent users encountering 404 pages in the first place.</p>
<p>The main reasons you would need to show users a 404 page:</p>
<ol>
<li>if they followed a link (URL) that is broken or pointing to the wrong location</li>
<li>if they typed or copied a link incorrectly</li>
</ol>
<p>When you design the 404 page for your service you need to consider:</p>
<ul>
<li>the best way for people to solve the problem</li>
<li>if there is anything spesific your service can do to help users</li>
</ul>
<h2 id="how-404-pages-work">How 404 pages work</h2>
<p>When you design the 404 page for your service you need to consider:</p>
<ul>
<li>the best way for people to solve the problem</li>
<li>if there is anything spesific your service can do to help users</li>
</ul>
<p>The page should:
<!-- @todo add link to the page template --></p>
<ul>
<li>use the standard page template</li>
<li>include the phase banner relevent to the service</li>
<li>have &quot;Page not found&quot; as the page title and H1</li>
<li>be clear and concise</li>
<li>an explination of the problem if possible</li>
<li>not have breadcrumbs</li>
<li>not use vague terms</li>
<li>not use red text to warn people</li>
<li>optionally display a form for users to tell us about the problem</li>
</ul>
<h2 id="research-on-404-pages">Research on 404 pages</h2>
<p>We need more user research on 404 pages. </p>
<p>We want to know:</p>
<ul>
<li>if people are able to resolve the problem on their own</li>
<li>if people understand what caused the page</li>
<li>if people understand the content </li>
<li>if anything is missing from the content</li>
<li>if giving users a form to report the problem helps </li>
</ul>
<p>Contribute your research via this <a href="https://github.com/hmrc/design-patterns/issues/104">GitHub issue</a>.</p>


<!--
TODO: pass the following into the template from AF
<div id="related-content" class="related-content">
<div class="grid-row">
<div class="column-one-quarter related-content-grid-item">
<h2>Further resources</h2>
<ul class="list">
<li><a href="#">Edit this guidance on GitHub</a></li>
<li><a href="#">Raise an issue on GitHub</a></li>
<li><a href="#">History of this page</a></li>
</ul>
</div>
<div class="column-one-quarter related-content-grid-item">
<dl class="meta-data-bottom">
<dt>Last reviewed:</dt>
<dd>30 March 2017</dd>
</dl>
</div>
</div>
</div>
-->

<div class="callout">
<h2 class="heading-medium">Get in touch</h2>
<p>If you’ve got a question, idea or suggestion share it in <a href="https://hmrcdigital.slack.com/messages/C39V3PH38">#team-sdt</a> on HMRC Slack (<a href="slack://channel?team=T04RY81HB&amp;id=C39V3PH38">open in app</a>) or <a href="[email protected]">email the Service Design Tools team</a></p>
</div>
</main>

<footer class="design-system-footer design-system-footer--full-width">
<div class="footer-container">
<div class="footer__navigation">
<div class="footer__navigation--column">
<h2 class="heading-medium">GOV.UK Design System</h2>
<ul>
<li><a href="https://govuk-design-system-prototypes.cloudapps.digital/design-patterns/patterns/">Prototype</a></li>
</ul>
</div>
<div class="footer__navigation--column">
<h2 class="heading-medium">Other design resources</h2>
<ul>
<li><a href="https://www.gov.uk/design-principles">GDS Design Principles</a></li>
<li><a href="https://www.gov.uk/service-manual">GOV.UK Service Manual</a></li>
<li><a href="#">GOV.UK Frontend</a></li>
<li><a href="https://govuk-prototype-kit.herokuapp.com/docs">GOV.UK Prototype kit</a></li>
</ul>
</div>
</div>

<div class="footer__licence">
<a class="footer__licence-logo" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a>
<p class="footer__licence-description">All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>
</div>

<div class="footer__copyright">
<a class="footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
</div>
</div>
</footer>
</div>
</div>
</div>

<script src="public/assets/javascripts/vendor/highlight/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();

function scaleExampleHeight() {
var scaleWrapper = document.querySelectorAll('.scale-wrapper')

for (var i = 0; i <= scaleWrapper.length - 1; i++) {
scaleWrapper[i].style.height = scaleWrapper[i].querySelector('.scale').offsetHeight / 2 + 'px'
}
}

window.addEventListener('resize', function() {
scaleExampleHeight()
})

scaleExampleHeight()
</script>



<script src="public/javascripts/application.min.js"></script>
</body>
</html>
5 changes: 4 additions & 1 deletion patterns/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
<div class="toc" data-module="table-of-contents">
<nav id="toc" class="js-toc-list toc__list">
<ul class="pattern-nav">
<li><a href="/assets-frontend/patterns/404-page/index.html">404 Page</a></li>
<li><a href="/assets-frontend/patterns/shutter-pages/index.html">Shutter Pages</a></li>
<ul>
</nav>
Expand All @@ -106,8 +107,10 @@ <h1></h1>
-->

<h1 id="patterns">Patterns</h1>
<p>=======</p>
<p>Here you will find best practice guidance and design solutions for specific user tasks and scenarios.</p>
<p>Some of the patterns in this section contain coded examples, others are written guidance. Patterns often use single or combinations of <a href="components">components</a> and describe their use in context of their relationship to the user.</p>
<p>Some of the patterns in this section contain coded examples, others are written guidance. Patterns often use single or combinations of <a href="components">components</a> and describe their use in context of their relationship to the
user.</p>


<!--
Expand Down
1 change: 1 addition & 0 deletions patterns/shutter-pages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
<div class="toc" data-module="table-of-contents">
<nav id="toc" class="js-toc-list toc__list">
<ul class="pattern-nav">
<li><a href="/assets-frontend/patterns/404-page/index.html">404 Page</a></li>
<li><a href="/assets-frontend/patterns/shutter-pages/index.html">Shutter Pages</a></li>
<ul>
</nav>
Expand Down
Loading

0 comments on commit 25604e5

Please sign in to comment.