Aired April 5, 2013

Mobile devices are becoming more and more a major way of how the world views your wiki. But is your wiki optimized to look good on a mobile device? This webinar overviews Wikia's unique mobile apps (Game Guides and My Wikia) as well as  now to modify your wiki to look and function better on a mobile device.

Slides & Transcript

Mobile Webinar 2013 Slide01
Welcome to the April Webinar - Making your wiki mobile friendly

Mobile Webinar 2013 Slide02

Mobile Webinar 2013 Slide03

Mobile Webinar 2013 Slide04
Mobile Traffic to your wiki

Why is mobile important? As you might notice, mobile devices, apps, and games are everywhere. If you ride the bus, walk or drive, you see people on their mobile phones. At home, work and even in school, mobile devices, are being used, and many of these people are looking at Wikia. In fact, over 20% of traffic to Wikia is now from mobile devices. That means 1 and 5 visitors to your wiki is using a mobile device to view your wiki. In the US, the percentage is even higher at 33%. This is a big part of your audience, and the number is only growing.

Mobile Webinar 2013 Slide05
Mobile Operating Systems

What types of mobile devices are people using to visit your wiki? When we say mobile devices, we are referring to both phones and tablets.. Here you can see a graph breaking down the operating systems of mobile devices, with Apple, the iOS label, taking 60%. This is followed by Android with 35%, and the remaining 5% divided up among other systems. Within iOS, this is iphones as well as ipads. Within android, this includes hundreds of different types of phones as well as tablets such as the google nexus.

Mobile Webinar 2013 Slide06
What makes mobile different?

There are a couple of main areas to consider:

  • The type of mobile device - Phones and tablets are different sizes and often used for different purposes.
  • Screen size - The most distinctive difference between a computer and a mobile device is the screensize. Content that takes up your full computer screen, does not look the same on a mobile device. This is very evident on big tables and galleries. Keeping your content flexible to different screen sizes is one of the most important things to keep in mind when adjusting your wiki for mobile devices. Stanley will talk more about this a bit later in the webinar.
  • Processing power of mobile devices is less than your desktop, and the internet connection is often over a mobile networks 3G, rather than wifi, which means that pages that are slow to load will load even slower on a mobile device
  • User behavior - how and where users are using their mobile devices to consume content. For phones, users generally are getting quick bursts of information on the go. They likely are searching and reading parts of articles, rather than spending dedicated time to reading an entire wiki one sitting.

Because of these technical and design setups, as well as the user behavior differences, we have developed and just released new wikia mobile apps as well as made improvement to the Wikia mobile skin experience. Mira will now take over and introduce you to the Wikia Game Guides App 2.0.

Mobile Webinar 2013 Slide07
Mira Intro!

Mobile Webinar 2013 Slide08
Game Guides 2.0

Game Guides is an App we’ve been working on for the past couple of months! It doesn’t matter if you’re an active user on a gaming wiki or just a user who likes to read content from our gaming wikis, the Game Guide App will change your mobile experience on Wikia! The Game Guides allows you to quickly find information about the game you’re currently playing. The App was developed to enhance your Wikia mobile experience and our main task was: Quick Access to your favorite games and content directly from your mobile device.

While developing the app we were heavily relying on data and analytics. As Sarah mentioned, the data shows that approximately 90% of our users are using iPhones and Android devices, so we focused on serving this user set first. In order to guarantee a great user experience we’ve tested the app on the majority of devices and operating systems. Including but not limited to: iPhone 3G, 3GS, 4, 4S, 5 and also on the top 10 used Android devices on the market.

Mobile Webinar 2013 Slide09
Downloading Game Guides

So how do you get the app? Download it from the app store or Google Play. Just search for Wikia or Game Guides, and you will find the app. Click install, and soon you’ll have the App on your phone.

Mobile Webinar 2013 Slide10
Game Guides Walkthrough

The next group of slides walk you through the iPhone app. The android app is very similar, with a few setting differences, because it is a different platform. When you first start up game guides, you will be presented with a home screen, which includes the 7 top trending gaming wikis on Wikia at that time. However, this list is completely adjustable.Here you can see the main navigation panel from which you can see what wikis are in your game guide app, access your settings and your home screen.

Mobile Webinar 2013 Slide11
Game Guides Walkthrough

In the navigation panel, you can reorder, remove and adjust the apps settings. Here we are looking at screenshots of the iPhone version of the app. The image on the left is the main navigation panel.

To reorder or remove, click on the pencil icon, which the orange arrow is pointing to. This will take you to the middle image, which is the reorder & remove screen. Here you can click on the red circle to remove the game, or on the menu icon, which the green arrow is pointing at, to grab and reorder the games.

To access your settings, click on the settings link, which will bring you to a screen seen on the right screenshot, and provides links to manage your app, learn about licensing and provide feedback. We love to hear your thoughts, so please feel free to submit any thoughts or issues there.

Mobile Webinar 2013 Slide12
Game Guides Walkthrough

Now lets look at how to find a wiki and add it to your game guide app. From your home window you will see the option to add a game. Click here, and you will be brought to a search page. Start typing a name of a gaming wiki, and you will see results begin to appear. Each option displays the name of the wiki and the language the wiki is in. Here you can see our search for Starcraft, which offers results in different languages as well as the wiki for Starcraft 2. Wikia has thousands of wikis, many on similar topics, so we make sure to display those that are similar to your search.

Once you see the wiki you want to add, click the plus button next to the name, and the wiki will be added to your home screen.

Mobile Webinar 2013 Slide13
Game Guides Walkthrough

On the home screen, you will see all of your game guide wikis, and all you need to do is tap the wiki name of the guide you would like to explore. Once you're in the game guide, the home screen there will show you: The info button,The search button, and a content list which you can sort by top picks (default view) and hot (most page views in the last week). Here you can see the game guide for the fallout wiki.

Mobile Webinar 2013 Slide14
Game Guides Walkthrough

So where will these buttons take you?

  • Tap on the Info button to learn more about the wiki that supplies information for the game guide. This description and image is curated by the wiki admin on the Special:Promote page
  • If you are an admin, it’s important to choose a high quality main image and write a good synopsis of your wiki.
  • As a game guide user, you also have the option to let the wiki admin know if and how they can improve their guide.
  • The search button allows you to search within the wiki.

Mobile Webinar 2013 Slide15
Game Guides Walkthrough

To explore the content in the guide, on the home screen click on one of the categories listed. This will take you to a list of subcategories, from which you can access the article page. The article page layout in the app is based off of the mobile skin and you will notice:

  • The content sections are expandable and collapsable based on the page’s table of contents. This allows you to quickly scroll to the section you are most interested in or view the whole page.
  • If the page contains an infobox, this will be at the top of the page, as seen here in the screenshot.
  • Images can be viewed in a larger lightbox by clicking on the image. This allows you to flip easily through other images on the page.

Mobile Webinar 2013 Slide16
Game Guides Walkthrough

At the bottom of the article page, you will see two letter As. A click on this allows you to adjust the display - including the brightness, the font style, size and text alignment.

Mobile Webinar 2013 Slide17
Game Guides Walkthrough

Next to the display option button, is the bookmark button. This allows you to bookmark a page, which will then be added to your personal bookmarks for that guide. You can access your bookmarked articles right from the home screen of that game guide.The most exciting feature of the Game Guide App is certainly the ability for offline browsing. All of your bookmarks are saved for reading even when you are offline. This becomes handy while playing a game and having the walkthrough ready to go, no matter your access to internet. This is one of the features I am most excited about!

Mobile Webinar 2013 Slide18
Customizing Game Guides

Wiki admins can customize what appears in the game guide. There are two pages you should update to make sure your wiki looks great in the app:

  • Special:Promote - The info page is controlled by what is in your wiki’s Special:Promote screen. Its important to include a high resolution photo and to provide a good description of your wiki.

Mobile Webinar 2013 Slide19
Customizing Game Guides

The other page is Special:GameGuidesContent. This is an admin only page, and can be thought of as similar to your wiki’s navigation. It is here where you can adjust what categories appear in your game guides app. Good categorization is key to making a great game guide. Lets look at the example here.

This is a screenshot from the fallout wiki’s Special:GameGuidesContent page. You can see in the top row it says fallout. This upper level row is called a tag, and is what appears on the top level of the content list in the fallout wiki’s game guide. This can be be adjusted to any free form text, but we recommend it include a upper level term, like the game series installments, walkthroughs or something similar. Tags include category groups, and you can add a new tag at the bottom of the page.

Below the tag row, are two columns. The left column is where you add the category that you would like to populate the guide. To the right is the word that is displayed for that category in the content list. As you can see the first row, the category Fallout Quests will be display as Quests. To the far right of each row are buttons to add a photo for the row, delete it or reorder within the guide. If you would like to add a new category, you can do that at the bottom of the page, and move it to whichever section you prefer.

Mobile Webinar 2013 Slide20
Stanley Intro!

Mobile Webinar 2013 Slide21
My Wikia

My Wikia for iPad is the first version of our official flagship app. What wiki users like you do on a daily basis is truly special, so we wanted to maximize the probability that your wikis will be found. We started on the iPad, which is 20% of our mobile traffic and that number is quickly growing.

The first version of the app was created for 2 primary reasons: 1) to help new and existing users find more wikis on topics that they love and 2) to make the reading, browsing and exploration experience of your wiki streamlined, focused on the content, and personalized.

Mobile Webinar 2013 Slide22
My Wikia Tour

My Wikia is available in the App Store. When you install it and open it for the first time, you’ll see a setup screen, where you can choose your favorite wikis through search, or browsing trending wikis across Wikia or within a specific hub like Video Games, Entertainment, or Lifestyle.

Mobile Webinar 2013 Slide23
My Wikia Tour

My Wikia is the name of the App as well as your home screen. Any wiki you favorite will be added to your My Wikia home screen. Your favorite wikis are represented by modules, each with an image and excerpt from a trending article. Your favorite wikis will always be there, but the page will be dynamic with updated content. To dig deeper, simply tap on a wiki.

Mobile Webinar 2013 Slide24
My Wikia Tour

Once in a wiki, you will be presented with the ability to view the content by trending, all-time popular or recently edited. It’s a great way to get a pulse on the community activity, take a look at the all time favorites, and discover new content. You can also click on the wiki name or the chevron next to it, to access the wiki summary dropdown.

Mobile Webinar 2013 Slide25
My Wikia Tour

This dropdown provides access to the wiki navigation, a summary and stats about the wiki. This provides a good overview of the wiki for someone who may be new to it. The summary is pulled Special:Promote, and can be adjusted by admins on the Special:Promote page.

Mobile Webinar 2013 Slide26
My Wikia Tour

So now lets check out an article. Here you see the Barry Zuckerkorn page from the Arrested Development Wiki. Below the page title, you see attribution to the last editor. At the very bottom is the article action bar, which allows you to access the table of contents, the display options, the bookmark button, and sharing via email, facebook, and so on. You will also see something that looks like a scroll bar, called a scrub, and it let’s you quickly jump to other sections of the page.

To have a clean, unobstructed article reading experience, tap once and the article actions will disappear. You can easily scroll through the entire article. Note that each section gets its own page. To keep reading, you can tap on a link or you can simply swipe horizontally to navigate to the next article in sequence. This makes it quick and easy to keep reading your favorite wiki’s content.

Mobile Webinar 2013 Slide27
My Wikia Tour

As you browse through your wiki on My Wikia, there are a couple of things you might notice:

  • Templates & tables are represented by placeholders, which you can click through to see them in their entirety in lightbox
  • While inside of a wiki, you can tap on Search, which allows you search within the currently viewed wiki or across all of Wikia

Mobile Webinar 2013 Slide28
My Wikia Tour

After bookmarking article pages that you like, you can access them by opening the bookmark screen. Once a bookmarked article is open, you can swipe through all the bookmarked articles like your very own personally curated magazine. In your settings you can remove or reorder the wikis in your my Wikia page in case your interests change.

Mobile Webinar 2013 Slide29
Mobile Skin Overview

Mobile Webinar 2013 Slide30
Mobile Skin Features

You see the mobile skin by default each time you visit Wikia on your smartphone. This skin has been designed to optimize the article reading experience on a mobile device, visually and in terms of performance. Here you can see a screenshot from an android device of the Tyrion Lannister page on the Game of Thrones Wiki. You will notice:

  • Infobox appears at the top - you can see the character infobox here for Tyrion, followed by the page content.
  • Right next to the title are social media sharing options.
  • The chevron below the title is the Table of contents, which is collapsed by default to save space. You can open the Table of contents and tap on sections inside to jump to another section of the page
  • Once you read through the first section, you will come to the h2 section headers in a collapsed state. You can tap on these to expand the section, making it easier to navigate through long pages on a small screen. Note that the end of sections also have the option to hide or collapse the recently read section.
  • Below them is the read more section which is expanded by default, allowing you to navigate quickly to related pages, the categories section which is collapsed by default, and article comments if they are enabled on a wiki
  • At the very bottom of every page you will see a footer that contains links to the Wikia hubs, licensing information, and a link to view the full site.

Mobile Webinar 2013 Slide31
Making your wiki mobile friendly

So what can you do to make sure your wiki looks good all our apps, mobile skin, and even the full site, I’d say?

  • Complete your wiki's Special:Promote page. Choose a high quality main image and write a good synopsis of your wiki.
  • Make sure your wiki navigation is organized and functional - This is likely what a new user uses to explore your wiki’s content; if you are a television show, you might want to highlight characters, seasons, and episodes; if you’re a gaming wiki, you should highlight game series installments and walkthroughs for each.
  • If applicable, add multiple images and/or videos to each section of a page. Try to upload high resolution photos (low resolution photos can look super pixelated on retina screens--especially in landscape).
    • A reason why we do not have inline, in-content images in My Wikia is that when you change the size of fonts and screen sizes, you lose that image-text association; an image you intended to be next to a paragraph may appear in the next section. So we’ve pulled all media to be in a carousel at the beginning of a section, so you at least know that an image belongs in that section
  • Use template names that clearly indicate the subject of the template. For example, an infobox for characters most likely should be "Template:Characters." It seems obvious, but it's always good to check. Also, try to be consistent with all the templates that you use. Imagine if you wanted to make one sweeping change across all infoboxes; it would be a pain to deal with if each one had its own nonessential custom features.
  • Be selective with use of tables. With more and more people using mobile devices, the content that you create has to be flexible and adapt to different screen sizes and orientations. Tables are great for organizing data but not ideal for making page layouts. Sometimes, simpler is better. One of our biggest issues is putting tables within tables with tables; it makes your content extremely inflexible
  • Keep things simple and let the content speak for itself.

Mobile Webinar 2013 Slide32
Great examples

There are already a number of wikis doing a great job of formatting articles on mobile. I particularly want to call out:

  • Naruto Wiki - Really cleanly formatted pages, good use of images - enough but not overboard
  • Elder Scrolls Wiki - Very organized content, very formatted articles

Mobile Webinar 2013 Slide33
Future of Wikia Mobile

So what next? This is just the start of our commitment to mobile. A couple of things I can let you know that we are working on:

  • We plan on allowing you to preview the mobile skin and different apps inside of the preview lightbox. In a couple months, when you open the preview lightbox in the editor, you will be able to switch to the mobile skin or a specific app like Game Guides. When you do that, you will also have additional options to view the preview in landscape/portrait orientation or view the content in difference device resolutions

Mobile Webinar 2013 Slide35

Other Webinars

This image was uploaded by FANDOM Staff.

Appears on these pages