FANDOM


Você sabia que mais da metade das visitas do Fandom vêm de um aparelho móvel? Isso mostra que é muito importante ter certeza de as páginas na sua comunidade aparecem bem em aparelhos dispositivos. Ter uma página que não é compatível com o site móvel significa que mais da metade dos seus visitantes não a lerão adequadamente. Isso também se aplica às páginas principais: uma página principal que funciona bem no site completo não significa uma página que funcionará bem no site móvel.

Como conferir se uma página é compatível com aparelhos móveis

É muito fácil verificar se uma página funciona bem no site móvel, incluindo as páginas principais. Basta que você edite a página principal usando o editor clássico, clique no botão "pré-visualização", e selecione "Mobile" (Móvel) no menu pendente. Isso irá lhe mostrar exatamente como a página ficará em um dispositivo móvel, e o ajudará a determinar quais partes da sua página principal não funcionam muito bem no site móvel. Por favor, note que essa função não está disponível no Editor Visual.

Se você preferir usar o Editor Visual, ou se você gostaria de ver como a página principal fica em resoluções diferentes, uma alternativa é usar as ferramentas do Google. Essas ferramentas são grátis e podem ser acessadas atráves do Painel do Desenvolvedor. Para mais informações sobre como usar essas ferramentas, clique aqui.

Problemas comuns em páginas principais no site móvel

Há vários problemas comuns em páginas principais no site móvel que podem afetar a usabilidade da página principal. Essa seção lista alguns desses problemas e sugere maneiras de resolvê-los.

Cabeçalhos com imagens

Cabeçalhos em formatos de imagens que são mostradas através de CSS não serão mostradas na skin do site móvel. Embora inseri-las diretamente usando [[Arquivo:]] não significa que elas vão aparecer, e elas geralmente não funcionam muito bem no site móvel por causa do tamanho. A maneira mais fácil de consertar esse problema é adicionar um "cabeçalho móvel" diretamente embaixo da imagem do cabeçalho. O cabeçalho móvel não aparecerá no site completo:

Exemplo de um cabeçalho com imagem feito via CSS

HTML

<h2 title="Welcome" class="mainpage-header-welcome"></h2>

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%;
}

O cabeçalho no site completo

Shadow of Mordor image header


Basta adicionar um cabeçalho escondido embaixo da imagem para que o texto apareça no site móvel. Assim:

Exemplo de um cabeçalho de imagem com um cabeçalho para o site móvel




HTML

<h2 title="Welcome" class="mainpage-header-welcome"></h2>
<h2 style="display:none;">Welcome</h2>

O cabeçalho no site móvel

Shadow of Mordor image header mobile


Note que a tag h2 tem o estilo "display:none" aplicado a ela, o que diz ao navegador para não mostrar o elemento na página. Já que a skin do site móvel retira todo os estilos (e CSS) das tags, o elemento continuará a ser mostrada na skin do site móvel. Esta é uma maneira muito fácil de esconder elementos no site completo, mas de mostrá-los no site móvel. Se você usa cabeçalhos com imagens que são inseridos diretamente na página usando a tag "arquivo", considere adicioná-los através de CSS ao invés de usar os cabeçalhos escondidos para celular, para ter certeza que eles funcionam tanto no site completo quanto no site móvel.

Elementos que usam JavaScript ou CSS

Algumas comunidades usam JavaScript e CSS para adicionar funções personalizadas às páginas principais, ou para estilizar funções existentes. Tais personalizações funcionam muito bem no site completo, mas infelizmente,e não funcionam no site móvel, como pode ser visto abaixo.

Exemplo de uma função avançada e personalizada no site completo e móvel





Como CSS e JavaScript personalizado não aparecem na skin móvel, não há uma maneira fácil de fazer tais funções funcionarem no site móvel. A melhor maneira é esconder essas funções no site móvel. Esse método requer o uso de <verbatim> tags (mais informações), e também precisa de conhecimento sobre CSS.

Para esconder funções no site móvel, crie uma página MediaWiki e a insira em uma página usando as tags verbatim (clique aqui para aprender como fazer isso), então insira as tags <style> na página MediaWiki para ter certeza que o conteúdo da página é tratado como estilização de CSS. O próximo passo é esconder os elementos que você não quer que apareçam na skin móvel inserindo o estilo "display" para "none" (nenhum). Para garantir que você só está escondendo esses elementos no site móvel, verifique que você está usando "wkMobile" no seletor. Por exemplo, se você quiser esconder um elemento com a classe "exemplo" no site móvel, use o seguinte código:



Exemplo de como usar CSS para esconder um elemento no site móvel




HTML

<div class="exemplo">Esse elemento ficará escondido no site móvel</div>

Conteúdo da página da MediaWiki

<style>
.wkMobile .exemplo {
    display: none;
}
</style>


As tags verbatim inserem o conteúdo da página MediaWiki diretamente na página principal sem retirar quaisquer tags, e o CSS personalizado dentro da página MediaWiki que está dentro das tags de estilo também são diretamente aplicadas a skin móvel. O seletor só é aplicado à classe wkMobile, então a versão do site completa não é mudada e o CSS personalizado é carregado por completo.

Veja também

Interferência de bloqueador de anúncios detectada!


A Wikia é um site grátis que ganha dinheiro com publicidade. Nós temos uma experiência modificada para leitores usando bloqueadores de anúncios

A Wikia não é acessível se você fez outras modificações. Remova o bloqueador de anúncios personalizado para que a página carregue como esperado.