This commit refines which information we show on each page.
Specifically we’re
- adding some wording (‘at exactly the same time’) to try to communicate
the immediacy
- giving the ‘loud noises’ message it’s own screen to really draw
attention to it
- moving the ‘no phone numbers bit’ later in the journey, and
experimenting with explaining why that is, to make it clearer how it’s
different to a text message
We’ve shown the broadcast tour to a few users now. We’ve learned what
concepts about broadcasting are and aren’t getting through.
So what we’re emphasising here is:
- the thing that appears on the phone (the ‘emergency alert’) not the
technology (a ‘broadcast’)
- how it’s different to other channels of messaging, eg text
We’ve generally spent a lot more time on the content and illustrations
this time around, so overall it’s should be clearer and shorter.
This also expands the communication of training mode into the header,
so it’s visible on every page (we can add another one for ‘live’
services later on).
At the moment they will get a ‘technical difficulties’ error if they
try.
We probably want to do something around letting people self-approve
broadcasts in trial mode, but for now just telling them they can’t is a
better experience than ‘technical difficulties’ (and will probably be
close to what they should see on a live service as well).
This is an initial, prototype-quality attempt at introducing some kind
of tour for users new to broadcasting. A lot of the users we’re speaking
to don’t have a good concept of what broadcasting means, which is
causing usability problems down the line.
We did a similar thing in the early days of Notify to explain the
concept of message templates and personalisation.
This is borrowed from an earlier prototype, and is meant to be temporary
– something better than just plain text.
Text in generated content isn’t always announced by screen readers, so
we should definitely move away from that once we understand what text
will be shown on the phone and where it comes from.
International letters aren’t sent by first or second class post. In
keeping with the little touch of skeumorphism, let’s label them with the
commonly recognised marker of international mail instead.
Our usage for these browsers in the last month is down to 0.2% of all
users, or 14 individual users, according to Google Analytics.
These users also visit about half the number of pages per sessions,
suggesting that they’re not signed in.
This is for use in the folder permissions UI. It’s designed to be sized
at the same width as a GOV.UK style checkbox. The CSS to render it is
something like:
```css
background-image: file-url('folder-black.svg');
background-repeat: no-repeat;
background-size: 39px auto;
background-position: 0px 4px;
```
Sometimes people print stuff under where we’re folding the letter. It’s
annoying to not be able to see it.
This commit adds a little detail where, once you’ve sent the letter
you can unfolds the corner to see what’s underneath.
It’s better that we do this for all letters for discoverability.
To avoid the problem of having confusing defaults, the postage is now
set explicitly on every template.
Putting the postage ‘inside’ the letter template makes the interaction
for changing it consistent with how other parts of the template are
added.
Plus everyone loves skeumorphism.
Duplicates e0ecc95ac6
Copies the code from the normal folder icon, and manually tweaks the
colour, to also get the benefits of minification.
***
IE 10 supports using SVG[1] but has some buggy behaviour when they’re
used as background images.
Without an explicit width/height it stretches the viewBox of the SVG to
fill the containing element. This causes the content of the file to
display centered within the viewBox.
Explicitly setting the width and height seems to be the thing that fixes
this. Out of the suggested fixes on Stackoverflow[2] this one seems to
be the most straightforward.
1. https://caniuse.com/#feat=svg
2. https://stackoverflow.com/questions/17944354/svg-background-image-position-is-always-centered-in-internet-explorer-despite-b
It’s a bit rudimentary to only show the current place in the hierarchy
and the parent. You lose a sense of how deep you are.
But we can’t just show the full path, because it can be arbitrarily
long. So what this commit does is show the full path, but truncates the
display of any items. Further-up than the current folder or its parent.
This also helps disambiguate between folders and templates, because
folders are always shown with the folder icon.
This probably won’t affect many teams, because we don’t anticipate a lot
of deep nesting.
After showing this to a few people the consensus seems to be that
‘Templates’ isn’t itself a folder. Therefore it shouldn’t have a folder
icon.
This has the advantage of disambiguating between being in a folder:
> [screenshot]
…and being in a subfolder:
> [screenshot]
IE8 doesn’t support SVG images as CSS backgrounds. We still have users
on IE8, as I saw yesterday.
This commit adds fallback PNG images for these users. The images are
rendered at 1x (because no-one is using IE8 on a retina screen) and
have been run through `pngcrush -brute` for the smallest possible file
size.
This is needed for when the icon is displayed at a larger size. The
thicker blue icon looks too big if it’s displayed at over 20px high
(the use case for this is displaying it at 30px high).
These are copied from the prototype but with the following changes:
- redrawn to snap exactly to pixels
- slightly thicker border for the blue version, and a thinner border for
the black version, so they look better in situ
- run through https://jakearchibald.github.io/svgomg/ for optimal file
size
This commit doesn’t do anything with the images yet, it just adds them
to the repo.
At the moment branding is an undocumented feature. We get a bunch of
support tickets from teams asking its possible.
This commit:
- lets people know it’s possible, and what the options are
- is the first step towards making this process as self-service as
possible
In some cases we will be able to infer a user’s organisation from there
email address, and Google image search their logo. So the experience for
them is that they press a button and government just sorts it out for
you (also known as "the dream").
In other cases we will have to get back to people asking for a copy of
their logo, or to find out about their service, but this is what we have
to do at the moment anyway.
* Moved the notifications code to go to admin to get the the template
preview document rather than go to template preview.
This will remove the logic from admin and place it in api so it is
easier to expand on later when there are precompiled PDFs
* Added some error handling if API returns an API error.
Caught the error and displayed an error PNG so it is obvious something
failed. Currently it displayed a thumbnail of a png over the top of the
loading page, and therefore it wasn't obvious of the state.
Caught the error and displayed an error PNG so it is obvious something
failed. Currently it displayed a thumbnail of a png over the top of the
loading page, and therefore it wasn't obvious of the state.
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
We’re showing these kinds of logos bigger as of this PR:
https://github.com/alphagov/notifications-utils/pull/170
If we don’t increase the resolution of the asset to be bigger then it
will look blurry.
New image is `108px` high, which is `2 * 54px`, in order for it to look
as good as possible on retina screens.
The message text in our previous illustration was white on light blue,
which didn’t meet WCAG AA colour contrast. WCAG AA requires a contrast
ratio of 4.5:1. The text in our image was only 3.8:1.
The text in this new image has a contrast ratio of 19.8:1, so easily
passes WCAG AAA.
Required a slight tweak to the positioning of the image because it’s
dimensions weren’t exactly the same as the previous one.
