Twenty Fourteen: Long titles break the header in mobile view

[sixhours]

Steps to reproduce:

1. Activate the Twenty Fourteen theme
2. Go to Appearance > Customize > Site Title
3. Add a long title such as "Triceratops at the Opera House"
4. Reduce the screen size to approximate a mobile device

​https://cloudup.com/cmbUw23Ov0r

• Expected: the search icon to stay on the same line even if there's a long title
• Actual: the search icon falls over to the 2nd line if there's a long title and it looks funny

Tested with Chrome 34.0.1847.116 on Mac OS X 10.9.2 (Mavericks)

[lancewillett]

Thanks for the report!

Idea for a graceful fix?

• Constrain title with ellipsis?
• Push search to new line with a better-looking design?

[rclations]

Adding a patch that constrains the title with an ellipsis. This doesn't solve problems with extra long titles + the navigation on desktop, but at least it covers the mobile experience.

This patch covers screens >= 320px wide. If we want to support anything smaller, I'd recommend adding more media queries to keep the experience smooth.

[lancewillett]

@sixhours Can you review and test the patch?

[sixhours]

The patch is working on archives and the blog index, but not on single posts/pages due to the selector specifying the .list-view class:

​https://cloudup.com/cT2LjR4Uo1E

Not sure if this is intentional, but I've attached a new patch that applies to just .site-title.

[sixhours]

Apply max-width values to .site-title for small screens

[lancewillett]

Thanks for the updated patch -- I'm going to commit but keep the ticket open so we can test on a bunch of devices. If we have time this weekend at WordCamp Orange County we can hit a bunch of various devices to test the solution.

[lancewillett]

In 28691:

Twenty Fourteen: Apply max-width values to avoid site title breaking the layout in small screens. Props sixhours, rclations. See #28237.

[celloexpressions]

Replace approximating percentages with pixel-perfect calc() rules.

[celloexpressions]

We should just use calc rules instead of arbitrary percentages here (patch attached). That way as much of the title is shown as possible.

The only relevant place this isn't supported is IE8, which doesn't have media queries anyway; I only put the fallback percentage in that file.

[schoenwaldnils]

I wrote a fix that sets the search-toggle to absolute and wraps the title with a smaller line-height.
That might let the header grow in height but you can see the whole title.

Also fixed that the dots on the german Ä in PRIMÄRES MENÜ appear in the menu-toggle-button

#wchh14

Before:

After:

[schoenwaldnils]

28237.5.diff are the same changes like in 28237.4.diff but without the fix for #27456

[ocean90]

Have tested 28237.5.diff​ with Nils at #wchh14.
I like the idea behind the patch more than the current max-width (or calc(), .3.diff) way.

While testing we have noticed that currently the ellipsis aren't in the same color as the header text color, see 28237.ellipsis.png​.

[Kopepasah]

From an Accessibility standpoint, I do not like the idea of cutting off the site title with ellipsis. While this may be acceptable with other bits of content (that can be accessed in full elsewhere, like the excerpt), the site title is usually the most important portion to a user (both site owner and site visitor). While this may be edge case, prohibiting mobile users from viewing the site title (or any other content) is seems like a punishment for using a mobile device.

I propose a fix more along the lines of keeping the site title visible and switching the position search and menu toggles. See attachment:28237.accessibility.png​ as an example.

[schoenwaldnils]

@Kopepasah I tried to apply your idea to the 28237.6.diff. It worked with the search-button but not with the menu-toggle. I think it's not possible with the DOM in that constellation.

The button is stil on top with height: 48px;
But I think it looks much better.

[obenland]

Simplify .site-title styles and color ellipsis

[obenland]

I don't hate the ellipsis, even though it might truncate the site title.

28237.2.diff​ provides a more accurate width calculation and fixes the custom site title color bug, that ocean90 pointed out earlier.

[celloexpressions]

Replying to obenland:

28237.2.diff​ provides a more accurate width calculation and fixes the custom site title color bug, that ocean90 pointed out earlier.

We do need the media query parts of the max width calcs from 28237.3.diff​ also if we want to always support showing as much as possible. 1200px+ long titles are probably uncommon, but it doesn't take much to keep a bit more where we can. They magic numbers that we have in there should all be notated like 28237.2.diff​ does. They account for changing padding/margins and the hiding of search-toggle.

[obenland]

Good call. Would you mind looking at .7.diff?

[celloexpressions]

Replying to obenland:

Good call. Would you mind looking at .7.diff?

Looks good; the spot where I had the 3rd set of calcs (66px) was for where the menu-toggle is gone but the padding is still 10px instead of 30px. I don't think we need to worry about that, as only up to 20px is "wasted" at any viewport now.

(I also agree with the ellipsis approach still - it's much cleaner in the context of Twenty Fourteen's design)

[iamtakashi]

I'd vote for the ellipsis approach. In my opinion, content is more important than branding (site title) on small screens.

[lancewillett]

In 29096:

Twenty Fourteen: more graceful handling of super-long site titles in small screens: add an ellipsis and adjust max-width more carefully.

Props celloexpressions, schoenwaldnils, and obenland -- fixes #28237.