as all things here... not as easy as it appears.

In order to accomodate the desktop site, the wordmark and globe logo are structuraly seperated in the HTML (i.e. they don't have a common parent element that could be used to group and center them together). See screenshot.

The globe logo is positioned aboslutely so that it appears beside the wordmark. It's default DOM position is below the wordmark (default being desktop). Changing the markup to group the two together would require reworking the layout substantially, and it would probably lead to a lot of complications on desktop.

However, here's another idea...

Let's get rid of the globe logo on mobile all together
Rationale:

• The globe logo, at the small size it appears on mobile, looses much of its detail
• To acommodate rtl and ltr languages, the wordmark and subhead "the free encyclopedia" are centered. Having the logo to the left of the wordmark, even as it is now, seems ltr specific
• With the logo and subhead centered (for the reason mentioned above), putting the logo to either side introduces multiple alignments to the header: the logo and subhead are centered, the logo is left-algined, but then the whole unit is centered. Mixing alignments like this is visually inconsistent
• this would remove some CSS that's responsible for very small sizes, when the logo and wordmark collide.

So...

?

You can also have two logos and use media query with widths to determine which of the two is shown ?

@TheDJ that's true, we could use a seperate image that contains the logo + wordmark for mobile.
In that scenario however, we wouldn't be able to localize the "free encyclopedia" subheading, unless we create ~300 localized images (maybe an option?).
If we remove the subheading, that would actually bring the logo in line with recommended Wikipedia brand guidelines (see "horizontal version"), but I feel like then we would lose some of the multilinguage spirit of the page.

Changing the markup to group the two together would require reworking the layout substantially, and it would probably lead to a lot of complications on desktop.

That might have been an overreaction. The desktop version places the logo with "relative" positioning, and the mobile version uses "absolute" positioning. The desired change could be achieved by flipping this behaviour, having the logo use absolute positioning on desktop and relative positioning on mobile.

I'm working on a patch in this direction, and it's looking doable. After some investigation, using absolute positioning for the logo on desktop won't be as big a change as I assumed, since the top-ten links also use absolute positioning, so their layout will be un-effected.

Change 404438 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] Updating header for mobile

https://gerrit.wikimedia.org/r/404438

I came up with a solution that I think addresses the issue pretty well. The spacing matches the design, and the patch also accommodates RTL languages and long subheading ("free enclyclopedia") lengths.

design to patch diff (on iOS simulator)

Language variants

Testing on Android 2.3 & up (... and IE6, why not)

Per standup jan is working on this so let's track/support him!

Screenshots look good to me.

Thanks Jan, this was super fast :)

Post your change I'm seeing some strange behaviour in firefox, with hard refreshes - I see the text "Wikipedia logo" alt text and it's very large and there is a noticeable repaint! I don't see this before your change and there is definitely a reflow going on (in Chrome too) - seems to be font size related and is very distracting. Can we fix both those problems?

@Jdlrobson your right I noticed the firefox repaint - that must be their new rendering engine. It's probably because the logo image & alt text is in an H1. will fix.

Regarding @Jdlrobson's screenshot, I just went down a rabbit hole of Firefox FOUC. Here's what I found:

1. more visible on the dev build: I assumed there was a greater chance of seeing FOUC on the dev version since the CSS is served as external files. This seems to be true. I didn't seen the FOUC when I ran the production build on this patch. For production, we inline the CSS into the index.html, so that we avoid making an extra http request and the styles are loaded as fast as possible.
2. font-size issue: The FOUC in @Jdlrobson's screenshot was highly visible because the image with alt-text sits inside an <H1> which has big text by default. Since we can't depend on the stylesheet file to fix this, we can use an inline-style to set the font-size on the H1.
3. Autofocus on Firefox: More interestingly, I found T181877 - Firefox displays FOUC when an input with autofocus is present. Amazingly, removing the autofocus="autofocus" attribute from the search input (found in the search.handlebars template) fixes the FOUC on Firefox (with the dev build) completely.

That last bug is wild, but luckily, it doesn't effect us since we inline the styles in production, which seems to avoid the autofocus issue. So, I think changing the font-size is enough to remedy the issue in this case.

@Jdrewniak can you update some QA instructions and pass this to @ABorbaWMF (not sure whether you need to deploy first or have a staging server)

Change 404438 merged by jenkins-bot:
[wikimedia/portals@master] Updating header for mobile

https://gerrit.wikimedia.org/r/404438

We talked in standup about getting a task set up to allow qaing the portal.

In the meantime jan is there some where we can host the static files on so Anthony can verify?

@Jdlrobson following up on the QA stuff in T186592

@ABorbaWMF I've updated the description with some QA instructions. The staging environment is available here, and all we really need to do is make sure it doesn't break layout (I've checked on some browserstack devices & looks fine to me).

Looking good to me:

Isn't the wordmark too close to the globe? The "T" is basically touching the globe.

@Jdrewniak, @Nirzar - I agree with @Jhernandez - it looks a bit odd

Change 410456 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[wikimedia/portals@master] Adjusting header alignment

https://gerrit.wikimedia.org/r/410456

yeah, must have gotten skewed during code-review, hope this patch looks better

much better :)

🎉

Change 410456 merged by jenkins-bot:
[wikimedia/portals@master] Adjusting header alignment

https://gerrit.wikimedia.org/r/410456

I've updated http://tools-static.wmflabs.org/www-portal-staging/wikipedia.org/ with the latest changes. @Nirzar since Anthony has already done cross-browser QA on this, if you think the spacing looks good than it should be ready for sign off.

yeah we can move this to needs sign off. looks good to me, i can resolve it.

LGTM as well