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 end up on 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), hit 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.

If you prefer to use the VisualEditor, or if you'd like to see what the main page looks like on different resolutions, an alternative is to use Google Chrome's mobile emulation tools. These tools come with Google Chrome for free, and can be accessed through the developer console. For more information on using Google's mobile emulation, click here.

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 these issues.

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 that's 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 h1 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 enough 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, there's no easy way of making such features work on mobile site-wide. The best solution to solve this is by hiding these custom features on mobile. This method require the use of  tags (more information), and also require 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 page without stripping any of its tags, and as such the custom CSS within the MediaWiki page that is inside of the style tags is also directly applied to the mobile skin. As the selector only applies to the wkMobile class, the desktop version is untouched (as the custom CSS is also loaded on desktop).

Further Help & Feedback
ja:ヘルプ:モバイル・フレンドリーなメインページのデザイン