Os piores erros em site responsivo

Os piores erros em site responsivo

De tanto acompanhar o desenvolvimento de sites customizados por diferentes profissionais, desde 2007,  resolvi reunir as falhas mais frequentes nos projetos. Acredito que o tema renda até um curso ou material para consulta, mas resolvi antecipar aqui os piores erros em site responsivo que já vi. Espero que ajude você e seu time.

O que é o site responsivo

Site responsivo é aquele desenvolvido para se adaptar a qualquer resolução de tela. Este conceito privilegia a experiência do usuário, entregando o mesmo conteúdo na disposição mais adequada para a visualização em desktopo, tablet, celular ou qualquer proporção capaz de exibir a interface. Para isso, os arquitetos da informação e designers de interface se utilizam de algumas técnicas para deixar o layout fluido.

Ao planejar um site responsivo, o profissional deve observar tamanho das caixas, viabilidade de uso de elementos arredondados, degradês, uso de mouse e do dedo, velocidade de carregamento em diferentes conexões de internet, contraste de cliques, tipo e tamanho da fonte entre outros atributos que mantenham a navegação agradável independente do tamanho da tela.

Os piores erros em site responsivo

Ausência de elementos entre as versões

Site responsivo: Ausência de elementos entre versões

Se você acessar esse artigo no computador e consegue ver esta foto e do celular ela não aparece? Este costuma ser um dos maiores pecados de quem desenvolve um site responsivo. No desejo de reduzir a rolagem da tela, é muito comum eliminar algum trecho do conteúdo. O erro é um problema para o usuário e também para o Google que não consegue validar que se tratam da mesma versão. Se o desejo é reduzir drasticamente o volume de informações apresentadas no celular, o melhor dos caminhos é pensar em uma versão m. (m ponto). Ou seja, um site para desktop e outro para o mobile devidamente referenciados para o Google.

Velocidade de carregamento

Site responsivo: Velocidade de carregamento

Se você navegou por sites da época do flash, sabe que beleza era sinônimo de movimento, cores, degradês, recortes em curvas e muita personalidade em cada layout. Para se adequar aos sites responsivos, nós entramos na era do material design e da busca por aproveitamento de recursos. Para desenvolver um site responsivo, é importante pensar que o visitante precisa carregar o site usando internet 4G e até 3G. Tamanho e peso das imagens, volume de fontes e requisições a serem carregadas precisam ser levados em consideração. Um site simples que carrega rápido é melhor do que um site altamente customizado que não é visto até 5 segundos.

Desrespeito ao grid

Site responsivo: Desrespeito ao grid

Entre os designers o uso do bootstrap se tornou popular quando o assunto é site responsivo. Este framework apoia o desenvolvedor na construção de interfaces amigáveis para múltiplas telas usando elementos pré-definidos e já validados para web. Soma-se a isso a adoção de grids e colunas para nortear a distribuição dos elementos na página. São elas que indicam ao desenvolvedor quais são as quebras que devem ocorrer no conteúdo na mudança de tela. Ao desrespeitar o grid, o designer impede a navegação de qualidade entre os dispositivos móveis.

Se você é designer, pega essa dica de configuração para desenvolver seu wireframe responsivo:
Width: 1920px | Collumns: 12 |Gutter: 30 px | Margin: 375 | Área útil: 1545px

Quebra em resoluções principais

Site responsivo: quebra em resoluções principais

O menu funciona no seu computador, mas fica em 2 linhas no notebook do colega. Este é um dos erros mais frequentes nos testes de responsividade. Por este motivo, é importante verificar o comportamento do site inteiro em 3 resoluções de referência. Considere os dispositivos mais acessados pelo seu cliente e adote uma resolução para desktop, uma para tablet e outra para mobile. Pelo menos nestas 3 telas o site deve ficar perfeitamente navegável. Nas intermediárias, a configuração deve se adaptar à referência mais próxima.

Imagens em diferentes proporções

Site responsivo: imagens em diferentes proporções

Eu deveria colocar este aqui no top 3 erros mais frequentes em layout responsivo. É algo que só é percebido na fase de cadastramento de conteúdo e que gera muita dor de cabeça para quem deseja ver o site tão bonito quanto estava no layout. O problema acontece quando uma imagem é exibida em seu tamanho original com uma proporção e em outra totalmente diferente na sua miniatura. Essa escolha gera distorção da imagem (algo que é retângulo precisa ficar quadrado), recorte padrão em uma área que não a valorize (algo que é retângulo precisa ser cortado em quadro a partir do centro). Especialmente nos sites de conteúdo é fundamental que o designer tenha clareza do tipo de imagem que será utilizado para ilustrar. Se for foto de alguém a proporção da maior imagem deve ser a mesma (ou muito próxima) da sua miniatura.

Espero que tenha te ajudado. Quer saber mais sobre site responsivo?

Compartilho abaixo algumas boas referências que recomendo para você que deseja se aprofundar no assunto são:

Assine nossa newsletter para receber novidades sobre o tema:



Posts relacionados

Larissa Lima on FacebookLarissa Lima on Linkedin
Larissa Lima
Graduação em jornalismo, pós-graduação em comunicação empresarial, dezenas de cursos e desde 2001 com o compromisso diário de unir ideia, escopo e equipe para a realização de projetos digitais relevantes.

O espaço é seu: comentário, dúvidas, sugestões