darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-15 15:28:50 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
77c0faf4e5ba50e2a9d04cbff0b894abb208b299
notifications-admin/app/templates/views/signedout.html

195 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 %}
now with even fewer letters
2022-10-18 15:27:13 +00:00
<meta name="description" content="US Notify lets you send text messages and email to your users. Try it now if you work in federal, state or local government.">
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 %}
branding
2022-07-20 15:23:54 -07:00
US 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">
Progressively enhance the proposition illustration When users with Javascript enabled request it we can show a higher quality SVG image which will look better in certain circumstances.
2021-02-11 16:44:22 +00:00
<div class="product-page-intro-wrapper" data-module="homepage">
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">
branding
2022-07-20 15:23:54 -07:00
<a class="govuk-link govuk-link--no-visited-state" href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" itemprop="item"><span itemprop="name">TTS Solutions</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">
branding
2022-07-20 15:23:54 -07:00
<a class="govuk-link govuk-link--no-visited-state" href="#main" itemprop="item"><span itemprop="name">US 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>
now with even fewer letters
2022-10-18 15:27:13 +00:00
Send text messages and email 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">
branding
2022-07-20 15:23:54 -07:00
Try US Notify now if you work in federal, state or local government.
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>
Updates to get pa11y passing
2022-08-31 08:47:18 -04:00
<div class="govuk-grid-column-one-third">
<img
src="{{ asset_url('images/product/proposition-illustration.png') }}"
alt="An illustration of notifications to a phone, a laptop, and a letter.">
</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>
</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">
Updates to get pa11y passing
2022-08-31 08:47:18 -04:00
<img
src="{{ asset_url('images/product/01-templates.svg') }}"
alt="Example screenshot of adding a new text message template">
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') }}"
branding
2022-07-20 15:23:54 -07:00
alt="A screenshot of US Notify showing counts of emails and text messages sent"
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
>
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">
branding
2022-07-20 15:23:54 -07:00
Integrate the US 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 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">
branding
2022-07-20 15:23:54 -07:00
<h2>Who’s using US 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">
Remove redundant hidden H3s This commit replaces the H3s which only repeated information with some hidden text that will make it read nicer for screenreaders.
2021-03-12 17:12:47 +00:00
<span class="govuk-visually-hidden">There are</span>
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>
More copy tweaking to remove UK spellings
2022-11-04 12:35:40 -04:00
<span>organizations</span>
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>
Switch org and service order on home page This matches what’s on the performance page – orgs on the left, services on the right.
2021-03-11 13:30:38 +00:00
<div class="govuk-grid-column-one-half">
Remove redundant hidden H3s This commit replaces the H3s which only repeated information with some hidden text that will make it read nicer for screenreaders.
2021-03-12 17:12:47 +00:00
<span class="govuk-visually-hidden">and</span>
Switch org and service order on home page This matches what’s on the performance page – orgs on the left, services on the right.
2021-03-11 13:30:38 +00:00
<div class="product-page-big-number">{{ counts.services|format_thousands }}</div>
Updates to get pa11y passing
2022-08-31 08:47:18 -04:00
<span>services</span>
Remove redundant hidden H3s This commit replaces the H3s which only repeated information with some hidden text that will make it read nicer for screenreaders.
2021-03-12 17:12:47 +00:00
<span class="govuk-visually-hidden">using Notify.</span>
Switch org and service order on home page This matches what’s on the performance page – orgs on the left, services on the right.
2021-03-11 13:30:38 +00:00
</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>
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
More copy tweaking to remove UK spellings
2022-11-04 12:35:40 -04:00
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.performance') }}">list of services and organizations</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>
now with even fewer letters
2022-10-18 15:27:13 +00:00
<!-- <div class="product-page-section">
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="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>
Updates to get pa11y passing
2022-08-31 08:47:18 -04:00
<span>free emails</span>
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">Text messages</h3>
Update text message allowance and cost
2022-04-01 09:14:24 +01:00
<div class="product-page-big-number">Up to 40,000</div>
Updates to get pa11y passing
2022-08-31 08:47:18 -04:00
<span>free text messages a year,<br>
then {{ sms_rate }} pence per message</span>
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 price of letters on home page Follows https://github.com/alphagov/notifications-admin/pull/4174/files
2022-03-02 10:02:09 +00:00
<div class="product-page-big-number">41 pence</div>
Updates to get pa11y passing
2022-08-31 08:47:18 -04:00
<span>to print and post a one page letter</span>
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
</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>
now with even fewer letters
2022-10-18 15:27:13 +00:00
</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">
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">
Removing some UK-specific language and replacing it with relevant team names.
2022-11-04 12:32:42 -04:00
US Notify is built and maintained by the Public Benefits Studio, within the General Services Administration's Technology Transformation Services.
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
</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') }}"
branding
2022-07-20 15:23:54 -07:00
alt="A photo of the US Notify team gathered around a big screen. One team member is pointing at a graph on the screen."
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
>
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