Pensando em customizar o design de sua comunidade? Quando mapeando uma estratégia em CSS, você vai querer tomar decisões que sejam amplamente atraentes para receber a maior gama de editores e leitores possível. Aqui estão algumas das melhores práticas que podem ajudar.
Antes de começar, tenha certeza de ler a nossa Política de customização.
Guia[]
Começe com o Designer de temas[]
O jeito mais fácil de personalizar a sua wiki é pelo designer de temas do Fandom. Ele permite que você mude facilmente a paleta de cores básica do site, wordmark, favicon e plano de fundo. Qualquer coisa que puder ser mudada com o designer de temas deve ser mudada com tal ferramenta. Então começe por ai antes de mudar para o CSS.
Cores[]
Evite cores de baixo contraste ou chocantes — especialmente na área de conteúdo. Você quer que as pessoas sejam capazes de facilmente ler os seus artigospara que elas fiquem em sua wiki por mais tempo. Você pode usar websites tais como WCAG Contrast Checker para checar se você está usando um bom contraste.
Começe com o designer de temas antes de escrever em CSS.
Lembre-se:
- A visão não funciona da mesma forma para todos. Um número significatívo de pessoas tem problemas de visão e/ou daltonísmo.
- Dispositívos diferentes se comportam de maneiras diferentes. As cores que você vê em sua tela podem não funcionar tão bem em outras.
- Tenha um bom contraste entre o texto e o plano de fundo.
- Imagens de fundo são legais, mas se você não puder ler o texto em cima delas. Use o recurso de transparência do Designer de temas com cuidado. Adicione também uma cor de fundo apropriada.
- Tente evitar planos de fundo muito saturados.
- Tente não deixar o tamanho da fonte muito pequeno, especial na área principal de texto. É melhor deixar o tamanho de fonte original na área de texto.
Fontes[]
- Fontes customizadas são bem-vindas, mas muitas vezes menos é mais. Evite uma tensão nos olhos. Cuidado sobre onde você tem permissão para alterar o tipo da fonte: Política de customização. É melhor não mudar a fonte do conteúdo das páginas devido que elas ´recisam ser fáceis de ler.
- Você pode encontrar muitas fontes gratuítas que permitem o uso comercial. Talvez você queira dar uma olhada no Google Fonts. Se precisar de ajuda, por favor siga este guia: Importar Google Fonts.
Mantenha-o simples[]
CSS oferece a você uma infinidade de possibilidades para fazer um site dese destacar. Mas você não deve exagerar. O objetivo do CSS é tornar a comunidade amplamente atraente, e um design muito chocante pode espantar novos leitores.
- Use elementos decorativos apenas onde for necessário.
- Evite qualquer coisa muito "chocante" nas páginas. Você pode adicionar alguns efeitos de hover, por exemplo fazer um ícone se destacar quando o cursor estiver sobre ele, mas tenha em mente que as wikis são majoritariamente sobre informação. A wiki, obviamente, deve representar o tópico que está abordando de uma maneira que seja visualmente agradável, mas também de uma maneira que reduza quaisquer distrações ou que afaste o leitor.
Design responsívo[]
As páginas do Fandom possuem larguras fluídas. Isso signifíca que elas mudam de acordo com a largura da janela de seu navegador. Tenha certeza de que o seu design funcione com a variação de larguras da janela de seu navegador durante os testes. Se puder, teste o seu design em um tablet também.
Escreva códigos legíveis[]
Escreva um código que pode ser lido e compreendido facilmente. Pois o seu CSS será com certeza lido por outros usuários em algum ponto:
- anote com comentários claros do tipo
/* Esse código faz x, y e z */(deve ser algo que não apenas você entende com o contexto, mas também qualquer um que irá ler e editar o código sem estar familiarizado com ele) - dar a suas classes customizadas e IDs nomes compreensíveis. Se ela criar uma caixa em algum lugar, considere chamá-lo
.box, invés de.tlk328 - adicione espaçamento e recuo conforme os gostos de sua comunidade — mas escolha um formato e se mantenha com ele
- organize o código logicamente, mantenha o código que afeta a mesma parte da wiki junto.
Links úteis[]
- Ajuda:Política de personalização - Póolítica de customizações autorizadas do Fandom
- W3Schools - um guia online para CSS
- Mozilla Developer Network - uma documentação online sobre CSS
- CSS-Tricks - uma biblioteca online de códigos suportados no CSS
- CanIuse - tabélas de suporte de tecnologias web front-end em navegadores desktop e móveis.
- The W3C CSS Validation Service - isso ajuda a checar por erros de código, similar ao Special:CSS em si.
Mais ajuda e feedback[]
- Navegue e pesquise outras páginas de ajuda em Ajuda:Conteúdos.
- Confira a Central da Comunidade Fandom para fontes de ajuda e suporte adicional.
- Confira o Contatando o Fandom para saber como relatar quaisquer erros ou medidas pouco claras neste artigo.