Change Details

Currently Vector prints a list of languages in the left of the screen in the sidebar. This is accessible to users with and without JavaScript. With JS we hide this list so although it is in the HTML it is never shown to users. [[ https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements#Phase_2._Developing_focus_areas,_sketching_and_prototyping_ideas,_starting_conversations_(July_2019_%E2%80%93_November_2019) | An update to Vector will move the languages feature to a more prominent place in the UI ]] - in the top right corner. With JavaScript enabled it will display a popup via the UniversalLanguageSelector. {F31541684} Currently displaying languages in a usable way to non-JS users using responsive skins is tricky. * On Timeless the language button fails to work without JavaScript enabled. * On Minerva the language button links to [[ https://en.m.wikipedia.org/wiki/Special:MobileLanguages/Language | Special:MobileLanguages ]] - a special page provided by MobileFrontend.. * On Minerva without MobileFrontend installed the language button fails to work without JavaScript enabled. * On [[ https://en.m.wikipedia.org/w/index.php?title=Language&useskin=vector | responsive Vector ]] the list is at the bottom of the page - so not only does the user have to scroll there but they then need to find the language they desire. = Possible solutions **Rendering the list of languages at the bottom of the page.** Pros: 1) Easy technical solution (HTML) 2) Potential SEO benefits (difficult to measure) Cons: 1) List of languages looks out of place and unsightly 2) Pages with lots of languages would obscure access to other elements on the page 3) May need to be hidden for JS users to provide a better experience 4) Adds unnecessary weight to the page bloating HTML size. **Move Special:MobileLanguages to core** Pros: 1) Easy technical solution (a link) 2) Code already exists 3) Performance 4) No need to worry about styling of list for JS users 5) Addressable (has own URI) Cons: 1) Potential SEO downsides 2) not compatible with find on page for specific language name. = MobileLanguages The parameter given to the page is the page to retrieve languages from. For example: https://en.m.wikipedia.org/wiki/Special:MobileLanguages/San_Francisco = Recommended solution I recommend we move Special:MobileLanguages to core and renaming to **Special:Languages**. In Vector for non-JS users we will fallback to this page. This page renders a list of languages. While the page may be difficult to navigate I think there are possible design improvements to group elements and make use of collapsible elements that work without JS (e.g. checkbox hack) if we wish. Thoughts? Are there any concerns with doing this?

The new desktop skin is likely to move the languages feature to a more prominent place in the UI and when doing so it's not going to be feasible to render a long list of languagesCurrently Vector prints a list of languages in the left of the screen in the sidebar. This is accessible to users with and without JavaScript. We will need a solution for non-JSWith JS we hide this list so although it is in the HTML it is never shown to users. The Minerva skin also does this which minimises payload by not serving languages in the page and instead opting to use JavaScript to load other languages or for those without JavaScript a special page fallback.[[ https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements#Phase_2._Developing_focus_areas,_sketching_and_prototyping_ideas,_starting_conversations_(July_2019_%E2%80%93_November_2019) | An update to Vector will move the languages feature to a more prominent place in the UI ]] - in the top right corner. With JavaScript enabled it will display a popup via the UniversalLanguageSelector. {F31541684} Currently displaying languages in a usable way to non-JS users using responsive skins is tricky. * On Timeless the language button fails to work without JavaScript enabled. * On Minerva the language button links to [[ https://en.m.wikipedia.org/wiki/Special:MobileLanguages/Language | Special:MobileLanguages ]] - a special page provided by MobileFrontend.. * On Minerva without MobileFrontend installed the language button fails to work without JavaScript enabled. * On [[ https://en.m.wikipedia.org/w/index.php?title=Language&useskin=vector | responsive Vector ]] the list is at the bottom of the page - so not only does the user have to scroll there but they then need to find the language they desire. = Possible solutions **Rendering the list of languages at the bottom of the page.** Pros: 1) Easy technical solution (HTML) 2) Potential SEO benefits (difficult to measure) Cons: 1) List of languages looks out of place and unsightly 2) Pages with lots of languages would obscure access to other elements on the page 3) May need to be hidden for JS users to provide a better experience 4) Adds unnecessary weight to the page bloating HTML size. **Move Special:MobileLanguages to core** Pros: 1) Easy technical solution (a link) 2) Code already exists 3) Performance 4) No need to worry about styling of list for JS users 5) Addressable (has own URI) Cons: 1) Potential SEO downsides 2) not compatible with find on page for specific language name. = MobileLanguages The parameter given to the page is the page to retrieve languages from. For example: https://en.m.wikipedia.org/wiki/Special:MobileLanguages/San_Francisco = Problems The Minerva skin currently has to depend on the MobileFrontend extension to get the fallback func= Recommended solutionality. = Notes This is one of many non-standard language selectors which need to be consolidated;I recommend we move Special:MobileLanguages to core and renaming to **Special:Languages**. In Vector for non-JS users we will fallback to this page. This page renders a list of languages. While the page may be difficult to navigate I think there are possible design improvements to group elements and make use of collapsible elements that work without JS (e.g. checkbox hack) if we wish. Thoughts? see also {T73136}.Are there any concerns with doing this?