User blog:TranStanley/Updates to the Wikia Mobile experience

Can you believe it? 2014 is now knocking on the door and we’re anticipating that in this upcoming year, more than half of all Wikia visits will be coming from mobile devices. For many of you, this may seem to be a surprise, especially when thinking about how mobile devices comprised less than five percent of total Wikia visits just a couple of years ago, but the reality is that each and every one of us now shares the responsibility of making sure our wikias are ready for the inevitable dominance of mobile traffic. And let’s not treat this as some change we have to cope with, but a challenging opportunity to get even more fans of our work. Just in case you’re curious, here’s how traffic share stands today:

We are very happy to announce three product updates, released on December 4th, that will help us prepare for next year.

Article/Blog Content Refresh
The existing Wikia mobile web experience for smartphones was developed over two years ago and served us well, carrying us through our journey from five to forty percent of mobile traffic. But aside from minor changes and bug fixes, it has remained relatively unchanged. For the past few months, our Mobile Web team has been hard at work in laying down a solid foundation for exciting new features on the Mobile Skin. It will include the following features:
 * Article and blog sections that are expanded by default: Currently, h2 sections are collapsed because we thought they could serve as Tables of Contents and would make articles easier to navigate on smartphones. Contrary to our initial gut instinct, users were annoyed at having to constantly expand sections to read content, and collapsed h2 sections weren’t effective as Table of Contents for pages with a lot of subsections.


 * A new Table of Contents that follows you around: This will help you effortlessly navigate through page, allowing you to jump to any section or subsection regardless of wherever you are on a page. Just tap on the Table of Contents button to open the panel.


 * Typographical refresh: We took great care in thinking about how we could encourage visitors to browse as much content as possible (and come back) by making the browsing experience a pleasurable one. Research on details such as the average amount of words to display per line was crucial.


 * Article/Blog byline: As part of our efforts to make sure it’s clear to those who are unfamiliar with Wikia that the content they browsing is user generated, the date and username of the last page editor will appear below the article/blog title. If an editor is anonymous, “Anonymous,” appears instead of the editor’s IP address. We’re not robots. Well, most of us, anyway.


 * Supported Infobox template: Before, we were handling infoboxes in a rather hacky way, applying styling to the first table on a page with X amount of rows and columns. We will now apply styling to infoboxes with a class name that contains the term, “infobox.” In addition, by default, infoboxes will display a maximum of ten rows by default to maximize the use of space--longer infoboxes can be expanded to view them in their entirety. We’ll be taking a similar approach to commonly used templates in the future. And if you have suggestions for other commonly used templates (e.g. navboxes), be sure to add them in the Comments section below.

Please note that though we are excited for this mobile web release, this is simply a foundation for more page features that we’ll start seeing early next year. Be on the lookout for more supported templates, supported communication tools, theming, and other contribution features that make sense on smartphones like easy rollback and photo upload.

Mobile source editor
Speaking of contribution features, we didn’t want to end yet another year with no form of article editing on smartphones. All of us can relate to the feeling of seeing a mistake on a page and wanting to change it immediately. And a smaller number of us even share the desire to write entire paragraphs on our smartphones.

We are releasing an experimental source editor for logged in users on the mobile web. You will be able to log in your Wikia account and tap on a pencil button next to an h2 section or subsection. Tapping on a pencil button next to a section or subsection will open a source edit screen for the corresponding section where you are able to make changes and preview the altered section before publishing.We encourage you to play around with this experiment to help us learn about how we can better support mobile editing.

Mobile Preview
We’ve been preaching mobile-friendly contribution best practices, but to be honest, we never equipped you with all of the necessary tools. Making main and article pages look great on all desktop and tablet resolutions is hard enough. Making these same pages look great on smartphones can be even harder, especially without the ability to preview changes. Well, that all changes now.

You will be able to go to the fluid editor preview on your desktop and select “Mobile” in the drop-down to see how your changes will look on a smartphone. Your drop-down selection will be preserved until you change it again or the page is reloaded, so you won’t have to constantly change your selection while you’re iterating on a page edit.

Please understand that these releases change nothing about the mobile-friendly, best practices we have been sharing. Continue to use this help page as a reference. As always, we’re always happy to know if you have any feedback or suggestions on our mobile products, so feel free to share them in the Comments section below. Now let’s get pumped to make the most of 2014!

Happy holidays and mobile-friendly editing from our team to yours.