Skip to content

Commit e4d1e90

Browse files
tombyetombye
committed
Replace VML logo with image and text
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
1 parent 6e0c07e commit e4d1e90

File tree

1 file changed

+32
-98
lines changed

1 file changed

+32
-98
lines changed

‎notifications_utils/jinja_templates/email_template.jinja2‎

Lines changed: 32 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
{% if rebrand %}
2-
{% set govuk_bg_colour = "#1d70b8" %}
3-
{% else %}
4-
{% set govuk_bg_colour = "#0b0c0c" %}
5-
{% endif %}
61
{% if complete_html %}
72
<!DOCTYPE html>
8-
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
3+
<html lang="en">
94

105
<head>
116
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -51,7 +46,7 @@
5146
{% if govuk_banner %}
5247
<table role="presentation" width="100%" style="border-collapse: collapse;min-width: 100%;width: 100% !important;" cellpadding="0" cellspacing="0" border="0">
5348
<tr>
54-
<td width="100%" height="{% if rebrand %}60{% else %}53{% endif %}" bgcolor="{{ govuk_bg_colour }}" class="brand__banner">
49+
<td width="100%" height="{% if rebrand %}60{% else %}53{% endif %}" bgcolor="{% if rebrand %}#1d70b8{% else %}#0b0c0c{% endif %}" class="brand__banner">
5550
<!--[if (gte mso 9)|(IE)]>
5651
<table role="presentation" width="580" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;width: 580px;">
5752
<tr>
@@ -60,97 +55,35 @@
6055
<table role="presentation" width="100%" style="border-collapse: collapse;max-width: 580px;" cellpadding="0" cellspacing="0" border="0" align="center">
6156
<tr>
6257
{% if rebrand %}
63-
<!--[if vml]>
64-
<td align="left" valign="middle" style="padding-left:10px">
65-
<a href="https://www.gov.uk" title="Go to the GOV.UK homepage" style="text-decoration: none;">
66-
<span>GOV.UK</span>
67-
<v:group id="svg-content" coordsize="324,60" style="width:162;height:30;position:absolute;top:-8;left:0">
68-
69-
{# backplate for VML shapes that make up the GOV.UK text #}
70-
<v:rect style="width:344;height:80;position:absolute;top:-10;left:-10" fillcolor="#1d70b8" stroked="f"></v:rect>
71-
72-
{# group containing shapes that make up the crown #}
73-
<v:group coordsize="324,60" style="position:absolute;width:324;height:60">
74-
75-
<v:shape filled="true" stroked="f" coordsize="32400,6000"
76-
style="position:relative;top:0;left:0;width:324;height:60"
77-
path="m2000,1390at1630,1390,2370,2130,2000,1390,2000,1390e"></v:shape>
78-
79-
<v:shape filled="true" fillcolor="#ffffff" stroked="f" coordsize="32400,6000"
80-
style="position:relative;top:0;left:0;width:324;height:60"
81-
path="m1019,1980at649,1980,1389,2720,1019,1980,1019,1980e"></v:shape>
82-
83-
<v:shape filled="true" fillcolor="#ffffff" stroked="f" coordsize="32400,6000"
84-
style="position:relative;top:0;left:0;width:324;height:60"
85-
path="m370,2950at0,2950,740,3690,370,2950,370,2950e"></v:shape>
86-
87-
<v:shape filled="true" fillcolor="#ffffff" stroked="f" coordsize="32400,6000"
88-
style="position:relative;top:0;left:0;width:324;height:60"
89-
path="m3170,2690at2800,2690,3540,3430,3170,2690,3170,2690e"></v:shape>
90-
91-
<v:shape filled="true" fillcolor="#ffffff" stroked="f" coordsize="32400,6000"
92-
style="position:relative;top:0;left:0;width:324;height:60"
93-
path="m4330,1390at3960,1390,4700,2130,4330,1390,4330,1390e"></v:shape>
94-
95-
<v:shape filled="true" fillcolor="#ffffff" stroked="f" coordsize="32400,6000"
96-
style="position:relative;top:0;left:0;width:324;height:60"
97-
path="m5320,1980at4950,1980,5690,2720,5320,1980,5320,1980e"></v:shape>
98-
99-
<v:shape filled="true" fillcolor="#ffffff" stroked="f" coordsize="32400,6000"
100-
style="position:relative;top:0;left:0;width:324;height:60"
101-
path="m5970,2950at5600,2950,6340,3690,5970,2950,5970,2950e"></v:shape>
102-
103-
<v:shape filled="true" fillcolor="#ffffff" stroked="f" coordsize="32400,6000"
104-
style="position:relative;top:0;left:0;width:324;height:60"
105-
path="m3170,2690at2800,2690,3540,3430,3170,2690,3170,2690e"></v:shape>
106-
107-
<v:shape filled="true" fillcolor="#ffffff" stroked="f" coordsize="32400,6000"
108-
style="position:relative;top:0;left:0;width:324;height:60"
109-
path="m3310,980v20-10,30-30,50-50l3819,1170l3819,490l3359,640v-10-20-30-30-50-50l3499,0l2829,0l3019,590v-20,10-30,30-50,50l2509,490l2509,
110-
1170l2968,930v10,20,30,30,50,50l2758,1780v-90,280,120,570,409,570l3167,2350v300,0,509-290,409-570l3316,980xm3700,3790v0,0-340,380-410,
111-
610v220,0,420-50,640-280l3860,4970v-200-280-441-410-570-380,10,310,50,670,580,720,370,30,670-150,700-380,40-260-200-430-370-160-140-450,
112-
240-610,490-320-190-450-180-770,240-1090,300,400,260,730-120,1110,240-130,620,0,400,459-120-280-370-221-420,20-30,170,70,370,300,
113-
420,190,30,470-90,700-590-130,0-240,70-390,170l5640,4149v60,229,140,370,220,450,60-160,50-280,0-530l6360,4249v-260,360-520,869-730,
114-
1750-740-111-1570-170-2450-170l3180,5829v-881,0-1711,60-2450,170-210-890-470-1390-730-1750l500,4069v-50,250-60,370,0,530,80-80,160-230,
115-
220-450l960,4949v-150-100-260-170-390-170,229,500,520,620,700,590,229-40,330-240,300-420-50-240-300-310-420-20-221-460,160-600,400-460-370-370-420-710-120-1110,
116-
420,320,430,640,240,1090,250-280,630-130,490,320-180-270-410-100-370,160,30,229,330,409,700,380,540-50,570-420,580-720-130-20-370,
117-
100-570,380l2430,4119v220,229,420,270,640,280-70-230-410-610-410-610l3720,3789,3720,3789xe">
118-
</v:shape>
119-
120-
</v:group>
121-
122-
{# the dot between GOV and UK #}
123-
<v:shape filled="t" fillcolor="#00ffe0" stroked="f" coordsize="32400,6000"
124-
style="position:relative;top:0;left:0;width:324;height:60"
125-
path="m22700,2870at21970,2870,23430,4330,22700,2870,22700,2870e"></v:shape>
126-
127-
{# shape making up the GOV UK, without the dot #}
128-
<v:shape filled="t" fillcolor="#ffffff" stroked="f" coordsize="32400,6000"
129-
style="position:relative;top:0;left:0;width:324;height:60"
130-
path="m9470,3610v0,190,20,360,70,540,50,170,120,320,210,450,90,130,220,240,360,320,150,80,320,120,530,120v210,0,360-30,490-90v130-60,229-140,
131-
310-230,80-90,130-200,160-300,30-111,50-210,50-300l11650,4080l10550,4080l10550,3420l12500,3420l12500,5820l11730,5820l11730,5280v-50,
132-
80-120,160-200,229-80,70-170,130-270,180-100,50-210,90-330,120-120,30-250,40-380,40-320,0-600-60-840-170-250-111-450-270-620-470-170-200-300-441-380-710-90-270-130-560-130-870v0-310,
133-
50-600,150-870,100-270,240-510,420-710v180-200,400-360,650-470v250-110,540-170,860-170,320,0,400,20,590,70v180,50,350,110,509,200,
134-
150,90,290,190,400,320,120,120,210,260,280,409l11669,2838v-50-90-100-180-160-260-60-80-130-150-221-210-80-60-170-100-280-140-100-30-221-50-350-50-200,
135-
0-380,40-530,120v-150,80-270,190-360,320v-90,130-170,280-210,459v-40,179-70,350-70,530l9488,3637l9488,3637xm15290,1370v320,0,610,
136-
60,869,170,260,120,470,270,650,470,180,200,310,440,409,710v99,270,140,560,140,869,0,309-50,600-140,869v-90,270-230,509-410,710v-180,
137-
201-400,360-650,470v-260,110-550,170-870,170v-320,0-610-60-870-170v-260-111-470-270-650-470-180-200-310-441-410-710-90-270-140-560-140-870v0-310,
138-
50-600,140-870,90-270,229-510,409-710v180-200,400-360,650-470v250-110,540-170,869-170l15286,1368xm15290,5040v190,0,360-40,500-111,
139-
140-70,270-170,360-300,100-130,170-280,220-450,50-170,80-360,80-570l16450,3589v0-200-30-390-80-570-50-170-130-330-221-450-100-130-221-230-360-300-140-70-310-111-500-111v-190,
140-
0-360,40-500,110v-150,70-270,170-360,300v-90,130-170,280-221,450v-50,170-80,360-80,570l14128,3608v0,210,30,400,80,570,50,170,120,
141-
320,220,450,100,130,220,229,360,300,150,70,310,110,500,110xm18910,5800l17680,1400l18660,1400l19500,4690l19530,4690l20349,1400l21318,
142-
1400l20088,5800m26289,5040v130,0,250-20,360-60,110-40,200-90,280-170,80-80,140-170,190-290,50-120,70-250,70-410l27189,1400l28049,
143-
1400l28049,4250v0,240-40,459-130,660-90,200-210,360-370,500-160,140-340,240-560,320-221,70-450,110-710,110v-260,0-491-40-710-111v-221-70-400-180-560-320v-160-140-280-300-370-500v-90-200-130-410-130-660l24509,
144-
1400l25378,1400l25378,4120v0,160,20,290,70,409,50,120,110,210,190,290,80,80,170,130,280,170v110,40,229,60,360,60l26278,5049xm28850,
145-
1400l29719,1400l29719,3310l31269,1399l32349,1399l30839,3159,32449,5799l31429,5799l30279,3829,29719,4459l29719,5809l28849,5809e">
146-
</v:shape>
147-
148-
</v:group>
58+
<!--[if mso]>
59+
<td width="70" valign="middle">
60+
<a href="https://www.gov.uk" title="Go to the GOV.UK homepage" style="text-decoration: none;">
61+
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
62+
<tr>
63+
<td style="padding-left: 10px">
64+
<img src="https://static.notifications.service.gov.uk/images/govuk-logotype-tudor-crown.png" alt="" height="32" border="0" style="Margin-top: 2px;">
65+
</td>
66+
<td style="font-size: 28px; line-height: 1.315789474; padding-left: 8px; padding-bottom: 8px">
67+
<span style="
68+
font-family: Helvetica, Arial, sans-serif;
69+
font-weight: 700;
70+
color: #ffffff;
71+
text-decoration: none;
72+
vertical-align:middle;
73+
display: inline-block"
74+
>GOV<span style="
75+
color: #00ffe0;
76+
font-family: Georgia, Times New Roman, sans-serif;
77+
font-size: 32px;
78+
mso-text-raise:7px">.</span>UK</span>
79+
</td>
80+
</tr>
81+
</table>
14982
</a>
15083
</td>
15184
<![endif]-->
15285
<!--[if !mso]><!-->
153-
<td width="70" bgcolor="{{ govuk_bg_colour }}" valign="bottom">
86+
<td width="70" valign="bottom">
15487
<a href="https://www.gov.uk" title="Go to the GOV.UK homepage" style="text-decoration: none;color: #fff">
15588
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
15689
<tr>
@@ -161,10 +94,11 @@
16194
height="32"
16295
border="0"
16396
style="Margin-top: 2px; max-height: 32px"
97+
aria-hidden="true"
16498
>
16599
</td>
166100
<td style="font-size: 28px; line-height: 2.1428571429; padding-left: 8px;" valign="bottom" height="60" class="logo__text">
167-
<span style="
101+
<span aria-label="GOV.UK" style="
168102
font-family: Helvetica, Arial, 'Noto Sans', sans-serif;
169103
font-weight: 700;
170104
text-decoration: none;
@@ -176,8 +110,8 @@
176110
display: inline-block;
177111
text-indent: 0.04em;
178112
font-size: 32px;
179-
line-height: 1.3;
180-
vertical-align: top;
113+
line-height: 1.35;
114+
vertical-align: top;
181115
margin-right: 0.05em;" class="logo__dot">.</span>UK</span>
182116
</td>
183117
</tr>
@@ -186,7 +120,7 @@
186120
</td>
187121
<!--<![endif]-->
188122
{% else %}
189-
<td width="70" bgcolor="{{ govuk_bg_colour }}" valign="middle">
123+
<td width="70" valign="middle">
190124
<a href="https://www.gov.uk" title="Go to the GOV.UK homepage" style="text-decoration: none">
191125
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
192126
<tr>

0 commit comments

Comments
 (0)