Quando projetamos sites e planejamos como o conteúdo desses sites será exibido, geralmente o fazemos com uma situação ideal em mente. As manchetes e as áreas de texto são imaginadas como tendo certos comprimentos, enquanto as imagens que acompanham esse texto são projetadas para exibir em dimensões que permitirão que trabalhem como pretendido no design geral. Mesmo que esses elementos sejam um pouco fluidos como parte de um site responsivo (o que eles deveriam ser), haverá um limite para o quão flexível eles podem ser.
Se você implantar um site em um CMS (sistema de gerenciamento de conteúdo) e permitir que os clientes gerenciem esse site e adicionem novo conteúdo ao longo do tempo, os limites que você criou serão absolutamente testados. Confie no fato de que seus clientes encontrarão maneiras de alterar o site que você nunca sonhou que eles fariam. Se você não considerou situações muito diferentes das ideais com as quais trabalhou no processo de design, o layout desse site pode estar seriamente comprometido. É por isso que é especialmente importante enfatizar o teste de todo o conteúdo do site e os aspectos do layout do site antes de iniciar o site. Aqui estão algumas dicas de como você pode fazer isso.
Tamanhos de imagem de teste
Sem dúvida, a maneira mais comum pela qual as pessoas quebram o layout do site é adicionando imagens de tamanhos inadequados (essa é também a maneira como elas afetam negativamente o desempenho geral de um site e causam lentidão no download). Isso inclui imagens muito grandes e pequenas demais para funcionar como pretendido em seu website.
Mesmo se você usar o CSS para forçar o tamanho dessas imagens em seu layout, as imagens que estão muito fora de escala com as especificações originais do site causarão problemas. Se as dimensões de uma imagem estiverem incorretas, o CSS poderá forçar essa imagem a ser exibida usando a largura e a altura adequadas, mas a própria imagem e sua proporção poderão ficar distorcidas. Isso certamente terá um efeito negativo na aparência do site, pois uma imagem pequena demais será "ampliada" e perderá qualidade. Uma imagem que é muito grande e que é menor com o CSS faz com que ela pareça boa e retenha sua qualidade, mas o tamanho do arquivo pode não ser razoável para a maneira como está sendo usado.
Ao testar o trabalho do seu site, adicione imagens que estejam fora do escopo pretendido. Acrescente CSS e técnicas de imagem responsivas que resolvam esses desafios redimensionando a imagem de acordo ou, no caso de uma taxa de proporção incorreta, considerando também o uso de algo como a propriedade de clipe CSS para cortar a imagem conforme necessário.
Testando Outras Mídias
Além das imagens, teste também outras mídias, como vídeos, em seu site e veja como esses elementos aparecerão em seu layout usando diferentes valores de tamanho e proporção. Mais uma vez, considere a natureza responsiva do seu site e como ele funcionará para diferentes tamanhos de dispositivos e telas.
Testando Títulos de Texto
Depois das imagens, a próxima área do site que causa mais problemas com sites gerenciados por profissionais que não são da web é o título de texto. Essas são as (supostamente) linhas curtas de texto que geralmente iniciam o conteúdo de uma página ou uma seção nessa página. O texto acima deste parágrafo que diz “Testando títulos de texto” é um exemplo disso.
Se você criou um site para acomodar um título como este:
“Testando cabeçalhos de texto”
Mas o seu cliente usa o CMS para adicionar um artigo com um cabeçalho como este:
“Testando cabeçalhos de texto em várias páginas da Web, todos com requisitos de tamanhos diferentes e necessidades do usuário”
Em seguida, seu layout pode não ser capaz de acomodar de forma limpa todo o texto extra. Assim como você deve enfatizar o teste de suas imagens e mídias adicionando entradas que caem bem fora dos tamanhos projetados inicialmente para você, então você deve fazer isso com títulos de texto para ter certeza de que são flexíveis o suficiente para exibir efetivamente até mesmo linhas ultra longas como a um acima.
Comprimentos de texto de teste
Continuando com o assunto do texto, você também desejará testar diferentes comprimentos de texto para o conteúdo principal nas páginas. Isso inclui textos que são muito, muito longos, bem como textos que são muito curtos - o que pode realmente ser o problema que desgasta muitos layouts de páginas.
Como as páginas da Web, por natureza, aumentam de tamanho para acomodar a altura do texto que contêm, as páginas com muito texto geralmente são dimensionadas em altura conforme necessário. A menos que você tenha restringido a altura da página (que você não deveria Se você quiser que sua página seja flexível), o texto extra não deve representar um problema. Muito pouco texto é outro problema - e é o que muitos designers esquecem de testar em seu processo de design.
Um texto muito pequeno pode fazer com que uma página pareça incompleta ou até mesmo quebrada. Desse modo, reduza o conteúdo da página para ver o que acontece nessas instâncias e faça os ajustes necessários no CSS do site para lidar com essas situações.
Teste de Zoom de Página
Pessoas com problemas de visão podem estar usando o recurso Page Zoom de um navegador da Web para aumentar o tamanho da sua página da web. Se alguém aplicar zoom em uma quantidade significativa, seu layout poderá falhar. Esta é uma das razões pelas quais você pode querer usar EMs como a unidade de medida para o tamanho de fonte do seu site, bem como suas consultas de mídia. Como os EMs são uma unidade relativa de medição (com base no tamanho de texto padrão desse navegador), eles são mais propícios a layouts flexíveis de websites flexíveis.
Teste seu website para zoom de página e não pare em um ou dois níveis de zoom.Aumente e diminua o zoom do seu site em vários níveis para garantir que suas páginas reajam como pretendido.
Não se esqueça da velocidade e do desempenho do download
Ao testar as implicações do layout das decisões do cliente, não se esqueça de prestar atenção também no impacto que essas decisões têm no desempenho de um site. As imagens e o conteúdo que esses clientes adicionam podem prejudicar a velocidade de download de um site e destruir seriamente a usabilidade geral do site. Planeje o impacto dessas adições e faça sua parte no processo de desenvolvimento para minimizar esses efeitos.
Se seu website estiver sendo criado com um orçamento de desempenho, compartilhe essas informações com seus clientes e mostre a eles como testar uma página da Web para as métricas de desempenho. Explique a importância de manter esses limites estabelecidos para o tamanho da página e a velocidade de download e mostre a eles como as adições que eles fazem podem afetar o site como um todo. Aproveite o tempo para treiná-los sobre como manter o site funcionando e com boa aparência. Sobre o assunto do treinamento …
O treinamento do cliente é essencial
É importante enfatizar o teste das imagens, texto e outros elementos da página do seu site e criar estilos que considerem instâncias extremas, mas isso nunca substitui o treinamento do cliente. Seu trabalho à prova de balas de um site deve ser, além do tempo que você gasta treinando seus clientes, como efetivamente cuidar e gerenciar seu site. No final, um cliente bem treinado que entenda suas responsabilidades e o impacto das decisões que eles tomam em um site será inestimável para seus esforços em manter esse site funcionando e com a melhor aparência possível.
