Tabs and Tabber Best Practices Policy Page Proposal

Everything About Fiction You Never Wanted to Know.

About the Author

avatar

I helped Vorticity/Labster found this site because not everyone wanted to trope on Wikia, and because, honestly, there needs to be an alternative to TV Tropes, especially since allegiance to advertisement sponsors and an increasingly oppressive "Stop Having Fun!" Guys atmosphere seems to have replaced the laid back wiki many members of this site used to enjoy.

I'm the tech guy around here, and I mostly just make sure everything is working properly and manage one of the current approved site bot accounts for maintenance edits and other needed projects.

I'm not a fan of admin fiat decision making and prefer to solicit suggestions from the community before making any major decisions, so drop by the The Forums or my talk page if you have a question.

I also do some game reviews for ChristCenteredGamer as of 5/22/2019.

More By GethN7

Tech report for 2022
1 vote, 1 comment
Tech blog for August 2021
1 vote, 2 comments
Tech report on Gadget code features
1 vote, 2 comments

Other recent contributors

Make this page better by editing it.
GethN7
1

All The Tropes provides both the Tabs and TabberNeue extensions to provide a tabbed interface for the illustration of site pages. Care has been taken to make sure they will be just as functional when viewing and contributing to the site on mobile devices as well as desktops. Regardless, below is a series of notes on what are best practices for using these features so they look optimal on both mobile and desktop formats in as seamless a transition as possible.


1. Tabs requires hard divider separators to prevent it from overlapping other display elements in mobile view. Use the {{hardline}} or {{break}} templates as it appropriate on pages where this is likely to be an issue.

2. Consider the best usage of TabberNeue to be optimal for both desktop and mobile. It's best to have many items under a few tabs than a lot under several, to prevent needing to scroll horizontally and vertically on both desktop AND mobile.

3. Self Demonstrating pages and their regular pages can be combined on the same page with TabberNeue.

4. Tabs and TabberNeue have different advantages. Tabs has an accordion style drop-down in mobile and a similar look to TabberNeue in desktop, though one can also make Tabs into collapsible elements on desktop as well. Tabber Neue is more static but adjusts well to both mobile and desktop seamlessly. Consider the advantages carefully before using them for page design for best appearance on mobile and desktop.

5. You can combine TabberNeue with the Sidebarmenu template to make it look more attractive, like so:

* Trope

  • Trope
  • Trope

* Trope

  • Trope


  • Do bear in mind all other best practices when doing so.


    6. If you are an admin making changes to pages critical to site users in general like the Community Portal, please get the opinion of other staff before going through with a change. These pages are of high importance to all users and require careful attention to best viewing on mobile and desktop especially. Sandbox pages would be ideal for making tests before deploying changes globally.

    Loading comments...