O que é um site responsivo

Todos aqueles que utilizam smartphones ou tablets para acessar a internet, em algum momento já devem ter se deparado com sites de difícil navegação por dispositivos móveis (o próprio Google prioriza sites bem adaptados ao celular nos resultados de busca). Em muitos casos, notamos que ao acessar estes mesmos sites por um desktop ou notebook, a aparência muda totalmente para layouts bem projetados e bonitos.

Ocorre que até bem pouco tempo atrás, a maioria dos sites eram desenvolvidos para serem preferencialmente acessados por computadores e, sendo assim, não havia preocupação com os usuários de outros dispositivos. No entanto, com o avanço da internet móvel este quadro vem mudando rapidamente.

Atualmente contamos com a facilidade de criação de sites responsivos, que são aqueles que possuem layout flexível.

Isso significa que nos sites responsivos, os elementos e menus, assim como os textos se reorganizam automaticamente ao tamanho da tela em que o site está sendo exibido. Esta configuração permite ao usuário ter uma melhor experiência de navegação e melhor visibilidade, tendo acesso fácil à todas as áreas e páginas importantes.

Os sites responsivos são utilizados com cada vez mais frequência, uma vez que é contínuo o aumento do uso de dispositivos móveis para acesso à internet. E, com isso, permitindo a estes usuários uma experiência mais agradável ao acessar sites pelo seu celular ou tablet.

Se a sua empresa ainda possui um site que não possui layout responsivo, este é o momento de pensar na troca por um modelo mais atual.

Você pode contratar um webdesigner que poderá desenvolver um novo site responsivo, seja um projeto inteiramente original ou com a customização de temas já existentes em WordPress, Joomla ou outro sistema de gerenciamento de sites- CMS.

De onde veio a necessidade de adaptar

Durante anos, um site era desenhado para uma medida só, porque todo mundo acessava de um computador com tela parecida. Quando o acesso pelo celular cresceu, essa medida única deixou de servir, e as empresas passaram a exibir para metade do público uma página pensada para a outra metade.

A primeira tentativa de resolver foi manter uma versão separada para celular, num endereço próprio. Funcionava, mas dobrava o trabalho e dividia a força do site entre dois endereços. A solução que se firmou foi outra: um site só, que reconhece o tamanho da tela e reorganiza o conteúdo conforme ela.

O que exatamente muda quando a tela muda

A mudança mais visível é a organização em colunas. O que na tela grande aparece lado a lado, na tela pequena passa a aparecer um embaixo do outro. Isso obriga uma decisão que muita gente não toma: qual dos blocos vem primeiro. No computador os dois chegam juntos ao olho, no celular um chega antes do outro.

Mudam também os tamanhos. Texto que é confortável numa tela de vinte e quatro polegadas fica pequeno numa de seis, e botão que se acerta com o cursor não se acerta com o dedo. Um site bem adaptado aumenta o texto e dá área de toque maior aos botões, com espaço entre eles.

E muda o que aparece. Elementos que fazem sentido na tela grande, como menus horizontais longos ou tabelas largas, precisam virar outra coisa no celular. Menu vira lista recolhida, tabela vira bloco que rola de lado ou se reorganiza em cartões.

Adaptar não é a mesma coisa que caber

Existe um resultado intermediário que engana: o site que cabe na tela mas não foi pensado para ela. Tudo aparece, nada quebra, e mesmo assim a leitura é ruim, porque a ordem continua sendo a do computador e os tamanhos continuam pequenos.

A diferença aparece no uso. Se para entender a página a pessoa precisa aumentar o zoom, arrastar para os lados ou rolar muito antes de encontrar o que interessa, o site cabe mas não se adaptou. As razões comerciais para ter um site responsivo só se concretizam quando essa segunda etapa é feita.

Se você já abriu o próprio site no celular e precisou dar zoom para ler alguma coisa, sabe do que estou falando. Costumo ver isso em empresas que juram que o site é adaptado, e ele até cabe na tela, só não foi pensado para ela.

Como testar o seu site sem ferramenta nenhuma

Não é preciso contratar avaliação para ter uma primeira leitura. Pegue o celular, abra o site com dados móveis em vez do wi-fi do escritório, e cronometre quanto tempo leva até aparecer alguma coisa útil.

Depois, tente três coisas como se fosse um cliente: entender em dez segundos o que a empresa faz, encontrar o preço ou a forma de orçamento, e chamar a empresa. Se qualquer uma dessas três exigir esforço, ali está o problema.

Por último, peça para alguém que não conhece a empresa fazer o mesmo teste na frente de você, sem ajuda. É desconfortável e é o teste mais revelador que existe. A ordem em que os olhos percorrem a tela é bastante previsível, e isso está explicado em eye tracking na criação de sites.

Adaptação e velocidade andam juntas

Um site pode se adaptar perfeitamente e ainda assim perder o visitante, porque demorou a abrir. No celular, com conexão de rua, o peso da página conta muito mais do que no computador do escritório.

O item que mais pesa costuma ser imagem enviada no tamanho original. Um site bem construído entrega versões menores para telas menores, em vez de mandar a foto grande e deixar o celular encolher. Esse e outros ajustes estão reunidos em como melhorar o seu site.

Isso é assunto técnico ou assunto de negócio?

A execução é técnica, mas as decisões são de negócio. Definir o que aparece primeiro na tela pequena é escolher o que a empresa quer dizer antes de tudo. Decidir o que sai é escolher o que não é essencial. Nenhuma dessas escolhas se resolve no código.

Por isso, num projeto de criação de sites, a conversa sobre a tela pequena costuma ser a mais útil de todas: é nela que fica claro o que a empresa realmente precisa comunicar, porque não sobra espaço para o que é acessório.

Os pontos de quebra, explicados sem termo técnico

Quando se fala em site que se adapta, existe um conceito por trás que vale entender mesmo sem programar: os pontos em que o layout muda de arranjo. Em vez de encolher tudo continuamente, o site tem algumas larguras em que ele se reorganiza.

Na prática, é como se o site tivesse três ou quatro versões, e escolhesse a mais adequada ao aparelho. Uma para celular em pé, uma para tablet ou celular deitado, e uma para computador. Em telas muito grandes, às vezes há uma quarta, que impede o texto de ficar largo demais e cansativo de ler.

Saber disso ajuda numa conversa com quem executa. Quando alguém diz que o site já está adaptado, cabe perguntar em quantos arranjos ele foi pensado e o que muda de um para o outro. Se a resposta for que apenas encolhe, o trabalho não foi feito.

Perguntas que costumam aparecer

Uma delas é se adaptar encarece o projeto. Encarece pouco quando é decidido no começo e encarece muito quando é pedido no fim, porque aí significa refazer decisões já tomadas. É um caso claro em que a ordem do trabalho muda o preço.

Outra é se dá para adaptar um site que já existe. Depende de como ele foi construído. Sites feitos em plataformas atuais costumam aceitar bem; sites antigos, feitos com estruturas que hoje ninguém mantém, costumam exigir tanto remendo que refazer sai mais barato.

E há a dúvida sobre aplicativo. Aplicativo resolve outro problema, o de uso recorrente por quem já é cliente. Para quem ainda está descobrindo a empresa, o site continua sendo o caminho, porque não exige instalar nada. Se a escolha do executor for o próximo passo, como escolher um webdesigner ajuda a fazer as perguntas certas.

O que costuma quebrar primeiro no celular

Alguns problemas se repetem tanto que já servem como lista de conferência. Tabelas largas, feitas para relatório em tela grande, que empurram a página para o lado inteira. Imagens com texto embutido, que ficam ilegíveis quando reduzem. Janelas de aviso que cobrem a tela toda e cujo botão de fechar é pequeno demais.

Há também o caso dos menus com muitos níveis, que no computador abrem ao passar o mouse. No celular não existe passar o mouse, existe tocar, e um menu construído sobre esse gesto simplesmente não abre. É um erro que passa despercebido porque quem testa costuma navegar direto pela página, sem usar o menu.

Por fim, os vídeos de fundo. Eles funcionam bem numa tela grande com conexão boa e viram peso morto no celular, onde consomem dados, atrasam o carregamento e muitas vezes nem chegam a ser vistos.

Um site que se adapta continua sendo um site que precisa dizer algo

Vale terminar por onde tudo começa. Adaptar resolve a forma, não o conteúdo. Um site perfeitamente ajustado a todas as telas, que não deixa claro para quem a empresa trabalha e o que ela entrega de diferente, continua sendo ignorado.

A adaptação é o que garante que a mensagem chegue legível. Qual é a mensagem, isso vem antes e não se resolve com técnica. Quando as duas coisas estão no lugar, o site deixa de ser cartão de visitas e passa a trabalhar de fato.

Perguntas frequentes

Por Priscila Falchi – Consultoria de Marketing e fundadora da Modernizza Marketing Digital