Annual report 2022

[lucascumsille]

Hey @zarino
Just in case, It's not ready there are some links that need update + some extra copy from trustees and Louise.

Fixes: https://github.com/mysociety/orgsites/issues/1266
Copy here

Let me know if there is anything I should fix in the meantime =)
And I'll rebase before merging, I know there are a lot of commits in there.

Things to check before squash and merge:

• Colour contrast passes WCAG 2.1 AA
• All images have alt text and loading="lazy"
• Links in the "Jump to section" menu are all correct, and all sections on the page are represented and in the correct order
• Image credits in the footer are correct, and all images on the page that require credit are represented
• All straight quotes have been replaced with curly quotes
• Em and En dashes have been used, instead of hyphens, where appropriate
• Headings do not end with full stops
• Brand names are correctly capitalised – eg: “YouTube”
• Consistent capitalisation for headings, buttons, and statistics (almost always sentence case)

[zarino]

Generally looks good. I’ve added a commit that fixes what appeared to be a missing Bootstrap submodule. You might need/want to run git submodule update --init --recursive after you pull that latest change.

I’ve also added a checklist to the top comment in this PR thread, for things we should check before merging. We should probably hold off on those until all the final text and images are in place.

In the meantime, some thoughts from my first reading of the page:

• The text over the mySociety circles in #intro feel harder to read than it has in previous years – I think because there’s more text, in a smaller point size. I wonder whether maybe it’d be worth replacing this with something inspired by the new Mailchimp header you designed this year. We already have the pale cream background below, could just start the page in cream, and have the semi-transparent logo to the side.
• The two different body font sizes in the "Can you support our work?" section (<p></p> and <p><big></big></p>) looked odd to me. My instinct would be to remove the <big> tags, and instead use a <strong> around the one or two key phrases in the section, like <strong>more important than ever</strong> and <strong>please make a donation</strong>.
• The very thin white lines around the team photos look odd to me. I’d either make them really thick so they look deliberate, or remove them entirely. My instinct would probably be to remove them.
• The 0.05em letter spacing on h6, .h6, which we’re using for the team members’ names, looks nasty to me. In-browser letter spacing is always crap, unless you’re doing something like ultra-light all caps Helvetica. I’d remove it, and probably replace the h6 classes with h5, wherever they appear on the page.
• It feels odd that there’s so much vertical space between "About our trustees" and "Incoming", compared to the (more natural) vertical space between "Volunteers" and "Four new additions…".
• I’d be tempted to try and standardise the height / aspect ratio of the images in the "Here's how that looked" Transparency section. Right now it feels weird that the "Improving oversight" report cover is so tall, when the text next to it is so short and the images below it are also so short.
• Bit weird that the "stacked" screenshots in the "Access to Information in Europe" Transparency section just abruptly cut off at the bottom, but not around the other sides. But I guess I could live with it.
• The white box around the "Grateful recognition" paragraph in the Transparency section looks a bit plonky to me. The white backgrounds work for the cards because they’re fairly narrow, but when it’s just one massive white box with a single paragraph in it, full width, it feels lazy.
• In the TICTeC section, I’d maybe put the paragraph that’s currently below the "A pipeline from discussion to solutions" heading, beside it instead, so there’s less empty whitespace above those civic tech surgery "cards".
• Speaking of which, I’m not convinced by the custom "card" styling for those civic tech events. I’m trying to work out why. I think maybe it‘s that the videos are so large and all the text is so small in comparison, or that the "Watch event on youtube" (incorrect capitalisation for YouTube!) button means there’s lots of awkward space below the text on the other side. Maybe I’d try a more traditional 2x3 card "grid" here, with the videos as image toppers for the cards? Not sure whether we even need the fancy click-to-play-in-page embedded videos here – who’s going to watch such a long video at such a small size? The blue buttons also feel weird in a purple section.
• After scrolling through the entire document, I’m still not sure what I feel about the thick cream diagonal lines between all the sections. Feels more distracting, to me, than just transitioning straight from one colour to the other?

[zarino]

@MyfanwyNixon is there a better summary we use these days?