Portability Hub
Register
Advertisement
Checklist

Do you want to know all the steps you can take to make your wiki as mobile-friendly as possible? You’ll find them in this checklist. It tells you which portability hurdles to look out for, and how to avoid them.

Please note:  Since we continuously work on making Fandom portable, this list is still growing. We may add more features and tips that can help you build a better community for your mobile users.

Should you run into problems implementing any of the points on this list, please let us know! Knowing what you find challenging helps us figure out how we can support you better.

Templates[]

  • Make sure as many of your templates as possible are classified properly. Some templates are treated differently in how they are presented on different devices, depending on their classification.
    • Make sure all templates that serve as flags or notices, such as spoiler warnings or stub notices, are marked as the Notice type.
    • Make sure all templates that serve as navboxes are marked as the Navbox type.
    • If you use a template for your list of references, it should be classified as a Citation or References type. However, it is recommended you use <references /> directly in the article content instead without wrapping it in anything.
  • Avoid using pure HTML elements and attributes, as these are less likely to provide a portable experience. Wikitext is often built to incorporate portable experiences in a simple way.
    • Avoid using "width" and "height" HTML attributes in particular. A fixed width and height can make a page element a real nuisance to read on a smaller screen. Instead, these should either be omitted entirely (letting the server decide how to size the element) or use CSS equivalents.
    • <em> and <strong> are good examples that have wikitext equivalents as ''emphasis'' and '''strong''' in particular.
  • Avoid using style="clear: both;" by itself or via Template:Clear, Template:Clr, or {{-}}. These create spacing issues.
  • If you're using references, make sure that you either: use <references /> directly in the article content (without any template or other wrappers) or use a template classified as a References container. Again, using <references /> is recommended. A savvy designer can change how it looks using CSS.
  • Avoid inline styles, IDs or classes and <div> elements in templates, unless the template is classified as a Notice, Navbox, Context Link, References container, or Quote.
    • Portable Infoboxes can not accommodate using inline styles, IDs, or classes at this time; also, using these or the <div> and <span> elements inside Portable Infoboxes is not possible.

(Confused? See here for more information and examples of these template types)

Main pages[]

  • Make sure to add content to your mobile main page. So long as you have it filled with categories and pages, mobile users will see only this version of your main page.
  • Once this condition is met, feel free to use any type of markup you like for the desktop version of your main page.

Article pages[]

  • Make sure all infobox templates used on your wiki are portable.
  • Avoid inline styles, IDs, or classes in your article content (see below for exceptions for table classes). They can make a page look impressive on desktop, but also often prevent it from fitting on a smaller screen.
  • Try adding any CSS you use to style elements on your wiki to MediaWiki:Common.css instead.
  • Avoid any <div> elements in the article content. They are also too restrictive on how your text is displayed to work well on all screen sizes.
  • Instead of using <span>, try using tags that directly achieve the effect you want on the content, i.e. <em> or <strong> to highlight something.

Tables[]

  Main article: Tables
  • Avoid in-line styles and custom classes. This may not render properly in some devices.
  • Avoid nested tables, these cause major issues on portable devices.
  • Use tables only for displaying tabular information not for positioning and design.
  • Use only recommended classes.

Last tips[]

  • We know some of these points are hard to implement. For example, it's tedious to track down every instance of inline styling on a wiki with many pages. You can make sure your future edits comply with these guidelines, however, and fix whatever you find on older articles when you stumble upon them. Every little change will help make your wiki more portable!

Need more info?[]

Advertisement