FANDOM


Did you know the awesome, beautiful content you collectively write is read by over 100 million people all over the world each month? And did you know that over 50% of those people are reading your content on a tablet or mobile phone?[1]

Wikia's best practices will help you build and format your content to look great on any device, be it our rich and dynamic desktop site, our reader-oriented mobile site, or our specialized mobile apps.

What are best practices?

Wikia worked with several experienced admins and community members to establish a set of supported do's and don'ts for wikia content and templates. Our goals are to support and foster the creativity that exists on the Wikia platform today while encouraging modern web practices and standards.

The best practices are easy to add to your existing templates and content. Most of your existing content will continue to look and function exactly as it does today on desktop, but even better on mobile phones and tablets, including our Community Apps. Additionally, abiding with these best practices can improve SEO rankings for your communities and decrease page load times.

There's already a healthy amount of sharing and similarities between communities, but following our best practices will help Wikia identify different content types (infoboxes, navboxes, quote templates, etc.) and display them appropriately to provide world-class reading and editing experiences for existing fragmented elements.

Best practices

Undisplay element/text

Add class="hidden" to make a hidden element in the mobile skin.

Infobox

Infoboxes are one of the most common elements on Wikia article pages across all our communities. To have infoboxes render nicely on mobile devices, use class="infobox" in the top-level table of the infobox's structure.

Example

View Template:Actor Infobox On the Arrested Development wikia for full construction.

{| class="infobox"
|-
[...]
Preview


Quote

A lot of communities include quotes on their article pages. Quotes are great snippets of content that readers love to read and share. There are two options for best practices for quote templates:

  1. Build your quote templates out of divs, not tables and use class="quote" or class="blockquote" in the appropriate div.
  2. Use <blockquote>...</blockquote> tags to construct the template.
Example

View Template:Quote on the Hunger Games wikia for full construction.

<div class="quote">{{{quote content}}}</div>

or

<blockquote>''{{{quote content}}}'' — <cite>{{{speaker}}}</cite></blockquote>
Preview

Table

Tables are more complicated than our other best practices, but improper use of tables can have incredible adverse effects on how article pages render on any device — desktop, tablet, or mobile.

The first best practice for tables is to avoid building and formatting pages entirely out of tables. Tables should only be used to organize and display data, such as a statistical breakdown of a video game weapon or a list of actors in an episode. To achieve specific designs for your article pages, use modern HTML and CSS practices, such as those demonstrated on W3Schools.com.

The second best practice for tables is to avoid nesting tables. Instead, merge cells whenever possible, or abide by W3Schools conventions.

The third best practice for tables is to be reasonable with the number of columns and rows you use to make sure they are easy to read on both desktop and mobile devices. Break up large amounts of data into smaller, easier-to-digest tables.


Coming soon...

The following are best practices you can abide by now, with mobile support coming in 2015:


Notice

Notices are the elements that appear at the top of article page notifying readers and contributors about information related to the article.

To have notices render nicely on mobile, use class="notice" in the top-level element (first div or table) of the notice's structure. To identify which specific category of notice is displaying, include the notice category in the class (example: class="notice spoiler")

There are a variety of types of notices, but the five high level categories Wikia will recognize are spoiler, disambig, stub, maintenance, and informational.

Example

View Template:Gallery on the Tron wikia for full construction.

<div class="notice">
'''[[{{BASEPAGENAME}}|Gallery: {{BASEPAGENAME}}]]'''<br />This page contains images on the Tron Wiki pertaining to [[{{BASEPAGENAME}}]]. [...]
</div>
Preview

Mobile support coming soon!


Navbox

Navboxes are used on many Wikia communities to help readers navigate to related pages. Most are inserted at the bottom of the page.

To have navboxes render properly on mobile devices, use class="navbox" in the top-level element of the navbox's structure. We recommend using nav tags, as seen in the example below.

Example

View Template:Ep Nav S1 on the Scrubs wikia for full construction.

<div class="navbox">
<div class="navbox-title">Season One Episodes</div>
# "[[My First Day]]"
# "[[My Mentor]]"
# "[[My Best Friend's Mistake]]"
# [...]
</div>
Preview

Mobile support coming soon!


Collapsible element

To save space, many communities use collapsible elements to hide navigation and article details behind a "show" button. A lot of these are navboxes, such as these examples:

To have these features render appropriately in mobile and in editing experiences, use class="mw-collapsible" in their construction. Using class="collapsible" will also be recognized. These class can be combined with other classes.

Example

View Template:Navbox at the Lostpedia wikia for full construction.

<div class="navbox mw-collapsible"> 
[...]
</div>
Preview

Mobile support coming soon!


Scrollable element

Similar to collapsible elements, many communities use scrollable elements (usually the Scrollbox template) to have long lists of information appear in a confined box.

To have scrollable content render nicely on mobile, use class="scrollable" in the template's or element's construction. This class can be combined with other classes.

Example

View Template:Scroll box on the Powerlisting wikia for full construction.

<div class="scrollable"> 
[...]
</div>
Preview

Mobile support coming soon!


Questions?

If you have any questions about these best practices, or need help adapting your contents to follow these best practices, please reach out on the Community Central forums or via Special:Contact.

Remember — you can always use the mobile preview inside the source editor to quickly check how your content renders on smartphones.

Notes
  1. Wikia Network — Quantcast.com

Further help and feedback

Template:Help and feedback sectionfi:Ohje:Wikitekstin parhaat käytännöt fr:Aide:Bonnes pratiques wikitexteko:도움말:위키 문법 관행 pt:Ajuda:Melhores práticas para wikitextru:Справка:Викитекст/лучшие примеры

Did you know the awesome, beautiful content you collectively write is read by over 100 million people all over the world each month? For the majority of our communities, most visitors are doing so on mobile devices.

Fandom's best practices will help you build and format your content to look great on any device, be it our rich and dynamic desktop site, our reader-oriented mobile site, or our specialized mobile apps.

What are best practices?

Fandom worked with several experienced admins and community members to establish a set of supported do's and don'ts for wiki content and templates. Our goals are to support and foster the creativity that exists on the Fandom platform today while encouraging modern web practices and standards.

The best practices are easy to add to your existing templates and content. Most of your existing content will continue to look and function exactly as it does today on desktop, but even better on mobile phones and tablets, including our Community Apps. Additionally, abiding with these best practices can improve SEO rankings for your communities and decrease page load times.

There's already a healthy amount of sharing and similarities between communities, but following our best practices will help Fandom identify different content types (infoboxes, navboxes, quote templates, etc.) and display them appropriately to provide world-class reading and editing experiences for existing fragmented elements.

Best practices

Infoboxes

Help:Infoboxes includes information on Fandom's recommended markup for infoboxes, often called "portable infoboxes".

Templates

Help:Template types includes information on how to properly organize your templates to ensure the Fandom mobile skin knows how to best display them.

Tabbers

Help:Tabber includes information on how to create and properly insert a tabber on an article.

Galleries

Help:Galleries, Slideshows, and Sliders includes information on how to create and properly implement and display galleries on articles.

Tables

Improper use of tables can have adverse effects on how article pages render on any device — desktop, tablet, or mobile.

  • Avoid building and formatting pages entirely out of tables. Tables should only be used to organize and display data, such as a statistical breakdown of a video game weapon or a list of actors in an episode. To achieve specific designs for your article pages, use modern HTML and CSS practices, such as those demonstrated on W3Schools.com.
  • Be reasonable with the number of columns and rows you use to make sure they are easy to read on both desktop and mobile devices. Break up large amounts of data into smaller, easier-to-digest tables.

Questions?

If you have any questions about these best practices, or need help adapting your contents to follow these best practices, please reach out for help through the Community Central forums, the Portability Hub, or Special:Contact.

See also

Further help and feedback

Community content is available under CC-BY-SA unless otherwise noted.