Differences between desktop and mobile

Although some folks want to talk about a bigger picture concerning portability at FANDOM wikis, a large portion of the issues is the difference between how wikis render on the desktop skin (Oasis) vs. the mobile skin (Mercury). The difference in presentation can be stark, but there are some basic expectations when authoring content that can help reduce the shock when seeing the differences, especially on the mobile skin.

Previewing

As of early 2016, the mobile preview should be a good guide for how things will look on the mobile skin. Of course, it is always best to actually view things on specific devices, be they Android, iOS, smart-phones, or tablets.

Specifying a skin via the URL

In order to specify a skin via the URL, add ?useskin=skin.

Examples

Basic URL (selects based on user agent)

http://portability.wikia.com/wiki/Differences_between_desktop_and_mobile

Example

http://portability.wikia.com/wiki/Differences_between_desktop_and_mobile?useskin=wikiamobile

↑      
Skin Parameter

Skin Name	Skin Parameter	Type
Oasis	oasis	Desktop
Mercury	mercury	Mobile

Mercury does not display all content namespaces, and some (such as Special pages, Help pages, and User pages) will be rendered in Oasis instead.

Styles

All site-wide CSS and nearly all inline CSS is stripped on the mobile skin, so don't rely on it for changes. Most custom CSS classes (except hidden) are stripped too.

Template types

  Main page: Help:Template types

"Notice", "Navbox" and "Navigation" type templates are hidden on the mobile skin, so don't expect to see them there.

Main page

The mobile main page is not treated like other pages, and may display different content when configured as a Curated Main Page.

Special tools

Tabview

The Tabview doesn't show the whole content of each page. Instead it shows a preview of some article images (if they exist).

Tabber

Content in tabbers is simply displayed as inline content.

Slider

The slider is changed to display all images in columns and rows.

What to avoid

This list just contains general guidelines.

• Fixed width elements.
• Large inline images.
• Inline CSS styles and custom CSS classes.
• Non-portable infoboxes.
• Tables with more than three or four columns. Table with less columns can still be shown incorrectly if the font-size is too big and the content of the table is too long.

Notes

• The current information on this page has not been reviewed by FANDOM staff and is largely based on recent trial and error deduction. You have been warned.