Review web banner

[ChloeCheeseman86]

Sharing for review by @aaaaargZombies - are you you happy that these are possible to implement as the new website header [full UI design pending]? If not please feed back any needed changes in dimensions/approach. I wasn't sure if you'd need a PNG ideally..

If you agree, underneath the banner I'd prefer to keep the H1 for the page with the text Breathe Easy Sheffield, but make this text much smaller eg pt 26

[aaaaargZombies]

are you you happy that these are possible to implement as the new website header [full UI design pending]? If not please feed back any needed changes in dimensions/approach. I wasn't sure if you'd need a PNG ideally.

Depends on the dimensions that they will sit at for final UI. Also if you wanted to use the 1st image as social preview it's a bit small 1200x630px is recommended.

PNG is preferable to JPG for things with logos / text. We could also use an SVG in the page which would remove questions of resolution but is not suitable for social preview. (no reason we can't have multiple file types for different roles though)

If you agree, underneath the banner I'd prefer to keep the H1 for the page with the text Breathe Easy Sheffield, but make this text much smaller eg pt 26

Making the font smaller is of course fine but pt is for print. I made a font scale that I linked in the assets issue but you can view it here, basically pick a step from the list. It's fine for the designer to rework this scale but for maintainability long term it's good to reduce the proliferation of magic numbers. We also depend on this scale for displaying different font sizes to different sized viewports.

If you are wanting to keep the h1 for screen readers instead of having an image it's possible to visually hide the text and present the correct content depending on the user. Either choice is fine and but that won't be an option on pages where the main title won't make sense to match the org name, so that may effect design decisions.

[aaaaargZombies]

I forgot to add, would you prefer the text color in the logo to match the text color in the website? Could swap either or neither if you / designer are happy

[ChloeCheeseman86]

PNG is preferable to JPG for things with logos / text. We could also use an SVG in the page which would remove questions of resolution but is not suitable for social preview. (no reason we can't have multiple file types for different roles though)

Have requested PNG and SVG

Depends on the dimensions that they will sit at for final UI. Also if you wanted to use the 1st image as social preview it's a bit small 1200x630px is recommended.

I fear that we will not have the UI for some time so for the sake of having a matching logo across all our platforms, on the home page I want to get the banner(s) up at your earliest convenience - I have requested a version for social preview at the resolution you specified, thanks for the reminder on this I had completely forgotten.

basically pick a step from the list

Very clever! Font scale step 2 please for the title Breathe Easy Sheffield - presuming scale step 0 is body text size.

If you are wanting to keep the h1 for screen readers instead of having an image it's possible to visually hide the text and present the correct content depending on the user.

Ah yes good point. I think let's keep the H1 visible for all users for this page as Breathe Easy Sheffield.

I forgot to add, would you prefer the text color in the logo to match the text color in the website? Could swap either or neither if you / designer are happy

Happy to keep them as they are :)

[ChloeCheeseman86]

this is basically blocked pending assets from Kim - but I can't seem to change the status of the issue to reflect that.

[aaaaargZombies]

I'll add it, it's done via the "labels" which are free form but lot's of people use them for status.