Update GOVUK logo to new brand (behind a flag) #1243
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Mainly copies the existing approach while changing the colours but also: - adjusts the banner height to match the web version - makes the hovering cyan dot by using font families with a circular period character - juggles around the vertical positioning to roughly match the web version, which is kind of aligned to the baseline rather than the middle - removes the table used to render the border at the bottom of the banner This also sets a max-height for the crown image to fix an issue on Outlook on Android where the image scaled to its true size rather than that set in CSS.
Tests with a crown image and real text didn't work due to Outlook not wanting to allow more space around the dot or change its vertical position without affecting the line height in bad ways. VML was chosen to copy the approach the design system team took for the web version of the logo, rewriting it completely in SVG. Support for SVG is bad across all email clients but VML support in Outlook is good and we were able to convert the SVG from the web version to VML with this convertor tool: https://stylecampaign.com/vml/ That still required the following changes post conversion: - all shapes given a white fill - boolean values set to a single letter ('f' from 'false') - width and height on the top-level group changed halved (324 to 162, 60 to 30) - the 'GOV.UK' text added before the VML - a <v:rect> shape added with fill matching the banner, to cover up the 'GOV.UK' text - the top-level group moved up 8px via 'top:-8' - the tables and their cells used to position the logo and text in the <a> tag removed - the banner height changed from 53px to 60px to match the web version - padding-left added to the cell containing the <a>
The approach of using VML overlapping real 'GOV.UK' text has a problem if you're navigating using tabbing, or for a moment when you click on the logo. When this happens, Outlook inverts the VML but leaves a gap in this where the text sits. I can't find a way to prevent this and it looks broken. So, after designing a version of the logo in MS Word and using some of the CSS applied in the HTML when you export to HTML, I found we can have a variant of the version we use for other email clients, where the dot is in a font with a circular period. This needs to be different enough in Outlook, because it doesn't support display: inline-block and needs the custom mso-text-raise CSS property to position the dot in the middle of the line, and padding on the parent cells to align with the crown image. I also made the following changes in this commit: - the govuk_bg_colour variable was removed due to only being used once now - stop setting background colour on central cells in banner as unnecessary and losing them helps print styles remove the banner colour - tweak to line-height of dot, to get better overall position among popular email clients - aria-label=GOV.UK added to span containing 'GOV.UK' text to help Voiceover determine an accessible name for that part of the banner
|
kr8n3r
approved these changes
Jun 3, 2025
Brings new GOV.UK brand into email template, behind a flag.
kr8n3r
approved these changes
Jun 3, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds the ability to turn on the new GOV.UK branding in emails we send with the GOV.UK branding1
https://trello.com/c/tqglnJkB/1285-update-email-template-with-rebranded-govuk-logo
Notes for reviewers
Reviewers should try sending an email with the
rebrandkeyword arg set toTrueandFalsein the API code (see this branch on API). They should also check the email previews you can see when you change email branding in settings on Admin (see this branch on Admin). Please check the version of utils with these changes works:rebrandarg, set to False, in API and Admin (should change nothing)rebrandarg, set to True, in API and Admin (should change to the new GOV.UK brand)Please also read each commit and focus on the logic of the coding changes rather than checking specific rendering differences between email clients or how it is with assistive tech. A lot of work has already been done on those (see comments on the trello card and these visual testing results). You can if you want of course :)
Footnotes
this will also affect emails with a GOV.UK + department logo branding (see https://github.com/alphagov/notifications-manuals/wiki/Email-template-documentation for details ↩