User blog:Fandyllic/Wikia mobile skin - What’s wrong with it?

Prologue
If any of you have been paying attention to various Wikia messages in the last year plus, you will notice Wikia has made mobile support a big priority. Among their major efforts have been Community mobile apps, My Wikia on the iPad, Portable Infoboxes, the Curated Main Page Tool, improved mobile diffs, Discussions (mostly confined to mobile apps), and even mobile editing. Strangely missing from all this messaging is almost any useful info about the mobile skin which is at the core of the mobile experience. While we may have many theories as to why they don’t want to talk about that mobile skin, we can’t really know until Wikia tells us something to give us some idea why. So far they’ve been very good about avoiding talking about the mobile skin, but that doesn’t mean we can’t talk about it.

This blog is here to cover the many things that are wrong with the mobile skin currently to hopefully give some guidance to Wikia on what they might want to focus on if they are secretly working on fixing some of the biggest problems. I will be adding updates to the list of problems and maybe emphasizing particular issues based on feedback, but for now this is my opinion augmented by input by some folks who I gave a preview look before I posted it.

The big problems, #1: losing styles
The biggest problem that most admins encounter with the mobile skin (Mercury) is the stripping of almost all custom styling (aka CSS). This is an especially acute problem on dark themed wikis, since the mobile skin almost universally simplifies the styling to some version of dark text on white background. Since the mobile skin strips 90+% of the CSS and re-styles it to a mostly bland uniform style with larger text sizes and san serif font, most or all of the styling admins have worked hard on to give their wiki a unique look are lost. Most admins now actually disregard working on mobile styling at all, because of how little control they perceive they have and forgo even the simplest steps in exasperation.

Lack of styling control doesn’t just affect the aesthetics of a wiki, but can also affect more important presentation aspects like text flow and element placement. If an admin gives up on styling for mobile altogether, they often get poor text flow or bad image placement and sizing as a side effect. Also due to this perceived lack of control, admins will disregard other aspects of portability, because they believe without the core aspect of presentation control taken away from them, other issues are of low priority and they focus purely on the desktop (Oasis) presentation.

What are some specifics we know about what styling the mobile skin strips? Well all of it is pretty much based on experimentation, because the documentation of its behavior is so poor or non-existent (don’t worry, I’ll get to that). However we know most sitewide CSS is stripped (even portable infobox styling!) and all inline CSS is stripped. Some template types are actually hidden by the mobile skin which can be surprising and disturbing when encountered, because most template typing was done by admins at the urging of Wikia with vague assurance that it would somehow help the mobile experience, but without much detail.

Big problem #2: unpredictable behavior
The mobile skin strips most styling, but there are many other parts of the skin’s functionality that can be important to admins and users. Many other aspects of layout and presentation on the mobile skin are unpredictable such that you can almost never know exactly something will change when viewed on the mobile skin vs. the desktop skin (Oasis). The saving grace in most cases is the Mobile preview which now works quite well, but once you see something going wrong in the preview, it can be very difficult to develop a fix or workaround.

So, what are the major elements of unpredictable behavior on the mobile skin? Almost all the big issues are related to images. The mobile skin pretty much removes any case of images floating with text flowing around it. The mobile skin just, usually, blows up the image to fit the width of the mobile screen and puts any text that would flow around it after the image. Usually an editor can make this work okay by checking the preview and make sure the image doesn’t break the text flow in too odd a place, but there are some situations where this doesn’t work right. A common problem situation is when, for good reasons, a low resolution icon image is made to float among some text to illustrate what it looks like while explaining some larger concept or mechanic. Unfortunately, the mobile skin doesn’t handle this well and unpredictable decides not to scale the image, but still breaks the text flow (i.e. The Second War section of Anduin Lothar article), so what you see is often a very tiny image and a break in the text flow. The tiny image problem is exacerbated by increasingly more hi-resolution mobile displays that make hi-res images look nice, but can reduce low res images (at least on the mobile skin) to sizes of a couple millimeters or less.

Another problem that comes up frequently on the Community Central forums that also affects the desktop skin, but becomes far more pronounced on the mobile skin is the appearance of image thumbnails or more accurately, the lack of appearance of thumbnails on the mobile front page and in categories. A while ago (2013), Kirkburn kindly posted a blog trying to explain some of the criteria for these thumbnails, but many user found the post to be only partially accurate and Wikia staff never gave a helpful update. This problem is worse on the mobile skin, because the new curated mobile main page is largely just a two column set of thumbnailed categories, so when a thumbnail doesn’t show up, the absence is glaring.

Big problem #3: Non-existent or poor documentation
Okay, let’s face it, Wikia documentation is generally poor. Wikia staff seem to actively dislike updating Help pages and when they do it, the results are often not an improvement. However, the mobile skin is one of the worst areas by far. The bad documentation makes all the other big problems worse. Stripped styling would be mildly less bad, if you had a better idea of what wasn’t stripped or the meager control elements you had were documented. The problem of unpredictability is basically a major side effect of bad documentation. Documentation reduces unpredictability.

Here are some specifics to what makes Wikia mobile skin documentation particularly bad…

If you look at the main help page portal for the mobile skin, Help:Mobile, and drill down to the various topics, you will see there is almost no info on styling control of the mobile skin and what there is is either on a page not linked from the portal or of the nature of, “you can’t control styles this way” on the mobile skin. In one case, useful mobile info actually removed from help pages (see diff removing hidden class info from Help:Wikitext best practices). There is no info in Help:Advanced CSS and JS about mobile. There is no info in Help:Photos about mobile.

In Help:Wikitext best practices is says (key part changed to italics):
 * Help:Template Types includes information on how to properly organize your templates to ensure the Wikia mobile skin knows how to best display them.

However, before I added info specifically about the mobile skin to Template types help, there wasn’t actually any info specific to the mobile skin!

Lastly, the mobile skin info that does exist is scattered throughout help pages with no coherence. There is not much relevant linking between the help pages and much missing from the mobile portal help pages. All these help pages have some mobile related info on them, but are not linked to by mobile help pages: And the info on these pages, while better than nothing is pretty bad.
 * Help:Avatars - info about iOS image format limitations.
 * Help:Community CSS and JS - basically says this doesn’t affect mobile.
 * Help:Personal CSS and JS - basically says this doesn’t affect mobile.
 * Help:Preview - explains about mobile preview option.

Miscellaneous other problems
So, I’ve gone over what I think are the big problems, but here is a list of various little problems that could be addressed.


 * No link to history of pages
 * If you want to see page history, you have to switch to the “Full site” version of the page.
 * Can’t navigate back to front page from Recent Wiki Activity (mobile version)
 * Seems like a strange oversight, but there is no link to the main page from the mobile skin version of Recent Wiki Activity.
 * Image links (links followed when clicking an image) don’t work:


 * This may work in some cases, but I haven’t found them.
 * No link to mobile main page sometimes, if a page uses a portable infobox.
 * This is an annoying nullification of a good feature.
 * Placeholder brackets image shows through transparency of image thumbnails (on mobile main page and categories)
 * Not sure why there needs to be a background with light gray brackets behind all thumbnails… it makes sense if there is no image to render, but not for transparency.
 * It’s not a serious problem because it only happens with category thumbnails and on the mobile main page.
 * Doesn’t show wordmark
 * One of the key branding elements of wikis is the wordmark. It would be nice if the wordmark could show up instead of the all caps, plain text site name link for the mobile main page.
 * Menus behave differently on mobile than desktop (menu links disabled on mobile)
 * It makes some sense that because mobile does not have the concept of “hover”, you can’t tap a menu item that has a submenu.
 * No dark themes
 * Could use collapsible sections like Wikipedia.
 * Community mobile apps support collapsible sections, but for some reason the mobile skin does not. It also disables class=”mw-collapsible”, so that doesn’t work either.

The good stuff
No all things about the mobile skin are bad. Over the past few months the mobile skin has seen some welcome improvements. They just aren’t nearly enough to counter-balance the problems.


 * Mobile preview when editing on desktop.
 * This is technically part of the mobile skin, but is an excellent feature to help see what will happen on the mobile skin while editing on the desktop skin. It vastly reduces the unpredictability that existed before.
 * CSS class “hidden” still works.
 * They removed the help information for this, but it still works. If you add class=”hidden” to an HTML element, it will be hidden on the mobile skin (there may be some cases where it doesn’t work, but it seems to work when you need it).
 * Load-on-demand images.
 * This may actually have been in the mobile skin for a long time, but it’s great. For pages with tons of images, the images only load when the image comes into view, which is great for performance and memory use.
 * This is a feature that would actually be great to have on desktop too!
 * Link to mobile main page added to main namespace pages.
 * For quite a while when you went to a regular content page on the mobile skin, you had no way to get back to the main page.
 * Recent Wiki Activity (mobile version) diffs are very good.
 * Another recent feature, trying to look at diffs in the mobile skin used to not look so great, but now they work very well.

Conclusions
So, the point of this blog is to give a detailed look at what is wrong with the mobile skin, but it isn’t specifically trying say it’s all wrong. The real point is that the mobile skin is ubiquitous for mobile browsing of Wikia sites as the only alternative is the limited number of community apps which share some of the same problems. The mobile skin is the core of the mobile experience and needs to be better for both content creators (editors/users), content managers (admins/moderators), and content consumers (readers/viewers). Mobile and portability side projects are nice and important, but shouldn’t be prioritized over improving the mobile skin. Improving the mobile skin has the most “bang for the buck”.

If Wikia wants to improve the mobile skin, they need to publicly recognize that it has significant problems and give some kind of plan and timeline for addressing at least some of them. For the path of least resistance, documentation is probably the easiest thing to address. It shouldn’t change any functionality and thus have almost no risk for introducing new bugs. It would also would cut into the unpredictability problem. The second easiest path would be to knock off some of the miscellaneous mobile skin bugs, since fixing them can show obvious progress and they can be prioritized based on what will make users most happy and represents the least risk to code and functional stability.

As much as admins would like, introducing more style control is probably the hardest task and from the hinting by Wikia staff, the least desirable for the engineering group. It adds the most risk, potential support headaches, and decreases maintainability. However, a counterpart  like   might be nice and could be piloted on a test wiki to see how many problems it might cause. From the admin point-of-view, styling control is one of the most desirable features, so anything would make them happier than nothing.

Anyway, if you got this far and it wasn’t TL;DR, congratulations! Hopefully some of it was worthwhile.