Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Language bar causes layout shift #629

Open
jasmussen opened this issue Jun 18, 2024 · 2 comments
Open

Language bar causes layout shift #629

jasmussen opened this issue Jun 18, 2024 · 2 comments

Comments

@jasmussen
Copy link
Collaborator

This is likely an issue for language bars across the site, so feel free to move the issue if need be. It's also not the highest priority, but worth refining. If you click between the tabs in the theme directory, the language-bar causes a layout shift:

Image

This happens as initially the bar is not present, and then it loads after a bit. What are some options to improve this?

  • Does the language bar need to show up on every sub-section, or is it enough to show it only on the landing page?
  • Can the bar be preloaded?
  • Can we know that the bar will appear, and reserve the space?
  • Can we abs-position the bar so that it sits in the top padding of the page?
@ryelle ryelle transferred this issue from WordPress/wporg-theme-directory Jun 18, 2024
@ryelle
Copy link
Contributor

ryelle commented Aug 7, 2024

Does the language bar need to show up on every sub-section, or is it enough to show it only on the landing page?

It should be available on the homepage and on single plugins/themes, since those also include specific details about the theme/plugin. It could probably be removed from archive pages, but if we fix the layout shift I don't see a drawback to having it.

It's also available on the main homepage, Documentation homepage, Forums homepage, Learn (homepage and all interior pages). So any solution will need to work for all of these.

It's not on Patterns, but it should be (WordPress/pattern-directory#705).

It used to be on /download, but was removed— maybe with the redesign rollout.

Can the bar be preloaded? Can we know that the bar will appear, and reserve the space?

No, it requires information from the client browser for the language hints, so it can't be rendered server-side.

Can we abs-position the bar so that it sits in the top padding of the page?

Possibly, though it would need some more work— on desktop it works, but as the spacing value shrinks on smaller screens, it collides with the content. On single themes/plugins, with the larger banner, it takes up almost all that space.

Desktop Mobile
Screenshot 2024-08-07 at 5 35 41 PM Screen Shot 2024-08-07 at 17 44 07
Screen Shot 2024-08-07 at 17 42 18 Screen Shot 2024-08-07 at 17 42 52

@jasmussen
Copy link
Collaborator Author

but if we fix the layout shift I don't see a drawback to having it.

From my angle it's not just the layout shift, it's the prominence of the callout, which is designed to be visually noticable and therefore implied to be important. And while it's important to solicit translations (therefore homepage and single plugin pages being sensible)—it's really not a task that should befall 80% of visitors. So for me it's mainly about reducing the footprint and prominence.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants