[CHANGE] New design of the homepage

[shawnthompson]

What page is the change request for? Please supply the URI.

No response

Approval needed?

None

Yes, please send a request to the following person?

No response

Who shall do the work?

• [ ] I will do it, I want to contribute
• [ ] I am asking for someone else to please do the work

Timeline

No response

Additional context

@emmatseng-ux, @oyinR

Could we put the changes needed for the homepage in this issue so we can keep track of it and assign it to someone?

Thanks

[emmatseng-ux]

Hi Shawn, we'll leave the assigning of the project to you/Julie!

As for the changes needed for the homepage redesign, the items can be found in our figma file in the frame "Final homepage layout".

Let us know if there's anything else you need and we can connect more during the call @oyinR set up for us :)

[shawnthompson]

Can we have the new text translated in French?

@JulieBB23 @emmatseng-ux @oyinR

[emmatseng-ux]

Hey Shawn, which specific text are you looking for the FR translations for?

[shawnthompson]

@emmatseng-ux, sorry I'm talking about the text in your Sigma file that we don't already have in the documents on GCXchange.

• Welcome to the Digital Accessibility Toolkit. We offer a variety of learning materials and resources to help you learn and implement accessibility in your digital projects.
• Explore your toolkit
• What's new
• About the Digital Accessibility Toolkit

Thanks!

[shawnthompson]

For the background colour and transparency of the page title, what is the actual colour and I would prefer making it solid to make it as accessible as possible for everyone.

I've also made the box 75% of the container / wide of the inside page.

@duboisp @delisma, are you also ok with this?

[shawnthompson]

Also is this layout (h1 and description) just on the homepage or do we want it on all the other pages?

[JulieBB23]

Also is this layout (h1 and description) just on the homepage or do we want it on all the other pages?

I would say same on every page.

[JulieBB23]

For the background colour and transparency of the page title, what is the actual colour and I would prefer making it solid to make it as accessible as possible for everyone.

I've also made the box 75% of the container / wide of the inside page.

@duboisp @delisma, are you also ok with this?

Yes good with me to make it a little wider and darker.

[JulieBB23]

@emmatseng-ux, sorry I'm talking about the text in your Sigma file that we don't already have in the documents on GCXchange.

• Welcome to the Digital Accessibility Toolkit. We offer a variety of learning materials and resources to help you learn and implement accessibility in your digital projects.
• Explore your toolkit
• What's new
• About the Digital Accessibility Toolkit

Thanks!

Here the translation:

• Bienvenue dans la boîte à outils sur l'accessibilité numérique. Nous offrons une variété de ressources et matériels d'apprentissage pour vous aider à apprendre et à mettre en œuvre l'accessibilité dans vos projets numériques.
• Explorez votre boîte à outils
• Quoi de neuf
• À propos de la boîte à outils sur l'accessibilité numérique

[duboisp]

Back then in 2019, I created a new component to manage that box. It is called "well header responsive" (code name: header-rwd) and here the example/documentation currently available: https://wet-boew.github.io/GCWeb/components/header-rwd/well-header-rwd-en.html

I do recommend to use the "Well header responsive" component which is already available instead of writing custom CSS code.

Regarding to use that design pattern for a main landing page, my impression is that pattern is kind of reserved for the Canada.ca homepage and not currently intended to be used by other pages, exception of campaign pages.

[emmatseng-ux]

Thank you @JulieBB23 for the translations!

@shawnthompson Regarding the colour of the background, totally okay to keep it the same colour but opaque.

@duboisp We walked the DTO team through these designs in the Figma file to check if we have correctly integrated all the mandatory elements on the page. The "well header responsive" section was one component they requested us to keep, specifying in particular that we have flexibility over the background image under the box, size and colour of the box, but the line should be red to match the Canada.ca design system.

[shawnthompson]

@emmatseng-ux what is the colour value? I'm using #31393A.

[emmatseng-ux]

Let's go with your colour value @shawnthompson :)

[shawnthompson]

@JulieBB23 Can we close this and create a new issue if anything was missing after launch?

[JulieBB23]

closing this and we will create a new issue if anything is missing