From cc749c260744a8f965e5f2e70b5b03913716f45d Mon Sep 17 00:00:00 2001 From: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> Date: Wed, 24 Apr 2024 10:03:19 +0100 Subject: [PATCH 1/6] Create page-titles.html Signed-off-by: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> --- app/views/design-system/page-titles/page-titles.html | 1 + 1 file changed, 1 insertion(+) create mode 100644 app/views/design-system/page-titles/page-titles.html diff --git a/app/views/design-system/page-titles/page-titles.html b/app/views/design-system/page-titles/page-titles.html new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/app/views/design-system/page-titles/page-titles.html @@ -0,0 +1 @@ + From 5a8a5697265e6375783c785193cda67c2e74493c Mon Sep 17 00:00:00 2001 From: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> Date: Wed, 24 Apr 2024 10:04:28 +0100 Subject: [PATCH 2/6] Update page-titles.html Signed-off-by: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> --- .../page-titles/page-titles.html | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/app/views/design-system/page-titles/page-titles.html b/app/views/design-system/page-titles/page-titles.html index 8b137891..d5a0c92f 100644 --- a/app/views/design-system/page-titles/page-titles.html +++ b/app/views/design-system/page-titles/page-titles.html @@ -1 +1,36 @@ +# Page titles +The attribute defines the page title shown in the browser tab. For example: + +`Your applications – Apply to become an academy – GOV.UK` + +![Browser tab title, example.png](/.attachments/Browser%20tab%20title,%20example-3beec0c3-6219-40bc-a4c0-58944141c6d3.png) + +When writing page titles, you should: + +- make sure they’re similar to the H1, although they can be a bit different if needed +- use the H1 and section names of the product (if applicable) to create a logical, consistent naming structure +- put the name of the product at the end so it's easier to read in browser tabs +- make them unique + +## Making titles unique + +Titles need to be unique because they tell people what page they're on. If the title is the same, people can think they have read the page before or answered a question before. + +It's particularly important to people who use assistive technology and may have access needs, which make it harder to find where they are. For example, magnification and seeing less of the screen area at once could mean users see only a few words of the title. + +It's about helping users easily identify where they are, and if that’s where they should be. + +Read [writing titles – GOV.UK content design](https://www.gov.uk/guidance/content-design/writing-for-gov-uk#make-your-title-unique). + +## education gov domains + +If your product has an education.gov.uk domain, you don’t need to include GOV.UK at the end of your titles. + +For example, a page called Statistics on complete.education.gov.uk might have one of the below titles, depending on the product’s content hierarchy: + +`Statistics – Complete conversions, transfers and changes` + +`Statistics – All projects - Complete conversions, transfers and changes` + +![Statistics page - Complete conversions, transfers and changes.png](/.attachments/Statistics%20page%20-%20Complete%20conversions,%20transfers%20and%20changes-08e6cc6e-a0bf-45de-9a35-37c5618d17a6.png) From 637409e4d2ccc2feb583009ce874e9b3fa901080 Mon Sep 17 00:00:00 2001 From: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> Date: Wed, 24 Apr 2024 10:11:23 +0100 Subject: [PATCH 3/6] Update page-titles.html Signed-off-by: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> --- app/views/design-system/page-titles/page-titles.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/design-system/page-titles/page-titles.html b/app/views/design-system/page-titles/page-titles.html index d5a0c92f..cdf3c235 100644 --- a/app/views/design-system/page-titles/page-titles.html +++ b/app/views/design-system/page-titles/page-titles.html @@ -1,4 +1,4 @@ -# Page titles +# Writing page titles The <title> attribute defines the page title shown in the browser tab. For example: From dd8ea2c45e6bd3908e5c4ad500ed14a60aade5f2 Mon Sep 17 00:00:00 2001 From: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> Date: Wed, 24 Apr 2024 10:13:47 +0100 Subject: [PATCH 4/6] Update _side-nav.html Added page titles link to side nav Signed-off-by: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> --- app/views/includes/_side-nav.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/views/includes/_side-nav.html b/app/views/includes/_side-nav.html index 8772ae21..6ee6791c 100644 --- a/app/views/includes/_side-nav.html +++ b/app/views/includes/_side-nav.html @@ -23,6 +23,10 @@ url: "/design-system/publishing-content-on-govuk/" } ,{ +title: "Writing page titles", +url: "/design-system/page-titles" +}, +{ title: "Reviewing and checking content", url: "/design-system/reviewing-and-checking-content" } @@ -652,4 +656,4 @@ <h2 class="dfe-vertical-nav--section-header">Audits and assurance</h2> {% endif %} -</nav> \ No newline at end of file +</nav> From 1e4539d65a5419cc26d326593e65ac8996068cde Mon Sep 17 00:00:00 2001 From: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> Date: Wed, 24 Apr 2024 10:19:14 +0100 Subject: [PATCH 5/6] Update page-titles.html Reviewed and updated the copy. Signed-off-by: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> --- app/views/design-system/page-titles/page-titles.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/design-system/page-titles/page-titles.html b/app/views/design-system/page-titles/page-titles.html index cdf3c235..6d0580ad 100644 --- a/app/views/design-system/page-titles/page-titles.html +++ b/app/views/design-system/page-titles/page-titles.html @@ -2,15 +2,15 @@ The <title> attribute defines the page title shown in the browser tab. For example: -`Your applications – Apply to become an academy – GOV.UK` +>Your applications – Apply to become an academy – GOV.UK ![Browser tab title, example.png](/.attachments/Browser%20tab%20title,%20example-3beec0c3-6219-40bc-a4c0-58944141c6d3.png) When writing page titles, you should: -- make sure they’re similar to the H1, although they can be a bit different if needed +- make sure they’re similar to the H1, although they can be different if needed - use the H1 and section names of the product (if applicable) to create a logical, consistent naming structure -- put the name of the product at the end so it's easier to read in browser tabs +- put the name of the product at the end, so it's quicker for users to know what page they are on - make them unique ## Making titles unique @@ -23,7 +23,7 @@ Read [writing titles – GOV.UK content design](https://www.gov.uk/guidance/content-design/writing-for-gov-uk#make-your-title-unique). -## education gov domains +## education.gov.uk domains If your product has an education.gov.uk domain, you don’t need to include GOV.UK at the end of your titles. From 33e9e60d8e2f861ebdfaa95f9d542d253a8f613c Mon Sep 17 00:00:00 2001 From: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> Date: Wed, 24 Apr 2024 10:20:28 +0100 Subject: [PATCH 6/6] Update page-titles.html Added code to Statistics page titles. Signed-off-by: adyhoran1 <97228674+adyhoran1@users.noreply.github.com> --- app/views/design-system/page-titles/page-titles.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/design-system/page-titles/page-titles.html b/app/views/design-system/page-titles/page-titles.html index 6d0580ad..718b2e4a 100644 --- a/app/views/design-system/page-titles/page-titles.html +++ b/app/views/design-system/page-titles/page-titles.html @@ -29,8 +29,8 @@ For example, a page called Statistics on complete.education.gov.uk might have one of the below titles, depending on the product’s content hierarchy: -`Statistics – Complete conversions, transfers and changes` +>Statistics – Complete conversions, transfers and changes -`Statistics – All projects - Complete conversions, transfers and changes` +>Statistics – All projects - Complete conversions, transfers and changes ![Statistics page - Complete conversions, transfers and changes.png](/.attachments/Statistics%20page%20-%20Complete%20conversions,%20transfers%20and%20changes-08e6cc6e-a0bf-45de-9a35-37c5618d17a6.png)