Wikivoyage:UX Expedition Voyage Tips and guide

Contents

To improve primarily the readers', but also authors', experience of Wikivoyage.

This includes:

• Improving the readability of pages
  • By people using visual access
  • By people using audio access
  • By bots - to improve Search engine optimization (SEO)
• Improving the visual layout, impact and aesthetics of pages
• Improving the workflow for editors
  • Wikivoyage:Listing editor improvements
• Responsive Web Design (RWD) - page syntax to reliably handle any type of browser on any platform (Desktop, Tablet, Mobile SmartPhone)
  • mw:Manual:Mobiles, tablets and responsive design
  • mw:Recommendations for mobile friendly articles on Wikimedia wikis

Add to this page current status and issues. Issues should be on the appropriate talk page of the subject (if not clear please link).

• Deprecate MFSpecialCaseMainPage
  • Status: Ticket filed, configuration changed.

• Status: Updated to make it clearer scope and position of Wikivoyage. Helps new reading be clear about Wikimedia association. Useful SEO key words.
• Issue: Desktop and Mobile versions. Is it possible to come up with a single RWD solution? Switched to CSS queries to selectively show both versions for now. WIP.

  I'd like everyone to take a look at Main Page/Sandbox on mobile. The map is scrollable. I plan on adding some visual indicator to this effect, but first I'd like feedback on the general concept. Ping User:Traveler100, User:SelfieCity, and anyone else interested in helping out. ARR8 (talk | contribs) 19:18, 23 February 2019 (UTC)[reply]

  would prefer to see the whole globe and not just part of the world --Traveler100 (talk) 19:59, 23 February 2019 (UTC)[reply]

• Issue: No visual feedback for the links, e.g. hover effects.
• Issue: Imagemap used, which does not scale well and prevents the previous point.
  • Ran into technical difficulties implementing a better solution.
  • Demonstration of hover effects
• Issue: More modern and visual appealing map, ideally a vector.
• Issue: Does not scale to full width and stays to the left of the page on wide resolutions, see screenshot.
  • Discussion at Talk:Main_Page#Main_page_banners

• Status: Responsive design implemented
  • Discussion at Wikivoyage talk:UX Expedition#Feature Banner: Desktop and Mobile versions
    • @ARR8: where did the "Tap to learn more" come from on the full width version? Is it needed?--Traveler100 (talk) 16:06, 23 February 2019 (UTC)[reply]
  • Possible enhancements:
    • The CSS, as written, causes the banners to break with very narrow desktops. This is not a usual use case, because even those who use vertical monitors have wide enough resolution for there not to be problems, but this should technically be fixed, if possible, at some point.
    • When the descriptions of the banner image appears, it is not obvious to a mobile user that it contains links. This can be fixed with styling. Alternatively, a CSS rule can be written to append something like "Tap to learn more" at the end of the description.
    • The animation code currently slides the box in from the left. This can be easily modified to change the direction based on the alignment of the text in the box, so that a left-aligned box will slide in from the right. Not a high priority, since all of our banner boxes are right-aligned and have been for a while.
    • It was proposed that the title of the page linked to be displayed on the banner at all times, not just when the box is present. This is possible, but was decided against. It remains an option, however.
    • The mobile touch icon can be hidden upon touch on mobile. Having it remain may suggest additional behavior. Very simple to implement with or without a quick fade out.
• Issue: Does not scale to full width, see above

• Status: Responsive design implemented

• Status: Responsive design implemented

• Status: Responsive design implemented. Created {{Communityportal}}.

• Issue: Desktop version supports Mobile using nomobile class

• Issue: does not display well on narrow mobile screens>

• Hey local admin! You can refer to our Chinese Wikivoyage!--Yuriy kosygin (talk) 18:33, 6 March 2019 (UTC)[reply]

• Status: Fixed

• Status: Improved visual impression of entry page
• Improvement : coordinates and map position for articles on continent pages.

• Issue: The preview image on mouse-over of a link to an article is often of the first listing in the article (which is often airport or rail station), not first interesting image visible in the article (or even any image in the article).
  • Possible solution (workaround). See Bitola, which is using {{Pagebanner/sandbox2}} that uses User:Traveler100/sandbox-city to place a marker at the very top right of the page. This uses wikidata image to influence the preview image. --Traveler100 (talk) 10:17, 20 February 2019 (UTC)[reply]

• Issue: {{Style}}

• Issue: Should be line border around text

• Status:Combine all bullets into lists

• (minor) Improve page load times by moving all applicable MediaWiki:Common.css rules to templatestyles, prevent loading on every page when not necessary
• Ensure CSS rules are at the top of the page whenever they are used, to prevent w:Flash of unstyled content
  • Main page font size
    • I've gotten this problem before but I didn't know there was a name for it. I always assumed it was due to poor internet connection, which it is to some extent. --Comment by Selfie City (talk | contributions) 15:43, 2 March 2019 (UTC)[reply]
• Some requests to modify the appearance of {{Pagebanner}}. When attempted, it turned out the banner is outside the parser output, and so cannot be styled by templatestyles, only by common or skin CSS files. This is because it is an extension, and comes with its own default stylesheet.
  • Template_talk:Pagebanner#Darkened_section_for_text_in_top_left_corner
  • special:diff/3736226, User:ButteBag/common.css

• ARR8 (talk | contribs)
• Selfie City (talk | contributions) joined on 21:22, 17 February 2019 (UTC)[reply]
• Traveler100
• SHB2000

• Wikivoyage:Access Expedition
• Wikivoyage:Search Expedition