Antes e depois
Olá galera,
No protótipo para o novo layout do artigo no ano passado, nós testamos várias coisas diferentes, e nós recebemos vários comentários que foram fundamentais sobre o que devemos tentar e como prosseguir. O protótipo nos ajudou a aprender algumas coisas importantes sobre o que funciona e o que não funciona (por exemplo, remover a barra lateral não funcionou). Nós ainda estamos trabalhando em melhoras graduais ao layout do artigo, mas o nosso plano é focar em aspectos específicos do layout um de cada vez. Esse processo é similar a atualização da barra de navegação global em janeiro, mas levará mais tempo para que todas as mudanças ao layout artigo aconteçam.
Primeiramente na lista estão os pontos de parada no layout receptivo da Wikia, e algumas atualizações relacionadas a tipografia. As mudanças na tipografia acontecerão apenas no maior ponto de parada, o que nós chamamos de "Área de trabalho GG", atualmente definido como displays mais largos do que 1575px. A galeria abaixo mostra alguns exemplos de antes-e-depois que mostram o que mudará no layout da Área de trabalho GG. Clique na galeria e continue lendo sobre as mudanças que nós faremos a tipografia e aos pontos de parada.
Pontos de parada[]
Esta é uma mudança do layout "fluido", onde ao invés de ter pontos de parada definidos para permitir um comportamento mais previsível, o que faz com que seja menos provável que certas predefinições em uma página "quebrem" ou não funcionem direito. O nosso objetivo para pontos de paradas é que eles são ágeis para que a página se adapte a telas maiores, e isso será definido pelo navegador. Por favor, note que as barras de rolagem são consideradas fora das bordas das medidas da tela.
Lista de cada ponto de parada e as larguras de telas correspondentes:
| Ponto de parada | Largura do espaço de conteúdo | Largura da tela (mínimo) | Largura da tela (máximo) | % de tráfego em site completo/tablete |
|---|---|---|---|---|
| Modo retrato (tablete) | 768 px | 768 px | 1063 px | 16,17 % |
| Modo paisagem em desktop/tablete | 1064 px | 1064 px | 1574 px | 49,60 % |
| Área de trabalho GG | 1238 px | 1575 px | ∞ | 34,23 % |
Tipografia[]
Nós queremos focar na leitura e no comprimento da linha que segue as melhores práticas da experiência de usuário (UX) e isso significa adaptar a experiência a visão. Atualmente, na Wikia, só a largura da linha muda muda, mas não a altura ou tamanho da fonte. Com a atualização da tipografia, o tamanho da fonte e a altura da linha mudarão no ponto de parada da Área de Trabalho GG e você pode ver essa tabela abaixo para maiores detalhes. Para o ponto de parada da área de trabalho/tablete, o tamanho de texto é o padrão atual da Wikia. Os únicos aumentos estão no tamanho da área de trabalho GG.
Lista de mudanças tipográficas em cada ponto de parada:
| Desktop/Tablete | Área de trabalho GG | |
|---|---|---|
| (Tamanho/altura da linha) | ||
| H1 - cabeçalho | 28 / 28 | 34 / 34 |
| H2 - cabeçalho | 20 / 22 | 28 / 30 |
| H3 - cabeçalho | 17 / 22 | 22 / 24 |
| H4 - cabeçalho/citações | 15 / 22 | 20 /28 |
| Corpo do texto | 14 /22 | 16 / 26 |
A nossa intenção é aplicar essas mudanças somente a cabeçalhos, corpo do texto e citações básicas. Um dos problemas que nós encontramos, porém, é que se certas predefinições não possuem a classe certa, eles podem ter as mudanças tipográficas aplicadas, o que pode quebrar a predefinição. Nós começamos uma lista de possíveis problemas, as suas causas, e soluções propostas, e a maioria dos problemas pode ser consertada com os nomes de classes corretos ou ajustando o CSS do seu site. Essa lista está localizada em aqui e será um trabalho em andamento quanto mais nós, e usuários como você, editem na Wikia no novo layout.
Como ver pontos de parada e tipografia[]
Se você quiser ver como as coisas ficarão na sua wikia de testes, tudo o que você precisa é um parâmetro. Confira as direções abaixo para ver quais parâmetros você precisa para pré-visualizar cada elemento.
Para pré-visualizar pontos de parada e tipografia
Adicione ?oasisbreakpoints=1&oasistypography=1 depois do URL
Por exemplo: http://gameofthrones.wikia.com/wiki/Tywin_Lannister?oasisbreakpoints=1&oasistypography=1
As mudanças do ponto de parada entrarão em efeito amanhã (16 de abril) em todo o site. Nós entendemos que as mudanças em tipografia podem levar a consequências desconhecidas, então o nosso plano é lançar essas mudanças no dia 30 de abril. Assim, a comunidade terá algum tempo para experimentar. Se você vir algo quebrado ou esquisito, cheque primeiro a página de ajuda para ver se uma solução é oferecida lá. Se não, por favor, nos avise nos comentários ou através do Especial:Contact.
Atualização 17 de abril de 2015[]
Nós precisamos fazer mais testes para verificar que tudo está funcionando perfeitamente. As mudanças com relação aos pontos de parada não entrarão em efeito até a próxima terça (21 de abril).