thunderbird
Update branding
Mozilla logo and branding was updated. We'll need to update the logo on our websites. It should take up about the same amount of space as the current logo. (Unlike how it is on mozilla.org.) It should also affect all pages including donation appeals (which should be automatic if you catch all the references.)
Might have to adjust the svg to allow fill by currentColor.
The wwwmo footer is not a great example but generally MZP has it about right for inspiration: https://protocol.mozilla.org/components/detail/footer
It should take up about the same amount of space as the current logo.
So the current logo has usually max-width 200px that it never exceeds given its viewbox around 120px and using just the intrinsic dimensions. Whereas the rebrand is larger, it would make use of the 200px width limit, meaning optically there would be not just increase from ~120px box to 200px box as defined in styles currently, but also the accompanying height change given the taller aspect ratio:
@MelissaAutumn LMK if this is acceptable, or:
- you'd like to redefine the width to more match the current effective size,
- and/or also tweak the spacing vertically, to adapt to the new geometry and new implicit whitespace in the actual logotype, to bring the length of the footer closer back to the current height.
(my expectation is "yes" to both, just checking)
Heya! Thanks for the quick change. That looks fine, the logo I selected was in Mozilla's internal (I think it's live publically now?) branding guide. I was not aware of Mozilla Protocol, but we generally have our own branding guidelines.
I'll ping @laurelterlesky but I guess we'll end up with the dinosaur mozilla logo instead of just their wordmark.
But to save you some time if you'd like to follow through with this change: We already have this change in updates.thunderbird.net as a flag to enable per appeal. (So we don't accidentally break anything.) https://github.com/thunderbird/thunderbird-website/blob/master/sites/updates.thunderbird.net/includes/base/footer.html
Visible here: https://updates.thunderbird.net/thunderbird/128.0/apr25/
👋 Howdy. Sure, I've noticed the switch there, no worries;) cleaning that up in #824/files — that draft is currently what you see above, though I'd like to tweak it a bit (see below…)
The reason I refer to the Protocol component for inspiration is to skip potential bikeshedding about correct logo style to pick etc. when they already had the conversations (and this would be the style for firefox.com footer at some point) so that this wouldn't have to seek too much approvals;) — also pulled the SVG asset straight from protocol-assets as that's what MoCo consumers get to use 1:1 (think FxA, AMO, SuMo, Monitor, IAM etc.) so it has all the rubber stamps to be the correct precision to be used in prod.
I do realize there's not much guidance how to use the new brand, but most of the org footers seem to prefer the lockup, so I went with that one for consistency.
(EDIT: Oh you mean https://brand.mozilla.com/? No, that's only behind LDAP SSO still, but luckily the assets are published in https://github.com/mozilla/protocol-assets/issues/100 so I'm using what any MZP consumers would be getting implicitly.)
I however don't exactly like the result, mostly regarding spacing — as there's some whitespace implicitly part of the logo, it feels like the top margins could be made tighter (and in some cases in favor of adding a little more bottom margins), so I've published the draft PR for anyone to testdrive locally — to see how they feel about the simple swap now.
I'd make the logo a little smaller, and would make the footer shorter vertically by removing some of the margin above the logo.
Then, when you mention the appeal, there are a few sizing customizations here and there. This one looks quite alright:
but I'd still make it a little bigger, and also use the space above & below a bit more balanced. (Basically try to bring the sizing of the different footers more close to each other.)
Then there's the whatsnew where I'd make it also a little bigger, and would also make the margins more consistent with what's elsewhere, as this one's too close to the footer links IMO:
Anyway the PR should "work" in its current state, even though I'd like to add some more optical tweaks TBH, so whenever you'd like to see it land feel free, and I'd follow up with the tweaks separately, or if I find a good balance soon, I'll post an update to check whether you'd be happy with the tweaks.
Let's follow what's in the footer at https://blog.mozilla.org/en/. The new logo absolutely needs to be left aligned.
What's currently at on the Firefox marketing page is a bit of a monolith. I've been recommended steer towards the version on the blog site.
@MelissaAutumn can you tweak to align?
Interestingly the up and coming Firefox site (can be previewed on staging here) doesn't even have any Mozilla logo in its footer… 😲
FYI the blog template is now rather outdated (not using the current brand standards), and also unfortunately unmaintained since one of the reorgs, so it isn't likely to even get fixes to the broken layout now with the new type and scale applied to it, as it was tailored to the style of yesteryear and the current updates make it buggy even in Gecko… 😇 🤷
Anyways the issue replicating any left-aligned layout though is… where exactly is "left" here? All the pages are centered, have the links centered, have the product logo centered:
and the same exhibits itself in the older screenshots above where the chevron separator also points to some symmetry.
That sounds like rethinking the whole layout, or at least reshuffling all the footer instances… which sounds like a separate issue to just updating the org brand, with some additional discussion to draft how to best tackle that.
I touched base with folks in Protocol (who are responsible for the Mozilla footer) and Firefox, what I posted above was what they recommend we do atm with the Mozilla sections. No need to think beyond that at. We can left align our Thunderbird logo as well - which would be better anyhow.
Yes, that's me, too — hence why I posted the Protocol component for comparison;) The site is nonetheless not compatible with it currently. I can help tweak the brand fit in #824, but won't be able to support any footer rewrite along the way.
The current layout puts the logo "furthermost" left here:
Anything smarter means rethinking and redesigning the sections; or perhaps removing most of the layout to just left-align all the containers, without justification, grids etc., this could be viable:
(give or take some padding) — but I'd ideally tackle that separately from just adjusting the asset now — as there are impacts that will need addressing in that change as can be seen from the image above.
Just a heads up we've switched to the new mozilla logo for updates.thunderbird.net (the slim updates footer.) I feel like we could remove the padding on the Thunderbird nav list, left align everything and limit the page language width to like 10rem.
https://updates.thunderbird.net/en-US/thunderbird/140.0/whatsnew/#footer
cc @laurelterlesky for confirmation
Yup, I'm following the related changes to rebase the draft accordingly.
(BTW the above was just a rough mockup what happens when the layout is taken away; I haven't actually resolved any of the wrinkles that arise from that. Just to demonstrate how it would feel if everything's just left aligned before diving into it more.)
Thanks! I think we'll be fine if we just left align everything but I'll await Laurels feedback for the TB part of the footer.