Board Thread:Support Requests - Designing Your Wiki/@comment-35234924-20200328222619

I'm the bureaucrat over on the Monster Legends Wiki. I want to try to make the wiki a bit more mobile-friendly, if possible. Our monster pages are the backbone of the wiki, so I want to focus on that first. Everything is built for a desktop use, but given that over half of our daily users are viewing on mobile, it's time to focus on making that a bit nicer looking. So far, I've just been recommending that users view on desktop rather than mobile, but I'd rather both versions look great.

Let's use Cyberiel here as an example. There's 3 main sections of data.

Infobox

These are made with the portable infoboxes, so I'm ok with how the formatting comes out. The only thing is the images (not the monster images, those are fine) scale all kinds of weird on mobile.

What do I need to do there that doesn't sacrifice the look of the desktop view?

Stats and Information

This is the first big chunk of information. In this game, monster's stats change depending on the rank of the monster. On desktop, we have all that information organized using tabber, which obviously doesn't work on mobile. I know tabview does work on mobile, but that requires a separate page with that information. We have our stats automatically calculated within the template based on a formula the game uses (it's mathematical scaling, so we don't have to manually input each new rank, just the base values).

Does anyone have any recommendations to give this a cleaner look on mobile?

Skills

This is the next big data dump that shows all the skills the monster can learn, at what level, and gives all the details about the skills at a glance. On mobile, it scrunches those tables down to mobile device size (looking terrible holding your phone vertically).

Any recommendations or ideas here to better present this information?  