The Wikia Mobile Web is the first thing you'll see once you open a wiki on your mobile device. In fact, over 25% of all traffic to Wikia is now from mobile devices and that number is only growing. That's why it's important to design or change your wiki with mobile in mind.
A few tips
- To see how your wiki looks, start by visiting your wiki community with a smartphone. You can also use a shortcut from your desktop by adding ?useskin=wikiamobile to the end of the wiki url. Make sure to minimize 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.
- The most important aspects to consider are whether your wiki pages are clear, simple and flexible. If they have clear hierarchy and a simple layout then your wiki will be more flexible to adjusting on different platforms.
- 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 wiki page will include only what is at the very top of the page.
- 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 allow for the content to be full width above and below it. If multiple images appear together or there’s a 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.
- A final area to consider is your wiki 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.
Do not's
- Some wikis have used the top of the page for warning templates. 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.
- We recommend that you are selective with use of 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.
So...
...what is the most important thing to remember? 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. This results in the best mobile and desktop experiences for all visitors and editors on your community.