User blog:Fujihita/Mobile foundation and parting words

This will be my last blog post as an administrator of this wiki.

I have informed relevant parties at least three months ago that I would return to active duty only till the end of the second drill. The time has come for me to retire. Reflecting on the time I spent as an administrator, I have done little to maintain the wiki and I have focused solely on advancing the visual and content aspects. This means my retirement will not hinder wiki operation in any ways, though technical supports for my existing templates and layouts will no longer be provided.

Unfinished business
Among the "unfinished business" I'll leave behind for future generations are the problem of page clusters and the problem of mobile compatibility. The former is the elephant in the room and the latter is uncharted territory plagued with technical limitations.

Page clusters



 * I tackled the core problem of page clusters, which is an excess of choices and devised a solution using better visual hierarchy as documented in the thread. It is a nightmare to satisfy mobile users, monobook skin users, oasis skin users, newcomers who want lower information density, and old users who want higher information density.
 * On top of this delicate balancing act of functionality and aesthetic, there are technical limitations imposed by wikia and mediawiki platform to which the unhelpful response of the average users would be "Who cares about the law of physics? Just make my wish happen".
 * I have neither the time nor the energy to campaign for its full implementation.

Mobile compatibility

 * Mobile compatibility is something I have been made aware of recently as a result of the first unfinished business. I have looked into the matter and discovered some facts that might be helpful for future mobile designers:
 * Mobile view is provided by a skin called "mercury".
 * Appending  to the end of the URL enforces mercury skin (wherever applicable).
 * Mobile view is NOT available in  (user profile),   (forums), and   (templates) namespaces.
 * When mobile view is not available, default "oasis" skin will be enforced.
 * Mobile preview is also available in source editor even where mobile view is not available.
 * Finally, in regard to the front page, unlike normal article pages, the front page uses an automatically generated mobile version called "mobile main page". This mobile version is enforced by wikia and there is no known way to switch it off.
 * Therefore, it is not possible for me to design a mobile version of the front page. Though to the average users, "Who cares about the evil Wikian overlord? Just make my wish happen", right?

Building portable pages
My final work here is about setting the methods to create mobile compatible pages. There are two main ways to go about this.

The first is to avoid all mobile incompatible elements such as nesting tables, tabview, tabber, collapsibles, overlays and HTML in general.

So, instead of this

We have this

The second table is workable on mobile view, though not the most ideal design. It is arguably not ideal for desktop view either. It is a lazy compromise that can work if the desktop audience can accept a worse-off design in order to support mobile compatibility.


 * The problem?
 * Desktop users won't accept anything less than the current for the sake of another group of users. Ain't anybody want to be a social justice hero when it is THEIR privilege they will have to sacrifice.

Separating mobile-desktop views
 Click here to see this blog in mobile view
 * You are viewing this blog in desktop view

Click here to see this blog in desktop view
 * You are viewing this blog in desktop view

The alternative is separating mobile and desktop views, making some contents only available on desktop view while others only available on mobile view.

Collapsible hack (mobile only content wrapper)

 * The pioneer of this technique in this wiki is Dragonjet with his collapsible hack to make some front page elements exclusive to mobile view (by taking advantage of the fact that collapsible does not work in mobile view and hence, a "sealed" collapsible container will not show content on desktop view). It is implemented as follow:





Mobileshow class (mobile only content wrapper)

 * Gaka formally implemented  to this wiki's css to create easier wrappers of mobile-only content. This is the recommended method and it is implemented as follow:





Hidden class (desktop only content wrapper)
Wikia supports a default  to hide desktop only content from mercury skin. It is implemented as follow





Full desktop view on mobile
Wikia provides an option to use full desktop view on mobile. This affects the visibility of content under the aforementioned techniques as follow


 * collapsible hack
 * Visible on mobile (oasis) and mobile (mercury)
 * class="mobileonly"
 * Visible only on mobile (mercury)
 * class="hidden"
 * Visible only on desktop (oasis)

Performance concerns
Finally, a word of caution.

These view separation techniques are all borderline hacks and they come with a performance penalty. Both mobile and desktop version are always loaded together. This is not a major issue for desktop view as they generally have strong network connection. However, as desktop version is also loaded in mobile view, this might result in long load time on mobile devices with weak network connection.

Without fiddling with Wikia's server backend, there is no way to negate this performance penalty or redirect mobile users to a dedicated page. Only the first approach "Building portable pages" does not come with performance penalty as both views are the same. Therefore, it is highly recommended that this approach is taken wherever applicable.

Either that or... "Who cares about technical impossibility? Just make my mobile page load faster!"



Fujihita (talk) 16:24, July 23, 2017 (UTC) Administrator (2014-2017)