Twenty Fifteen: awkward mobile header when header text is hidden

[celloexpressions]

See screenshots (from @ehang) - if a user is using a logo (via a widget) or something else and decides to hide the header text for any reason, they end up with a really weird header view on mobile. Not sure if we can do anything about it here, but given the way header images are sized with this theme, there isn't a good way to include text in the image. Maybe we shouldn't allow hiding the header text at all?

[iandstewart]

I'm not sure this is a fixable bug or if it's a bug. It feels like it's working as expected. A sidebar widget really _isn't_ a header image. And a header image isn't always a logo but a decorative image. I could see maybe not allowing hiding header text but that feels more like an enhancement and I'm not 100% that _that_ would be a great solution.

[iamtakashi]

I agree with Ian. In this theme, the header image is meant to be more decorative image, like Twenty Thirteen. I don't think there is an elegant way to positioning the header image all the time with any image and I'm not sure not if allowing hiding header text adds much to it.

[iandstewart]

In that case, closing with a wontfix.

[celloexpressions]

Sorry, the specific use-case caused the issue here to be confused. Let me clarify.

If there is no header image and the user chooses not to display the header text for any reason (screenshot 1 being an example, but it could be for any reason), the mobile header looks pretty broken (screenshot 2). With a decorative header image it would probably be fine, but without one it doesn't really make sense. And we don't have an image here by default. Perhaps in the no-header-image-or-text case we should consolidate the header in some way, if we want the ability to hide the header text. Or maybe we only hide the text when it's a sidebar, but always show it in the header version.

A big reason that this is an issue is that most users are unlikely to initially realize that the sidebar becomes a header on smaller devices, with all of the sidebar contents (other than the header text) disappearing behind a toggle. So we need to make sure there aren't any surprises with that, like "why is there suddenly a big empty space at the top of my site".

The decision to hide the header text will almost always be made in the context of there being a sidebar with widgets and menus here, so when those go away we need to make sure that there's something reasonable left. And a huge blank space with the toggle on the right is pretty bad.

Ordinarily I wouldn't reopen this, but it came from an intermediate user who will be training large groups of university students (complete beginners) on WordPress and Twenty Fifteen, so she'd like an explanation of why this issue isn't an issue or how to work around it (and I agree, because it doesn't look right). But the above comments completely miss the point - they are about how images work here and this is about what happens when there is no text or image. We shouldn't have options that can break things - right now the display header text checkbox can result in a weird look on mobile even if that's the only customization a user makes.

[iandstewart]

Perhaps in the no-header-image-or-text case we should consolidate the header in some way, if we want the ability to hide the header text

Can you describe this idea a bit more?

Or maybe we only hide the text when it's a sidebar, but always show it in the header version

Wouldn't this create it's own confusion?

[celloexpressions]

Replying to iandstewart:

Perhaps in the no-header-image-or-text case we should consolidate the header in some way, if we want the ability to hide the header text

Can you describe this idea a bit more?

Either less vertical padding, or maybe rethinking the concept of having a full-width header if there's no text in it and no image, minimizing the big empty space at the top of the site. This is a fairly specific case to address, but it's something that people will run into, especially given the scale at which this theme will be used.

Or maybe we only hide the text when it's a sidebar, but always show it in the header version

Wouldn't this create it's own confusion?

I think this would be the simplest solution if we decide to do something here. We would tweak the label on the "Hide header text" control to something like "Hide site title and tagline from sidebar" (more accurate) and could also add a description stating that it will always be displayed on smaller devices regardless of this option. In the header context, it doesn't really make sense to hide this and end up with either a blank space or only the unpredictably-cropped header image, while it could be useful to hide it in the sidebar since widgets can display other stuff there instead.

[iandstewart]

Less vertical padding at one-column sizes if there is no header text and no header image sounds pretty good to me. So, in that instance this …

​https://cloudup.com/cpO7TCklqIO

… becomes not so tall on a portrait tablet or anything smaller when there is not header text or image.

@iamtakashi?

[ehang]

Just wanted to chime in from my perspective.

I think it could be valid to not show the site title / description in the larger view and replace it as I did with an image widget.

But in terms of mobile view, when someone is landing on the site for the first time from their phone, it's weird not to see the name of the site. Therefore, I think that the site title should not be able to be hidden in mobile view....

[iamtakashi]

Replying to iandstewart:

The negative side of this approach is the height of the header image is going to be obviously even shorter, and it could make it even more difficult to use the header image.

[iandstewart]

Replying to iamtakashi:

Replying to iandstewart:

The negative side of this approach is the height of the header image is going to be obviously even shorter, and it could make it even more difficult to use the header image.

I mean shortening it _only_ when there is no header image along with no header text.

[iandstewart]

Like, this case in custom-header.php …

if ( ! display_header_text() && empty( $header_image ) ) { ?>
Make the header a bit smaller on mobile
like, with some minimal padding around the hamburger icon
<?php }

[iandstewart]

I think this would be the simplest solution if we decide to do something here. We would tweak the label on the "Hide header text" control to something like "Hide site title and tagline from sidebar" (more accurate) and could also add a description stating that it will always be displayed on smaller devices regardless of this option.

This sounds confusing to me. The text is not always in "the sidebar". That's the desktop pattern. And there will be people who want to have the text hidden everywhere. Not allowing header text hiding sounds like it's own future potential issue for users.

[iamtakashi]

Short header for when there is no Custom Header and Header Text is hidden

[iandstewart]

In 30564:

Twenty Fifteen: a shorter header on small screens when there is no header text or header image looks more correct.

Props iamtakashi, fixes #30326.