Changes: Help:Mobile web

Revision as of 21:10, 1 May 2014

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

File:Wikia How To - Making Your Wikia Mobile Friendly

This How To video focuses on how to make your wikia look great on the mobile web.

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=wikiamobile 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 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.

Remember

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.

Further help and feedback

Browse and search other help pages at Help:Contents
Check Fandom Community Central for sources of further help and support
Check Contacting Fandom for how to report any errors or unclear steps in this article

@@ Line 1: / Line 1: @@
-As of Nov 2013, '''35%''' of all traffic to Wikia came from mobile devices and that number is only growing. To improve the mobile experience for visitors to your wiki, Wikia 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 via a browser and is optimized for effortless and speedy article content browsing.
+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 wiki looks on mobile?
+So how can you improve how your wikia looks on mobile?
 == A few tips ==
-[[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.]]
+[[File:Wikia How To - Making Your Wikia Mobile Friendly|thumb|right|335 px|This How To video focuses on how to make your wikia look great on the mobile web.]]
-* 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 <code>'''?useskin=wikiamobile'''</code> 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.
+* 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 <code>'''?useskin=wikiamobile'''</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 wikia 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.
+* 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 wiki page will include only what is at the very '''top''' of the page.
+* 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 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.
+* 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 [[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.
-* 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.
+* A final area to consider is your community's [[Help:Wiki navigation|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 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.
+* 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 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.
+* 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.
 == 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.
+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 [[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.
 == See Also ==
-* Learn more about our [http://www.wikia.com/Mobile mobile fleet].
+* Learn more about our [http://www.wikia.com/Mobile mobile apps].
 * Learn how to use [[Help:My_Wikia|My Wikia]].
 * Learn how to [[Help:Game Guides|Game Guides]].