Help:Designing a mobile-friendly main page

Did you know that over half of the visits to Wikia are on a mobile device? This goes to show that it's incredibly important to make sure the pages on your wikia display well on mobile devices, as having a page that isn't mobile compatible means that over half of the visitors to your wikia won't be able to read it properly. This also applies to main pages: having a main page that works well on desktop doesn't necessarily mean it works well on mobile, which means that a large amount of people may see a broken page when they visit your main page.

Checking if a page is compatible with mobile devices
It's very easy to check whether or not a page works well on mobile, including main pages. Simply edit the page using the classic editor (more information) and click the "Mobile" preview button.

This will show you exactly what the page looks like on an average mobile device, and will help you to determine what parts of your main page may not work well on mobile. Please note that this feature is unavailable in the VisualEditor, due to the WYSIWYG interface largely removing the need for article previewing.

If you prefer to use the VisualEditor, or if you'd like to see what the main page looks like on different resolutions, a number of major browsers offer mobile browser emulation. Google Chrome comes with free mobile emulation tools, which can be accessed through the developer console. (More information on using Chrome's mobile emulation can be found here.) Safari users can enable similar functionality by selecting Safari > Preferences… from the menu bar, then Advanced > "Show Develop menu in menu bar" in the preferences window. After this setting is checked, the Safari user can select browsers to emulate, including iOS releases of Safari, via the menu bar's Develop > User Agent item.

Common issues on mobile main page features
There are a number of common issues on mobile main pages that may impact the usability of the main page. This section lists a number of these issues and provides ways of solving them.

Image headers
Headers in the form of images that are being displayed through CSS will not show up on the mobile skin. While inserting them directly as images using  tags does mean they show up, they often don't work well on mobile due to their size. The easiest way of fixing this is adding a hidden "mobile header" right below the image header that does show up on mobile, but doesn't show up on desktop. Let's say we have an image header that says "Welcome" and is applied through CSS:

Example of an image header applied through CSS

HTML 

CSS .mainpage-header-welcome { background: url("http://static.wikia.com/middleearthshadowofmordor7723/images/6/66/Mainpage-Header-Welcome.png") no-repeat scroll 0 0 transparent; border-bottom: medium none !important; height: 28px; margin: 21px auto 8px 12px !important; padding-bottom: 0px !important; width: 99%; }

The header on desktop

By simply adding a hidden header below the image header, the text will show up on mobile. Like so:

Example of an image header with a mobile header

HTML  Welcome

The header on mobile

Note how the h2 tag has the "display:none" style applied to it, which tells the browser not to display this element on the page. As the mobile skin strips all styling (and CSS) from tags, however, the element will still show up on the mobile skin. This is a very easy way of hiding elements on desktop but displaying them on mobile. If you use image headers that are being directly inserted into the page using the file tags, consider adding them through CSS instead and using the hidden mobile headers to make sure the headers work well on both desktop and mobile.

Polls
Polls are currently incompatible with mobile display. They can be seen successfully on a mobile device, but cannot be voted on at this time. Wikia's Product team is currently working on a solution to this, so please stay tuned!

Blog List
Though well organized on desktop, the current blog list module does not display well on mobile and it is difficult to differentiate one blog post from another. Blog lists on mobile also tend to take up an inordinate amount of screen real estate.

Optimizing blog list for mobile is fortunately a fairly easy fix. Limit the total number of blog posts to 3 and ensure the preview function for the blog post is removed. The headline will be displayed as linked text and the author of the blog post will still be displayed, making it easy for the reader to navigate regardless of their platform.

Take a look at this side-by-side example to see the difference:

Example of a Blog list optimized for mobile

HTML  Comparison

Sliders
On mobile, all four slider images will be cropped into much smaller square images, centered, and grouped into a square configuration.

Due to limited space in mobile devices, captions must be shortened to be seen, which means captions must be limited to 2-3 words. Note that text on slider images will also likely be lost due to the automatic cropping.

This is another feature the Wikia product team is currently working on. We hope to have a more mobile-friendly version of this feature in the future.

Elements that use JavaScript or CSS
Some wikias use JavaScript and CSS to add customized features to their main page, or to style existing features. Such customizations work very well on desktop, but, unfortunately, they do not work well on mobile, as can be seen below.

Example of an advanced, customized feature on desktop and mobile

While there are workarounds for separating which elements are called to which environment, Wikia users are strongly encouraged to forego JavaScript and CSS implementation and convert existing JS/CSS-customized elements into more universal modules that are more likely to display easily on mobile and future iterations of the Wikia platform.

Larger, text-heavy elements
Push large elements/text-heavy elements to the bottom. General rule of thumb is the more users have to scroll down, the less likely they are to see the content.

Right Rail Vs. Left Rail content
When viewing a Wikia via the mobile skin, content in the right rail will be displayed below content in the left rail/main column. Make sure that essential content, navigation, etc., is in the left rail so that mobile users will be able to access it quickly without having to scroll too much.

Case Study
Check out the following before-and-after comparison of Monster Hunter Wiki on desktop and mobile for an example of what mobile optimization looks like in action.

Monster Hunter Desktop Before and After

Monster Hunter Mobile Before and After

Conclusion
The most important thing to keep in mind about mobile optimization and improving your main page is to stay flexible. There are many different ways to display content. If you find a way that looks good on desktop and mobile, you are improving the experience of the other half of your viewers. In the meantime, Wikia is working to offer our communities the best mobile experience possible. As the saying goes, there’s more than one way to skin a cat.

Further Help & Feedback
de:Hilfe:Gestaltung einer mobil-freundlichen Hauptseite fi:Ohje:Mobiiliystävällisen etusivun suunnittelu fr:Aide:Concevoir une page d'accueil adaptée au mobile ja:ヘルプ:モバイル・フレンドリーなメインページのデザイン ko:도움말:모바일에 최적화된 대문 만들기 pl:Pomoc:Strona główna przyjazna dla urządzeń mobilnych pt:Ajuda:Criando_uma_página_principal_amigável_à_Wikia_Móvel zh:Help:設計一個對行動裝置友善的首頁 ru:Справка:Заглавная страница/оптимизация для мобильных устройств it:Aiuto:Progettare una pagina principale per mobile vi:Trợ giúp:Thiết kế trang chính thân thiện cho di động