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 main page using the classic editor (more information), click the "preview" button, and then select "Mobile" on the dropdown menu on top of the pop-up. 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 Google'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 pages
There's 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.

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

As custom JavaScript and CSS are not loaded on the mobile skin, there's no easy way of making such features work on mobile site-wide. The best way to solve this is by hiding these custom features on mobile. This method requires the use of  tags (more information), and also requires CSS knowledge.

To hide features on mobile, create a new MediaWiki page and insert it into a page using the verbatim tags (click here to learn how to do that), then insert  tags on the MediaWiki page to make sure the page's content is treated as CSS styilng. Next, hide the elements you don't want to display on the mobile skin by setting their "display" style to "none". To make sure you only hide the elements on mobile, be sure to use the "wkMobile" tag in the selector. For instance, if you want to hide an element with the class "example" on mobile, use the following code:

Example of the CSS to hide an element on mobile HTML This element will be hidden on mobile.

Content of the MediaWiki page .wkMobile .example { display: none; }

The verbatim tags directly insert the content of the MediaWiki page on the main page without stripping any of its tags, and the custom CSS within the MediaWiki page that is inside of the style tags is also directly applied to the mobile skin. The selector only applies to the wkMobile class, so the desktop version is untouched, as the custom CSS is also loaded on desktop.

Further Help & Feedback
fr:Aide:Concevoir une page d'accueil adaptée au mobile ja:ヘルプ:モバイル・フレンドリーなメインページのデザイン ko:도움말:모바일에 최적화된 대문 만들기 pt:Ajuda:Criando_uma_página_principal_amigável_à_Wikia_Móvel zh:Help:設計一個對行動裝置友善的首頁