darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-10 03:14:58 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
ee03eb07676ebdfe95dc7e894e00a0e1d1ae66e1
notifications-admin/app/templates/views/signedout.html

198 lines
7.6 KiB
HTML
Raw Normal View History

Make a full width base template We need this because the top section of the new product page will be going full-bleed.
2016-11-22 17:15:31 +00:00
{% extends "fullwidth_template.html" %}
Update start button on signed out homepage
2020-02-06 13:36:17 +00:00
{% from "components/button/macro.njk" import govukButton %}
Create base forms for registration and sign in Created routes and forms for registration, sign in, and registration from an invite. Also tidied up assets folder, removed copy of fronted toolkit.
2015-11-25 16:21:28 +00:00
Add meta description tag to homepage Google tries to auto-generate a snippet of a site’s content to show in search results. Currently it’s not doing a great job of this for Notify. There’s a chance that if we give it better content in the site’s meta description then it will use that instead. Worth a go… The content is adapted from the blue box on the product page. It’s 145 characters, which is within the 160 characters recommended[1] It matches the content in the page, and contains words that users are likely to be searching for (GOV.UK Notify, emails, text messages). It’s only on the homepage, because it shouldn’t be duplicated across multiple pages. https://yoast.com/meta-descriptions/
2017-11-14 17:25:32 +00:00
{% block meta %}
Update product page to talk about letters Letters is now a mature enough feature that we should: - be raising awareness amongst our users that it’s a thing we offer - not have letters be a surprise to anyone creating a Notify account for the first time Shouldn’t be merged until: - [ ] https://github.com/alphagov/notifications-api/pull/1600
2018-01-18 16:38:15 +00:00
<meta name="description" content="GOV.UK Notify lets you send emails, text messages and letters to your users. Try it now if you work in central government, a local authority, or the NHS.">
Add meta description tag to homepage Google tries to auto-generate a snippet of a site’s content to show in search results. Currently it’s not doing a great job of this for Notify. There’s a chance that if we give it better content in the site’s meta description then it will use that instead. Worth a go… The content is adapted from the blue box on the product page. It’s 145 characters, which is within the 160 characters recommended[1] It matches the content in the page, and contains words that users are likely to be searching for (GOV.UK Notify, emails, text messages). It’s only on the homepage, because it shouldn’t be duplicated across multiple pages. https://yoast.com/meta-descriptions/
2017-11-14 17:25:32 +00:00
{% endblock %}
Update page title block name on signed out page Now matches the block from the GOVUKFrontend template. This is the only page not suffixed by "GOV.UK Notify" so has it's specific content for this block.
2019-10-11 16:21:05 +01:00
{% block pageTitle %}
Make page titles consistent This commit modifies the HTML `<title>` tags for all the pages. It makes two main changes: - make the title tag match the `<h1>` of the page, for better or worse - put the service name after the page title, seperated by an en dash, as per GOV.UK
2016-02-08 09:23:51 +00:00
GOV.UK Notify
Create base forms for registration and sign in Created routes and forms for registration, sign in, and registration from an invite. Also tidied up assets folder, removed copy of fronted toolkit.
2015-11-25 16:21:28 +00:00
{% endblock %}
Update content area blocks in descendent pages GOV.UK Frontend's template wraps all content in a `<main>` tag and puts it in the main column. Some of Notify's pages need to reach out of the main column (product page). Some have several blocks of navigation before the main content area. This adjusts the blocks in all the templates where this is the case so those conditions can be met.
2019-10-11 16:44:17 +01:00
{% block content %}
Create base forms for registration and sign in Created routes and forms for registration, sign in, and registration from an invite. Also tidied up assets folder, removed copy of fronted toolkit.
2015-11-25 16:21:28 +00:00
Fix missing skiplink target on product page We didn’t have an element with an `id` of `content` on the product page because we didn’t want the styles that come with it (from GOV.UK Elements here: https://github.com/alphagov/govuk_elements/blob/d6226bd2c8c7e256f995c0f519daaa4035c6bd54/public/sass/elements/_layout.scss#L9-L20) This meant that the skiplink didn’t work on the product page because it’s target was not on the page. The skiplink’s target is hardcoded to point at `#content`. The proper way to fix this would be to not hardcode the skiplink to point at `#content`, ie what this pull request does: https://github.com/alphagov/govuk_template/pull/275 Until that is merged, we can hack around the problem by overriding the styles that Elements applies to `#content`, which is what this pull request does.
2017-02-14 11:33:55 +00:00
<div class="product-page-intro">
Remove unecessary id and class from product page Stopped using `#content` on the product page - this was from GOV.UK elements. Also removed the `override-elements-content` class since the page looks the same without it.
2020-02-19 14:21:22 +00:00
<div class="product-page-intro-wrapper">
Add a breadcrumb to the product page This copies what the other GaaP components will be doing for their product pages. The SASS and HTML is taken from here: https://github.com/alphagov/product-page-example/blob/f05ca1fb71f16728bb7a52462b11a850420f36f0/source/stylesheets/modules/_breadcrumbs.scss Only changes I’ve made are: - making the file paths work with our build pipeline Changes to our code to accomodate this are: - putting the padding on the product page `<h1>` not its container - moving the hero image accordingly so that it lines up - making the `<main>` element on the product page into an anchor so that the breadcrumb can link to it – screenreader will then announce the link as “GOV.UK Notify, same page”
2017-01-19 14:52:54 +00:00
<nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
Update all links to use GOVUK Frontend style Includes: - turning off :visited styles to match existing design - swapping heading classes used to make links bold for the GOVUK Frontend bold override class - adding visually hidden text to some links to make them work when isolated from their context We may need to revisit whether some links, such as those for documentation and features, may benefit from having some indication that their target has been visited.
2019-12-06 07:53:46 +00:00
<a class="govuk-link govuk-link--no-visited-state" href="https://www.gov.uk/service-toolkit#gov-uk-services" itemprop="item"><span itemprop="name">GOV.UK services</span></a>
Add a breadcrumb to the product page This copies what the other GaaP components will be doing for their product pages. The SASS and HTML is taken from here: https://github.com/alphagov/product-page-example/blob/f05ca1fb71f16728bb7a52462b11a850420f36f0/source/stylesheets/modules/_breadcrumbs.scss Only changes I’ve made are: - making the file paths work with our build pipeline Changes to our code to accomodate this are: - putting the padding on the product page `<h1>` not its container - moving the hero image accordingly so that it lines up - making the `<main>` element on the product page into an anchor so that the breadcrumb can link to it – screenreader will then announce the link as “GOV.UK Notify, same page”
2017-01-19 14:52:54 +00:00
</li>
<li class="breadcrumbs__item breadcrumbs__item--active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
Update all links to use GOVUK Frontend style Includes: - turning off :visited styles to match existing design - swapping heading classes used to make links bold for the GOVUK Frontend bold override class - adding visually hidden text to some links to make them work when isolated from their context We may need to revisit whether some links, such as those for documentation and features, may benefit from having some indication that their target has been visited.
2019-12-06 07:53:46 +00:00
<a class="govuk-link govuk-link--no-visited-state" href="#main" itemprop="item"><span itemprop="name">GOV.UK Notify</span></a>
Add a breadcrumb to the product page This copies what the other GaaP components will be doing for their product pages. The SASS and HTML is taken from here: https://github.com/alphagov/product-page-example/blob/f05ca1fb71f16728bb7a52462b11a850420f36f0/source/stylesheets/modules/_breadcrumbs.scss Only changes I’ve made are: - making the file paths work with our build pipeline Changes to our code to accomodate this are: - putting the padding on the product page `<h1>` not its container - moving the hero image accordingly so that it lines up - making the `<main>` element on the product page into an anchor so that the breadcrumb can link to it – screenreader will then announce the link as “GOV.UK Notify, same page”
2017-01-19 14:52:54 +00:00
</li>
</ol>
</nav>
Replace `grid-row` with `govuk-grid-row` Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class.
2020-02-19 11:57:15 +00:00
<div class="govuk-grid-row">
Replace `column-two-thirds` with `govuk-grid-column-two-thirds`
2020-02-19 12:36:02 +00:00
<div class="govuk-grid-column-two-thirds">
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
<h1>
Update product page to talk about letters Letters is now a mature enough feature that we should: - be raising awareness amongst our users that it’s a thing we offer - not have letters be a surprise to anyone creating a Notify account for the first time Shouldn’t be merged until: - [ ] https://github.com/alphagov/notifications-api/pull/1600
2018-01-18 16:38:15 +00:00
Send emails, text messages and letters to your users
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
</h1>
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future.
2020-05-29 17:11:01 +01:00
<p class="govuk-body">
Better strapline on the homepage
2017-10-26 12:58:02 +01:00
Try GOV.UK Notify now if you work in central government, a&nbsp;local authority, or the NHS.
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
</p>
<div class="button-container">
Update start button on signed out homepage
2020-02-06 13:36:17 +00:00
{{ govukButton({
"element": "a",
"text": "Create an account",
"classes": "product-page-button button-container__button govuk-!-margin-right-3",
"href": url_for('main.register' )
}) }}
Update all links to use GOVUK Frontend style Includes: - turning off :visited styles to match existing design - swapping heading classes used to make links bold for the GOVUK Frontend bold override class - adding visually hidden text to some links to make them work when isolated from their context We may need to revisit whether some links, such as those for documentation and features, may benefit from having some indication that their target has been visited.
2019-12-06 07:53:46 +00:00
or <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
it before
</div>
</div>
</div>
</div>
</div>
<div class="product-page-section">
Replace `grid-row` with `govuk-grid-row` Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class.
2020-02-19 11:57:15 +00:00
<div class="govuk-grid-row">
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
<h2>
Reword and embiggen the headings Also reword some of the `<p>`s so that they flow better from the headings. This was a bit me, and a bit sitting down and hammering this stuff out with Stephen and Sheryll.
2016-11-30 13:52:12 +00:00
Control your content
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
</h2>
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future.
2020-05-29 17:11:01 +01:00
<p class="govuk-body">
Replace don't with do not
2019-09-13 11:05:24 +01:00
You do not need any technical knowledge to create email,
Update product page to talk about letters Letters is now a mature enough feature that we should: - be raising awareness amongst our users that it’s a thing we offer - not have letters be a surprise to anyone creating a Notify account for the first time Shouldn’t be merged until: - [ ] https://github.com/alphagov/notifications-api/pull/1600
2018-01-18 16:38:15 +00:00
text&nbsp;message or letter templates.
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
</p>
</div>
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Use asset fingerprinter to serve images This means we can cache them forever, and only invalidate the cache when the image changes.
2018-11-29 14:28:29 +00:00
<img src="{{ asset_url('images/product/01-templates.svg') }}" alt="">
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
</div>
</div>
Make the blue header on the home page full-width This copies the style that Tim and Stephen have been developing for all product pages. It also pulls out the CSS for this into its own file, so that it could potentially be reused.
2016-11-22 17:53:09 +00:00
</div>
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
<div class="product-page-section">
Replace `grid-row` with `govuk-grid-row` Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class.
2020-02-19 11:57:15 +00:00
<div class="govuk-grid-row">
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Reword and embiggen the headings Also reword some of the `<p>`s so that they flow better from the headings. This was a bit me, and a bit sitting down and hammering this stuff out with Stephen and Sheryll.
2016-11-30 13:52:12 +00:00
<h2>
See how your messages perform
</h2>
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future.
2020-05-29 17:11:01 +01:00
<p class="govuk-body">
Reword and embiggen the headings Also reword some of the `<p>`s so that they flow better from the headings. This was a bit me, and a bit sitting down and hammering this stuff out with Stephen and Sheryll.
2016-11-30 13:52:12 +00:00
Track how many messages you’ve sent and
Replace aren't with are not
2019-09-13 12:45:12 +01:00
find out which ones are not being delivered.
Reword and embiggen the headings Also reword some of the `<p>`s so that they flow better from the headings. This was a bit me, and a bit sitting down and hammering this stuff out with Stephen and Sheryll.
2016-11-30 13:52:12 +00:00
</p>
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
</div>
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Add alt text for the images on the product page The images are telling you stuff that is extra to the text on the page so they should be explained for users who can’t see them.
2016-12-07 17:00:53 +00:00
<img
Use asset fingerprinter to serve images This means we can cache them forever, and only invalidate the cache when the image changes.
2018-11-29 14:28:29 +00:00
src="{{ asset_url('images/product/02-reporting.svg') }}"
Add alt text for the images on the product page The images are telling you stuff that is extra to the text on the page so they should be explained for users who can’t see them.
2016-12-07 17:00:53 +00:00
alt="A screenshot of GOV.UK Notify showing counts of emails and text messages sent"
>
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
</div>
</div>
</div>
Add a ‘team’ section This addresses part of the ‘is Notify dependable’ group of needs. The ones it specifically and partially addresses are: - is it reliable - how is it supported There’s more to come in this section, we’re doing this bit now because it’s a nice conclusion to the page.
2016-11-28 15:39:44 +00:00
<div class="product-page-section">
Reword and embiggen the headings Also reword some of the `<p>`s so that they flow better from the headings. This was a bit me, and a bit sitting down and hammering this stuff out with Stephen and Sheryll.
2016-11-30 13:52:12 +00:00
<h2 class="with-keyline">
Send messages manually or automatically
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
</h2>
Replace `grid-row` with `govuk-grid-row` Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class.
2020-02-19 11:57:15 +00:00
<div class="govuk-grid-row">
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future.
2020-05-29 17:11:01 +01:00
<p class="govuk-body">
Reword and embiggen the headings Also reword some of the `<p>`s so that they flow better from the headings. This was a bit me, and a bit sitting down and hammering this stuff out with Stephen and Sheryll.
2016-11-30 13:52:12 +00:00
Upload a spreadsheet of email&nbsp;addresses or
phone&nbsp;numbers and Notify sends the messages.
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
</p>
Add alt text for the images on the product page The images are telling you stuff that is extra to the text on the page so they should be explained for users who can’t see them.
2016-12-07 17:00:53 +00:00
<img
Use asset fingerprinter to serve images This means we can cache them forever, and only invalidate the cache when the image changes.
2018-11-29 14:28:29 +00:00
src="{{ asset_url('images/product/03-spreadsheet.svg') }}"
Add alt text for the images on the product page The images are telling you stuff that is extra to the text on the page so they should be explained for users who can’t see them.
2016-12-07 17:00:53 +00:00
alt="A screenshot of a spreadsheet with columns for email address, name and colour"
>
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
</div>
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future.
2020-05-29 17:11:01 +01:00
<p class="govuk-body">
Reword and embiggen the headings Also reword some of the `<p>`s so that they flow better from the headings. This was a bit me, and a bit sitting down and hammering this stuff out with Stephen and Sheryll.
2016-11-30 13:52:12 +00:00
Integrate the GOV.UK Notify API with your web&nbsp;application or
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
back office system.
</p>
Add alt text for the images on the product page The images are telling you stuff that is extra to the text on the page so they should be explained for users who can’t see them.
2016-12-07 17:00:53 +00:00
<img
Use asset fingerprinter to serve images This means we can cache them forever, and only invalidate the cache when the image changes.
2018-11-29 14:28:29 +00:00
src="{{ asset_url('images/product/04-api.svg') }}"
Add alt text for the images on the product page The images are telling you stuff that is extra to the text on the page so they should be explained for users who can’t see them.
2016-12-07 17:00:53 +00:00
alt="A screenshot of some computer code with a notify.send_email function"
>
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
</div>
</div>
</div>
Add introducer video to the product page It’s always been the plan to put this video on the product page. Just getting round to it now. Watch the video here: https://www.youtube.com/watch?v=i2a2jiwYTd4 Uses the CSS developed by the service manual team, taken from here: https://github.com/alphagov/product-page-example/blob/a5c613f07bca47a15f67c529615bc83995aea3b5/source/stylesheets/modules/_responsive-embed.scss
2017-01-23 16:25:11 +00:00
<div class="product-page-section">
<h2 class="with-keyline">
Introducing GOV.UK Notify
</h2>
<div class="responsive-embed responsive-embed--16by9 responsive-embed--bordered bottom-gutter-2">
<div class="responsive-embed__wrapper">
Serve video from a domain that doesn’t set cookies Then it’s one less cookie we have to get users to opt in to. We don’t derive any value from Youtube setting cookies. `youtube-nocookie.com` is a domain provided by Google for this purpose.
2019-12-19 13:43:44 +00:00
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/_90cv1YgQo4" frameborder="0" allowfullscreen></iframe>
Add introducer video to the product page It’s always been the plan to put this video on the product page. Just getting round to it now. Watch the video here: https://www.youtube.com/watch?v=i2a2jiwYTd4 Uses the CSS developed by the service manual team, taken from here: https://github.com/alphagov/product-page-example/blob/a5c613f07bca47a15f67c529615bc83995aea3b5/source/stylesheets/modules/_responsive-embed.scss
2017-01-23 16:25:11 +00:00
</div>
</div>
</div>
Add number of services to product page One of the user needs that we identified is not wanting to be the first to use it. It feels like a much less risky choice if there are already other people in government using it. The easiest way to communicate this is with counts of how many services. The count of departments is good because it shows breadth, where the count of services shows depth. Hard coded for now because we have no automatic way of splitting our test services from real live services.
2016-12-19 12:12:55 +00:00
<div class="product-page-section">
Automate counting of live services and orgs Returns the data calculated by the API. Stored in Redis against a hardcoded key so that no-one hammering the home page is directly hitting the database.
2019-04-10 17:20:51 +01:00
<div class="with-keyline bottom-gutter-2" id="whos-using-notify">
Add number of services to product page One of the user needs that we identified is not wanting to be the first to use it. It feels like a much less risky choice if there are already other people in government using it. The easiest way to communicate this is with counts of how many services. The count of departments is good because it shows breadth, where the count of services shows depth. Hard coded for now because we have no automatic way of splitting our test services from real live services.
2016-12-19 12:12:55 +00:00
<h2>Who’s using GOV.UK Notify</h2>
Replace `grid-row` with `govuk-grid-row` Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class.
2020-02-19 11:57:15 +00:00
<div class="govuk-grid-row bottom-gutter">
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Replace all visually-hidden classes These have been replaced: https://design-system.service.gov.uk/get-started/updating-your-code/#helper-class-names
2019-10-21 15:18:25 +01:00
<h3 class="govuk-visually-hidden">Services</h3>
Count of orgs and live services for platform admin This makes it consistent that an option which contains more options has a hint about how many options it contains. Also adds a formatter to get us ready for 1,000 services 🎉
2019-07-08 12:00:40 +01:00
<div class="product-page-big-number">{{ counts.services|format_thousands }}</div>
Add number of services to product page One of the user needs that we identified is not wanting to be the first to use it. It feels like a much less risky choice if there are already other people in government using it. The easiest way to communicate this is with counts of how many services. The count of departments is good because it shows breadth, where the count of services shows depth. Hard coded for now because we have no automatic way of splitting our test services from real live services.
2016-12-19 12:12:55 +00:00
services
</div>
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Replace all visually-hidden classes These have been replaced: https://design-system.service.gov.uk/get-started/updating-your-code/#helper-class-names
2019-10-21 15:18:25 +01:00
<h3 class="govuk-visually-hidden">Organisations</h3>
Count of orgs and live services for platform admin This makes it consistent that an option which contains more options has a hint about how many options it contains. Also adds a formatter to get us ready for 1,000 services 🎉
2019-07-08 12:00:40 +01:00
<div class="product-page-big-number">{{ counts.organisations|format_thousands }}</div>
Rename count from ‘departments’ to ’organisations’ They’re not all departments. Could also say ‘departments and agencies’ as per the Performance Platform page. Which is more accurate?
2017-10-03 14:27:13 +01:00
organisations
Add number of services to product page One of the user needs that we identified is not wanting to be the first to use it. It feels like a much less risky choice if there are already other people in government using it. The easiest way to communicate this is with counts of how many services. The count of departments is good because it shows breadth, where the count of services shows depth. Hard coded for now because we have no automatic way of splitting our test services from real live services.
2016-12-19 12:12:55 +00:00
</div>
</div>
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future.
2020-05-29 17:11:01 +01:00
<p class="govuk-body">
Make it a single plain text link
2017-03-24 13:36:13 +00:00
See the
Update all links to use GOVUK Frontend style Includes: - turning off :visited styles to match existing design - swapping heading classes used to make links bold for the GOVUK Frontend bold override class - adding visually hidden text to some links to make them work when isolated from their context We may need to revisit whether some links, such as those for documentation and features, may benefit from having some indication that their target has been visited.
2019-12-06 07:53:46 +00:00
<a class="govuk-link govuk-link--no-visited-state" href="https://www.gov.uk/performance/govuk-notify/government-services">list of services and organisations</a>.
Make it a single plain text link
2017-03-24 13:36:13 +00:00
</p>
Add number of services to product page One of the user needs that we identified is not wanting to be the first to use it. It feels like a much less risky choice if there are already other people in government using it. The easiest way to communicate this is with counts of how many services. The count of departments is good because it shows breadth, where the count of services shows depth. Hard coded for now because we have no automatic way of splitting our test services from real live services.
2016-12-19 12:12:55 +00:00
</div>
</div>
Add pricing to the product page ‘How much does it cost’ is one of the user needs that we identifed for the product page. Cost is not the primary reason someone would use Notify (they’re more likely to cite ease, or that it’s ‘official’). However if you _don’t_ mention cost then it looks like we’re hiding something or that there’s a catch. So putting it on the page allays fears that people might have, rather than pushing them towards using it. Visually I’ve dropped the size of the `<h2>`s on this page so that there’s enough difference between them and the big numbers. The idea of the big numbers being big is to catch people’s attention as they scroll down the page, by breaking up the rythmn.
2016-12-14 14:59:41 +00:00
<div class="product-page-section">
<div class="with-keyline bottom-gutter-2">
<h2>Pricing</h2>
Replace `grid-row` with `govuk-grid-row` Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class.
2020-02-19 11:57:15 +00:00
<div class="govuk-grid-row bottom-gutter">
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Replace all visually-hidden classes These have been replaced: https://design-system.service.gov.uk/get-started/updating-your-code/#helper-class-names
2019-10-21 15:18:25 +01:00
<h3 class="govuk-visually-hidden">Emails</h3>
Add pricing to the product page ‘How much does it cost’ is one of the user needs that we identifed for the product page. Cost is not the primary reason someone would use Notify (they’re more likely to cite ease, or that it’s ‘official’). However if you _don’t_ mention cost then it looks like we’re hiding something or that there’s a catch. So putting it on the page allays fears that people might have, rather than pushing them towards using it. Visually I’ve dropped the size of the `<h2>`s on this page so that there’s enough difference between them and the big numbers. The idea of the big numbers being big is to catch people’s attention as they scroll down the page, by breaking up the rythmn.
2016-12-14 14:59:41 +00:00
<div class="product-page-big-number">Unlimited</div>
free emails
</div>
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Replace all visually-hidden classes These have been replaced: https://design-system.service.gov.uk/get-started/updating-your-code/#helper-class-names
2019-10-21 15:18:25 +01:00
<h3 class="govuk-visually-hidden">Text messages</h3>
Updated free text message allowance Updated free text message allowance to make it clearer. Added a link to full pricing information. Ticket: https://www.pivotaltracker.com/story/show/163908166
2019-03-26 10:59:27 +00:00
<div class="product-page-big-number">Up to 250,000</div>
Update product page to talk about letters Letters is now a mature enough feature that we should: - be raising awareness amongst our users that it’s a thing we offer - not have letters be a surprise to anyone creating a Notify account for the first time Shouldn’t be merged until: - [ ] https://github.com/alphagov/notifications-api/pull/1600
2018-01-18 16:38:15 +00:00
free text messages a year,<br>
then 1.58 pence per message
Add pricing to the product page ‘How much does it cost’ is one of the user needs that we identifed for the product page. Cost is not the primary reason someone would use Notify (they’re more likely to cite ease, or that it’s ‘official’). However if you _don’t_ mention cost then it looks like we’re hiding something or that there’s a catch. So putting it on the page allays fears that people might have, rather than pushing them towards using it. Visually I’ve dropped the size of the `<h2>`s on this page so that there’s enough difference between them and the big numbers. The idea of the big numbers being big is to catch people’s attention as they scroll down the page, by breaking up the rythmn.
2016-12-14 14:59:41 +00:00
</div>
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Replace all visually-hidden classes These have been replaced: https://design-system.service.gov.uk/get-started/updating-your-code/#helper-class-names
2019-10-21 15:18:25 +01:00
<h3 class="govuk-visually-hidden">Letters</h3>
Update product page with new letter prices We updated the letter pricing in https://github.com/alphagov/notifications-admin/pull/3128 The minimum price has gone up from 30p to 35p
2019-11-20 10:53:39 +00:00
<div class="product-page-big-number">35 pence</div>
Update product page to talk about letters Letters is now a mature enough feature that we should: - be raising awareness amongst our users that it’s a thing we offer - not have letters be a surprise to anyone creating a Notify account for the first time Shouldn’t be merged until: - [ ] https://github.com/alphagov/notifications-api/pull/1600
2018-01-18 16:38:15 +00:00
to print and post a one page letter
</div>
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Update product page to talk about letters Letters is now a mature enough feature that we should: - be raising awareness amongst our users that it’s a thing we offer - not have letters be a surprise to anyone creating a Notify account for the first time Shouldn’t be merged until: - [ ] https://github.com/alphagov/notifications-api/pull/1600
2018-01-18 16:38:15 +00:00
<p class="align-with-big-number-hint">
There’s no monthly charge, no setup fee and no&nbsp;procurement process.
Add pricing to the product page ‘How much does it cost’ is one of the user needs that we identifed for the product page. Cost is not the primary reason someone would use Notify (they’re more likely to cite ease, or that it’s ‘official’). However if you _don’t_ mention cost then it looks like we’re hiding something or that there’s a catch. So putting it on the page allays fears that people might have, rather than pushing them towards using it. Visually I’ve dropped the size of the `<h2>`s on this page so that there’s enough difference between them and the big numbers. The idea of the big numbers being big is to catch people’s attention as they scroll down the page, by breaking up the rythmn.
2016-12-14 14:59:41 +00:00
</p>
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future.
2020-05-29 17:11:01 +01:00
<p class="govuk-body">Find out more about <a class="govuk-link govuk-link--no-visited-state" href="https://www.notifications.service.gov.uk/pricing">pricing</a>.
Updated free text message allowance Updated free text message allowance to make it clearer. Added a link to full pricing information. Ticket: https://www.pivotaltracker.com/story/show/163908166
2019-03-26 10:59:27 +00:00
</p>
Add pricing to the product page ‘How much does it cost’ is one of the user needs that we identifed for the product page. Cost is not the primary reason someone would use Notify (they’re more likely to cite ease, or that it’s ‘official’). However if you _don’t_ mention cost then it looks like we’re hiding something or that there’s a catch. So putting it on the page allays fears that people might have, rather than pushing them towards using it. Visually I’ve dropped the size of the `<h2>`s on this page so that there’s enough difference between them and the big numbers. The idea of the big numbers being big is to catch people’s attention as they scroll down the page, by breaking up the rythmn.
2016-12-14 14:59:41 +00:00
</div>
</div>
</div>
</div>
<div class="product-page-section">
Replace `grid-row` with `govuk-grid-row` Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class.
2020-02-19 11:57:15 +00:00
<div class="govuk-grid-row">
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Add a ‘team’ section This addresses part of the ‘is Notify dependable’ group of needs. The ones it specifically and partially addresses are: - is it reliable - how is it supported There’s more to come in this section, we’re doing this bit now because it’s a nice conclusion to the page.
2016-11-28 15:39:44 +00:00
<h2 class="with-keyline">
The team
</h2>
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future.
2020-05-29 17:11:01 +01:00
<p class="govuk-body">
Add a ‘team’ section This addresses part of the ‘is Notify dependable’ group of needs. The ones it specifically and partially addresses are: - is it reliable - how is it supported There’s more to come in this section, we’re doing this bit now because it’s a nice conclusion to the page.
2016-11-28 15:39:44 +00:00
GOV.UK Notify is built by the Government Digital Service
and is supported 24 hours a day, 7 days a week.
</p>
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future.
2020-05-29 17:11:01 +01:00
<p class="govuk-body">
Update all links to use GOVUK Frontend style Includes: - turning off :visited styles to match existing design - swapping heading classes used to make links bold for the GOVUK Frontend bold override class - adding visually hidden text to some links to make them work when isolated from their context We may need to revisit whether some links, such as those for documentation and features, may benefit from having some indication that their target has been visited.
2019-12-06 07:53:46 +00:00
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.support') }}">Contact us</a> if you have a question or want
Add a ‘team’ section This addresses part of the ‘is Notify dependable’ group of needs. The ones it specifically and partially addresses are: - is it reliable - how is it supported There’s more to come in this section, we’re doing this bit now because it’s a nice conclusion to the page.
2016-11-28 15:39:44 +00:00
to give feedback.
</p>
</div>
Replace `column-half` with `govuk-grid-column-one-half`
2020-02-19 14:37:28 +00:00
<div class="govuk-grid-column-one-half">
Add alt text for the images on the product page The images are telling you stuff that is extra to the text on the page so they should be explained for users who can’t see them.
2016-12-07 17:00:53 +00:00
<img
Use asset fingerprinter to serve images This means we can cache them forever, and only invalidate the cache when the image changes.
2018-11-29 14:28:29 +00:00
src="{{ asset_url('images/product/team.jpg') }}"
Add alt text for the images on the product page The images are telling you stuff that is extra to the text on the page so they should be explained for users who can’t see them.
2016-12-07 17:00:53 +00:00
alt="A photo of the GOV.UK Notify team gathered around a big screen. One team member is pointing at a graph on the screen."
>
Add a ‘team’ section This addresses part of the ‘is Notify dependable’ group of needs. The ones it specifically and partially addresses are: - is it reliable - how is it supported There’s more to come in this section, we’re doing this bit now because it’s a nice conclusion to the page.
2016-11-28 15:39:44 +00:00
</div>
</div>
</div>
Add a grid of features to the home page This is the first step towards a fully-fledged ‘product’ page. The needs for the top, blue section of the page are: - what is Notify? - can I use it? - can I test it out? - how do I create a log in The needs for the next section of this page (which is the only one added by this commit) are: - how will Notify help me work? - will it work with my service? This commit shows 4 features of Notify on the home page which address those needs. They are illustrated because: 1. We want to catch people’s attention – users are reluctant to scroll on this page because they just want to click the ‘create account button’. But we hypothesize that they will get on better with Notify if they look at some of this stuff first. 2. The concepts that they’re talking about are hard to explain with just words because they’re quite abstract. The illustrations help us be more specific. 3. Feedback we got from user research was that the product page didn’t give users any sense of what it was like to actually use Notify.
2016-11-23 10:58:12 +00:00
Create base forms for registration and sign in Created routes and forms for registration, sign in, and registration from an invite. Also tidied up assets folder, removed copy of fronted toolkit.
2015-11-25 16:21:28 +00:00
Updated html title [ci skip]
2015-12-01 09:54:58 +00:00
{% endblock %}
Reference in New Issue Copy Permalink