As of April 2013, over 40% of all traffic to Wikia came from mobile devices and that number is only growing. To improve the mobile experience for visitors to your communities, Wikia has created what we are calling Mobile Web. The mobile web is the first thing you'll see once you open a wikia on your mobile device's web browser, and is optimized for effortless and speedy article content browsing. So how can you improve how your wikia looks on mobile?
A few tips
- To see how your wikia looks, start by visiting your community with a smartphone. You can also use a shortcut from your desktop by adding
?useskin=wikiamobileto 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 wikia in different sizes.
- The most important aspects to consider are whether your community's pages are clear, simple and flexible. If they have clear hierarchy and a simple layout then your wikia 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 a 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 the page includes 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 community's navigation. The navigation is likely what a visitor uses to explore your wikia’s content; so keeping an organized and clear navigation will help visitors find important sections on your wikia.
What to avoid
- Some communities have used the top of the page for warning 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 wikia 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.
Keep things simple and let the content speak for itself. Make sure to check your wikia often from a mobile device and update often to keep your it looking great. When editing a page, you can use the 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.