Community Central
Register
Community Central
No edit summary
m (Interwiki Link: +fr.)
(17 intermediate revisions by 7 users not shown)
Line 1: Line 1:
  +
<gallery type="slideshow" widths="351">
More and more people are visiting FANDOM on mobile devices every day. To improve the mobile experience for visitors to your communities, FANDOM has created what we are calling '''''Mobile Web'''''. The mobile web is the first thing you'll see once you open a wiki on your mobile device's web browser, and is optimized for effortless and speedy article content browsing.
 
  +
MobileEditor1.png|The mobile site is optimized for Android and iPhone users.
So how can you improve how your wiki looks on mobile?
 
  +
MobileEditor2.png|Navigation is available by clicking an icon at the top.
== A few tips ==
 
  +
MobileEditor3.png|Tap the Search icon at the top in order to search the community.
[[File:Wikia How To - Making Your Wikia Mobile Friendly|thumb|right|335 px|This How To video focuses on how to make your wiki look great on the mobile web.]]
 
  +
</gallery>
* To see how your wiki looks, start by visiting your community with a smartphone. You can also use a shortcut from your desktop by adding <code>'''?useskin=mercury'''</code> to the end of the a page's url. Make sure to narrow the window size to simulate a phone screen. A common screen size is '''320 x 480''' pixels, so it’s a good idea to to check out your wiki in different sizes.
 
  +
Fandom offers an optimized '''mobile site''' for viewing communities while on your smartphone or other mobile device. Around half of the visitors to Fandom communities are using a mobile device!
   
  +
The Fandom app is available for free for Android smartphones and iPhone. It delivers news, stories, opinions, reviews, conversations, videos and more on your favorite entertainment topics, as well as wiki articles and Discussions from hundreds of communities in different languages. (Get it on: [https://play.google.com/store/search?q=Fandom&c=apps Android] • [https://itunes.apple.com/us/app/fandom-powered-by-wikia/id1230063803 iOS])
* The most important aspects to consider are whether your community's pages are '''clear''', '''simple''' and '''flexible'''. If they have a clear hierarchy and a simple layout then your wiki will better adjust to different platforms.
 
   
  +
When someone visits Fandom using their phone's browser, they encounter what we call '''mobile web'''. It's a platform optimized for effortless and speedy article content browsing. It's a little different — but only a little — from the experience of reading a wiki on the [[help:Fandom app|Fandom app]].
* What appears at the '''top''' of a page is the first place you should focus your attention. Smartphones have a much smaller content space. This means that the first view of your a page will include only what is at the very '''top''' of the page.
 
   
  +
We've optimized our mobile site for the following devices and operating systems:
* For images, make sure you place an image next to the relevant written content in the editor. Sometimes users move images to another section to better format for desktop display, but on mobile, this means that the images end up getting displayed in the other section, not the one with the relevant content. Remember, as the content size changes, so does the display, so it’s best to keep images with their relevant content. Images that are larger than 30 pixels span the width of the phone screen. This provides a better view of the image and allows for the content to be full width above and below it. If multiple images appear together, or the page includes a [[Help:Galleries|gallery]], the first image will be displayed and by tapping, the other images can be viewed in a lightbox. This ensures that a user who is trying to read content won’t be frustrated by a long column of images. So if you have a favorite image and want to make sure it is shown within the article, make sure it’s standalone or the first image in the gallery.
 
  +
*Android
  +
*iOS (iPhone, iPod)
   
  +
Luckily, the same '''tips that help you improve the way your wiki looks on mobile web''' apply to the Fandom app. Here are a few:
* A final area to consider is your community's [[Help:Wiki navigation|navigation]]. The navigation is likely what a visitor uses to explore your wiki’s content; so keeping an organized and clear navigation will help visitors find important sections on your wiki.
 
  +
  +
== Good things to do ==
  +
=== Actually use mobile web ===
  +
If you personally use your wiki on mobile web, you'll tend to make it look better ''for'' mobile web. Your first order of business? Figure out how to access the mobile web!
  +
  +
* '''Use a real phone when you can.''' If you are fortunate enough to have a choice between a real smartphone and software emulation, always prefer the real deal.
  +
* '''Use Fandom's emulation of mobile web when you don't have a real phone handy.''' Just add <code>'''?useskin=mercury'''</code> to the end of the a page's url. Make sure to narrow the window size to simulate a phone screen. And be aware that this method will never ''precisely'' emulate what's seen on actual phones.
  +
* '''Use the [[Help:Preview|preview]] option when editing'''. This will show you how the page will look on a mobile device ''before'' you save the changes.
  +
* '''Remember that most people around the world don't have large phones'''. A common screen size globally — despite the presence of much wider phones — is still just '''320 x 480''' pixels. A good rule of thumb is that if you can make your wiki work at that lower width, it'll look good on any phone.
  +
=== Page organization ===
 
If your community's pages are '''clear''', '''simple''' and '''flexible''' — if they have a '''clear hierarchy''' and a '''simple layout''' — then your wiki will better adjust to different platforms.
  +
 
What appears at the '''top''' of a page is the first place you should focus your attention. On mobile web, the thing on top is always the infobox. So make sure yours are [[Help:Infoboxes|mobile ready]].
  +
  +
=== Images ===
  +
'''Place images ''next to'' the text they're illustrating.''' It's sometimes tempting to move images to another section to better format for desktop display. But on mobile, this means that the images will no longer illustrate the correct text. Instead, they'll end up confusingly located in a different section.
  +
  +
Here are some other thoughts about images on mobile:
  +
  +
* '''Images that are larger than 30 pixels span the width of the phone screen''' This provides a better view of the image and allows for the content to be full width above and below it.
  +
* '''If multiple images appear together, or the page includes a [[Help:Galleries|gallery]], only the ''first'' image will be displayed.''' Only by tapping will the other images be viewable. This ensures that a user who is trying to read content won’t be frustrated by a long column of images. Want your favorite image to display on mobile? Make sure it’s by itself — or the ''first'' image in the gallery.
  +
=== Navigation ===
  +
Your community's [[Help:Wiki navigation|local navigation]] is an important tool for mobile visitors. Keep it organized, clear, and simple. Use as few words as possible for each heading. And, as always, actually double-check the way it looks on a phone!
   
 
== What to avoid ==
 
== What to avoid ==
  +
=== Hatnotes ===
* Some communities have used the top of the page for warning [[Help:Templates|templates]] or other notices for editors. These can make reading a page confusing and difficult. If a reader has to scroll through multiple templates while looking to learn about a character, they will likely be discouraged. We recommend moving these types of warnings to the talk or policy page. The top of each page on your wiki should include the most important information and encourage the visitor to continue to read.
 
  +
Some communities have used the top of the page for warning [[Help:Templates|templates]] or other notices — sometimes called "hatnotes". These take up a lot of space on a phone, and many mobile readers aren't willing to scroll through them. Consider moving these types of warnings — which really apply to ''editors'' more than ''readers'' — to the talk or policy page. If your community disapproves of moving these sort of templates off the page, please make sure that they're given a [[help:template type|template type]] of '''Notice''' so that your mobile readers won't have to experience them.
  +
=== Tables ===
 
Be selective when using [[Help:Tables|tables]]. They're great for data, but horrible for page layouts. Pages that use tables as layouts end up being a lot more inflexible, and difficult to display. Try to use alternative layout tools, such as sliders, galleries or div tags. These are more flexible and work well with varying content sizes.
   
  +
Even when used properly for data, many tables are too wide, and require swiping to view on mobile web. Please consider carefully whether your table needs as many columns as it has.
* We recommend that you are selective with use of [[Help:Tables|tables]]. Tables are great for organizing data but not ideal for making page layouts. Pages that use tables as layouts end up being a lot more inflexible, and difficult to display. Many tables are too wide, and require swiping to view, rather than allowing for full viewing within the screen. Try to use alternative layout tools, such as sliders, galleries or div tags. These are more flexible and work well with varying content sizes.
 
   
  +
Sure, sometimes breaking up tables isn't possible. But sometimes, you may be able to split a table into two parts — each one with fewer columns — and make them both fit comfortably on a phone.
== Remember ==
 
  +
=== Navboxes ===
Keep things simple and let the content speak for itself. Make sure to check your wiki often from a mobile device and update often to keep your it looking great. When editing a page, you can use the [[Help:Preview|preview]] option to see how it will look on a mobile device before you save the changes. This results in the best mobile and desktop experiences for all visitors and editors on your community.
 
  +
Because navboxes have a widescreen orientation, they just don't fit in a phone held at portrait orientation. You should try to limit the number of navboxes you have on your wiki. Strongly consider whether the navboxes are actually providing a service that categories can't. And always make sure your navboxes have the [[help:template type|template type]] of '''Navbox'''.
== See Also ==
 
  +
* Learn more about our [http://www.wikia.com/Mobile mobile apps].
 
  +
==FAQ==
* Learn how to [[Help:Game Guides|Game Guides]].
 
  +
*'''Can I edit content?'''
  +
**The mobile site interface on legacy wikis doesn't feature an edit button. You can switch to the desktop view via a link at the bottom of a page, however, and edit as you would on desktop. On wikis on the [[Help:Unified Community Platform|Unified Community Platform]] mobile editing is possible.
  +
*'''How much of Fandom is available on the mobile site?'''
  +
**All Fandom wiki communities are available via the mobile site.
  +
*'''Is there any content that I cannot see using the mobile site?'''
  +
**Most pages with layouts of standard text and photos render very nicely on the mobile site. Certain pages, however, are too complex for mobile-friendly presentation, and will appear less gracefully (e.g. multiple column layouts). [[Help:Infobox|Infoboxes]] can be optimized for mobile display by using the newer [[Help:PortableInfoboxes|portable infobox]] markup.
  +
*'''What is the best way to view photos?'''
  +
**When you're on an article page with lots of great photos, simply wait for the page to finish loading, then click on any photo. This will open a photo viewing window, which allows you to click or swipe through every photo on the page.
  +
*<span id="desktopmode">'''Can I switch between mobile and standard views of fandom.com?'''</span>
  +
**Yes. At the bottom of mobile pages is a link labeled 'VIEW FULL SITE'. Tap it to reload the same page that is served to desktop web visitors. If you want to switch back to the mobile skin, go to the bottom of the page, then click on the link 'VIEW MOBILE SITE'. You can also switch to the desktop view by adding <code>?useskin=oasis</code> to the URL, or you can switch to the mobile view by adding <code>?useskin=mercury</code>.
   
 
== Further help and feedback ==
 
== Further help and feedback ==
  +
*[[Help:Mobile|Mobile help index]]
  +
*[[w:c:portability:Differences_between_desktop_and_mobile|Differences between desktop and mobile]] (Portability Wiki)
 
{{Help and feedback section}}
 
{{Help and feedback section}}
 
 
[[es:Ayuda:Web Móvil]]
 
[[es:Ayuda:Web Móvil]]
  +
[[fr:Aide:Internet mobile]]
 
[[ja:ヘルプ:モバイルウェブ]]
 
[[ja:ヘルプ:モバイルウェブ]]
  +
[[ru:Справка:ФЭНДОМ для мобильных устройств]]
  +
[[tr:Yardım:Mobil web]]
 
[[zh:Help:手机网页]]
 
[[zh:Help:手机网页]]
   

Revision as of 22:39, 9 November 2020

Fandom offers an optimized mobile site for viewing communities while on your smartphone or other mobile device. Around half of the visitors to Fandom communities are using a mobile device!

The Fandom app is available for free for Android smartphones and iPhone. It delivers news, stories, opinions, reviews, conversations, videos and more on your favorite entertainment topics, as well as wiki articles and Discussions from hundreds of communities in different languages. (Get it on: AndroidiOS)

When someone visits Fandom using their phone's browser, they encounter what we call mobile web. It's a platform optimized for effortless and speedy article content browsing. It's a little different — but only a little — from the experience of reading a wiki on the Fandom app.

We've optimized our mobile site for the following devices and operating systems:

  • Android
  • iOS (iPhone, iPod)

Luckily, the same tips that help you improve the way your wiki looks on mobile web apply to the Fandom app. Here are a few:

Good things to do

Actually use mobile web

If you personally use your wiki on mobile web, you'll tend to make it look better for mobile web. Your first order of business? Figure out how to access the mobile web!

  • Use a real phone when you can. If you are fortunate enough to have a choice between a real smartphone and software emulation, always prefer the real deal.
  • Use Fandom's emulation of mobile web when you don't have a real phone handy. Just add ?useskin=mercury to the end of the a page's url. Make sure to narrow the window size to simulate a phone screen. And be aware that this method will never precisely emulate what's seen on actual phones.
  • Use the preview option when editing. This will show you how the page will look on a mobile device before you save the changes.
  • Remember that most people around the world don't have large phones. A common screen size globally — despite the presence of much wider phones — is still just 320 x 480 pixels. A good rule of thumb is that if you can make your wiki work at that lower width, it'll look good on any phone.

Page organization

If your community's pages are clear, simple and flexible — if they have a clear hierarchy and a simple layout — then your wiki will better adjust to different platforms.

What appears at the top of a page is the first place you should focus your attention. On mobile web, the thing on top is always the infobox. So make sure yours are mobile ready.

Images

Place images next to the text they're illustrating. It's sometimes tempting to move images to another section to better format for desktop display. But on mobile, this means that the images will no longer illustrate the correct text. Instead, they'll end up confusingly located in a different section.

Here are some other thoughts about images on mobile:

  • Images that are larger than 30 pixels span the width of the phone screen This provides a better view of the image and allows for the content to be full width above and below it.
  • If multiple images appear together, or the page includes a gallery, only the first image will be displayed. Only by tapping will the other images be viewable. This ensures that a user who is trying to read content won’t be frustrated by a long column of images. Want your favorite image to display on mobile? Make sure it’s by itself — or the first image in the gallery.

Navigation

Your community's local navigation is an important tool for mobile visitors. Keep it organized, clear, and simple. Use as few words as possible for each heading. And, as always, actually double-check the way it looks on a phone!

What to avoid

Hatnotes

Some communities have used the top of the page for warning templates or other notices — sometimes called "hatnotes". These take up a lot of space on a phone, and many mobile readers aren't willing to scroll through them. Consider moving these types of warnings — which really apply to editors more than readers — to the talk or policy page. If your community disapproves of moving these sort of templates off the page, please make sure that they're given a template type of Notice so that your mobile readers won't have to experience them.

Tables

Be selective when using tables. They're great for data, but horrible for page layouts. Pages that use tables as layouts end up being a lot more inflexible, and difficult to display. Try to use alternative layout tools, such as sliders, galleries or div tags. These are more flexible and work well with varying content sizes.

Even when used properly for data, many tables are too wide, and require swiping to view on mobile web. Please consider carefully whether your table needs as many columns as it has.

Sure, sometimes breaking up tables isn't possible. But sometimes, you may be able to split a table into two parts — each one with fewer columns — and make them both fit comfortably on a phone.

Navboxes

Because navboxes have a widescreen orientation, they just don't fit in a phone held at portrait orientation. You should try to limit the number of navboxes you have on your wiki. Strongly consider whether the navboxes are actually providing a service that categories can't. And always make sure your navboxes have the template type of Navbox.

FAQ

  • Can I edit content?
    • The mobile site interface on legacy wikis doesn't feature an edit button. You can switch to the desktop view via a link at the bottom of a page, however, and edit as you would on desktop. On wikis on the Unified Community Platform mobile editing is possible.
  • How much of Fandom is available on the mobile site?
    • All Fandom wiki communities are available via the mobile site.
  • Is there any content that I cannot see using the mobile site?
    • Most pages with layouts of standard text and photos render very nicely on the mobile site. Certain pages, however, are too complex for mobile-friendly presentation, and will appear less gracefully (e.g. multiple column layouts). Infoboxes can be optimized for mobile display by using the newer portable infobox markup.
  • What is the best way to view photos?
    • When you're on an article page with lots of great photos, simply wait for the page to finish loading, then click on any photo. This will open a photo viewing window, which allows you to click or swipe through every photo on the page.
  • Can I switch between mobile and standard views of fandom.com?
    • Yes. At the bottom of mobile pages is a link labeled 'VIEW FULL SITE'. Tap it to reload the same page that is served to desktop web visitors. If you want to switch back to the mobile skin, go to the bottom of the page, then click on the link 'VIEW MOBILE SITE'. You can also switch to the desktop view by adding ?useskin=oasis to the URL, or you can switch to the mobile view by adding ?useskin=mercury.

Further help and feedback