Earlier this month, we revealed a very important fact about Wikia: approximately 50% of all page views across Wikia are coming from mobile devices. That number will continue to grow, so we've made mobile optimization a key focus in 2015.
As we move forward with these mobile-friendly efforts, we're launching a series of "Best Practice" blogs and help pages to assist you in optimizing your communities for mobile devices. You can see a list of the best practice help pages that we currently have on our Mobile Help hub. Some of our big focuses are finding the best ways to optimize tables, stub templates, main pages, and more for mobile devices.
To kick this off, we've posted a Main Page Optimization help guide for our first topic. Main pages are the front door to every community, so they obviously deserve early attention for mobile. There are many ways to make your main page more mobile-friendly, and the new help page—as well as this blog—overviews some of the best solutions we've found.
Mobile emulator tools[]
The most important part of the new help page is about the mobile emulator tool, which allows you to see what your edits look like in mobile even if you're editing from a desktop. Why is this so important? Think about what needs to happen for communities to display on mobile. All of the content, generally contributed in desktop view, is converted into the most mobile-friendly format possible. This poses a big technical challenge, because the mobile device has to squeeze a whole desktop page's worth of content into a much smaller screen.
By using a mobile emulator tool, you can get a good approximation of what your community looks like on a mobile device. This has become a standard tool online as the web prepares for the worldwide mobile revolution. Browsers like Chrome, Firefox, and Safari are all creating tools like this, and we highly recommend using it. It lets you see your contributions through the eyes of many different operating systems, devices, and page layouts. Most importantly, you can interact with the mobile view through scrolling, active links, and more to get a feel for how the page will act on mobile devices. Once you start to use mobile emulators, I think you'll see some mobile-friendly changes in your editing habits. Your mobile community will certainly thank you!
Common issues on main pages[]
Most main pages on Wikia have similar features, many of which have inherent mobile optimization issues. These features include:
- Image headers
- Sliders
- Polls
- Blog lists
One of the issues we've found is that these problems don't have an easy user-based solution. For example, polls can display on mobile devices, but unfortunately can't be voted on from a mobile device. Clearly that's not an ideal situation. The best solution to that problem—building a more mobile-friendly product—isn't something that communities can fix on their own, so we're working to fix that on our end.
That said, the help page does provide some ideas for how to create fixes that act as a compromise between desktop and mobile views. These optimization strategies are something we strongly suggest, but they're not mandatory. Plus, if you can create your own compromise solutions while waiting for our official fix, then that's great too.
If there are elements on your main page that don't look good on mobile, and we didn't address those elements in the help page, please write to us at Special:Contact with the subject "Main Page Optimization." We will address them on a case-by-case basis, and potentially add them to the help page for future reference.
Case study[]
A core part of this new Best Practices series is that we will feature work we've done with a particular community, where we've applied some of the solutions we've found to make them more mobile-friendly. For main pages, we reached out to Monster Hunter Wiki, and the community there was gracious enough to let us work on their main page. Their input was heeded and incorporated into the final product. You can see the results of the Monster Hunter case study on the help page.
Conclusion[]
Our goal with these help pages is to raise awareness about the growing mobile phenomenon. We don't expect every community to adopt all of the suggestions that we make, but we will be working on new products that will help make mobile optimization easier. What we hope is that each community will become more aware of mobile optimization and do their best to change their editing styles to incorporate this important and emerging trend. The solutions that we develop are highly recommended, but if you have your own ideas for your community, and they can be accomplished without CSS or JS (which don't display on mobile), we're all for it!
As always, you can send us comments, questions, and suggestions at Special:Contact. If they're mobile-related, please put "Mobile" in the message title, and be sure to link your community.
What are some ways that you've made your main page more mobile-friendly? Share your mobile-friendly experiences in the comments below!
Click here to follow the Fandom staff blog.
Click here to sign up for the From the Desk of Community email newsletter.
Join our Official Discord server for registered editors!