There's been some work on theming the language switcher in #3127588: Theme Olivero's language switcher

However, we jumped into this without a design. Let's postpone that and get a design that we can then theme against.

CommentFileSizeAuthor
#3 Language Switcher - header 1B.jpg868.44 KBmherchel

Comments

mherchel created an issue. See original summary.

mherchel credited jwitkowski79.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue tags: +UX
StatusFileSize
new Language Switcher - header 1B.jpg868.44 KB

Below is an option put to the very right of the secondary menu.

Questions:

1) Can this be a
menu? Or should be do a regular dropdown?
2) Does the icon make sense from an international point of view?
3) Is the placement logical?

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
commented
Related issues: +#3042417: Accessible dropdown for Umami's language-switcher and mobile main-menu

Umami has a similar icon for its upcoming language switcher [WIP] - #3042417: Accessible dropdown for Umami's language-switcher and mobile main-menu

1) I think this is a regular dropdown. How would it be different if this was a menu?
2) In Umami we agreed that this kind of icon makes sense from an international point of view.
3) Placement makes sense to me. Can you add a screenshot of where would the language switch be placed in mobile?

cedewey’s picture

cedewey
he/him
Primary language English
Location Denver, CO
commented

In the Drupal User Experience weekly call we discussed this issue and a few points were made.

  1. According to Nielsen Norman Group, few icons have universally held meaning. As a result, icons should be accompanied with a text label. Source: Icon Usability
  2. Designing a language switch: Examples and best practices has some good examples and points made
  3. The Language Icon Initiative is an attempt to make one particular icon the universally adopted language switcher choice. However, our team found the 'A' to look similar to the A icon used to increase or decrease font size. Also, the icon's clarity suffers quite a bit as its size gets smaller. Finally, aesthetically it's not as strong as the globe icon being considered.
benjifisher’s picture

benjifisher
he/him or they/them
Primary language English
Location Boston area
commented

We discussed this issue at #3225198: Drupal Usability Meeting 2021-07-30.

@shaal was at the meeting. As he pointed out in #4, the Umami theme has also been working on a language switcher. Chances are good that Olivero and Umami can share some code and some ideas.

No firm recommendations came out of the meeting, but we did come up with some resources that might be helpful:

berdir’s picture

berdir
Primary language German
Location Switzerland
commented

Not too involved with Olivero, but how exactly would you control the *placement* of the language switcher? It's something that a user has to place after adding two languages as a block. At best you can document somewhere that the recommend place is in that region, but you can't actually guarantee that users are going to chose that option.

Unlike other blocks, you can _not_ provide a default block for it, as it is only relevant to sites with multiple languages and you can't have that initially with the standard install profile.

Umami can do it, because it by default installs multiple languages.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

That's a good point. We can have Olivero serve different templates and styles based on its region, and maybe have a recommended region. But you're right. We can't do anything beyond that.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

xmacinfo’s picture

xmacinfo
he/him
Primary language French
Location Canada
commented

Currently not a single region display properly the language switcher. At minimum, Olivero should support putting the language switcher in a recommended region.

I have to create a new theme based on Olivero if I want to use Olivero.

In the new theme based on Olivero I add additional CSS to make the language switcher usable in Olivero. I put the language switcher block in the Secondary menu region. Controlling the CSS also give me the opportunity to hide from the list of languages the current one.

What is the experience we want to give users of Olivero with the language switcher?

w01f’s picture

w01f commented

Just following up on this - currently we have to use a few imperfect contrib/custom solutions to make a dropdown select for switching language. Some direction about if there's a plan for this and how/what to work on to contribute towards a best practices, accessible solution would be great.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.