FANDOM


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.

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.

Further help and feedback