Criação de Site Responsivo

A criação de um site responsivo frequentemente gera muitas dúvidas e confusões, que vão desde o design até a implementação de técnicas de otimização com códigos limpos e eficientes. A existência de muitos termos técnicos envolvendo a criação de sites responsivos acabam gerando ainda mais dúvidas e receio do cliente no momento de optar por esse tipo de site. Justamente para ajudá-lo a compreender melhor esse assunto, sem muito aprofundamento técnico, é que disponibilizamos esta página.

Antes de mais nada deve-se entender o contexto no qual o conceito de sites responsivos surgiu. Há alguns anos a navegação em sites era feita predominantemente através computadores de mesa e mais adiante por notebooks. Tais equipamentos possuíam frequentemente resoluções e tamanhos de tela bastante próximos, variando de 800x600 pixels a 1280x768 pixels, o que tornava o processo de criação de site relativamente simples. Era comum fazer a criação do site com uma largura de 800 pixels pois dessa forma todos os usuários que acessassem o site, ainda que com uma resolução de tela levemente superior, conseguiriam visualizá-lo perfeitamente.

Com o passar dos tempos surgiram computadores de mesa e notebooks com resolução de 3000x2000 pixels ou até superior. Sites feitos com largura de 800 pixels continuariam funcionando perfeitamente em resoluções mais altas, embora a navegação começasse a se tornar menos intuitiva e fácil. Você certamente já entrou em um site no qual as laterais possuem enormes vazios, isso significa que o site foi feito para uma resolução de tela muito inferior àquela na qual o usuário está utilizando em seu computador. Esse é um problema muito difícil de resolver e é quase impossível fazer um site que não possua espaçamento nas laterais já que no mercado existem muitas resoluções de telas com os mais variados tamanhos de monitores. Apesar disso, tenta-se sempre que possível criar um layout que se comporte da melhor forma possível num computador com resolução média, ou seja, cria-se o site tendo em mente uma resolução média dos equipamentos mais comuns que acessarão o site. Se um equipamento com resolução inferior acessar o site, a barra de rolagem horizontal aparecerá. Por outro lado se um equipamento com resolução superior acessar o site, vazios laterais ficarão visíveis.

Utilizando-se a técnica da resolução média conseguia-se obter bons resultados, até que há alguns anos começou-se a utilizar dispositivos com resoluções de tela muito diferentes do que se estava acostumada a trabalhar. E pior, um número crescente de usuários estavam fazendo uso desses dispositivos, o que tornava imprescindível a criação de sites mais robustos e complexos. Inicialmente resolveu-se esse problema fazendo uso de sites com layouts completamente distintos, conforme o dispositivo utilizado pelo usuário. Na prática, criava-se geralmente 2 sites: um para computadores e notebooks e outro site para dispositivos com resoluções menores. A grande desvantagem é que se fazia necessária a criação e manutenção de 2 sites, com conteúdos duplicados e estrutura bastante diferente. Com o passar do tempo essa alternativa mostrou-se pouco eficiente e cara, principalmente quando surgiram os tablets.

A partir daí, ficou evidente que não seria possível fazer a criação de um site para cada tipo de dispositivo. Por sorte isso ficou claro ainda bem cedo, pois atualmente temos além de computadores de mesa, notebooks, smartphones e tablets temos também outros dispositivos mais modernos como foblets e smartwatches. Seria inviável criar um site para cada dispositivo. Foi então que a linguagem HTML lançou o conceito da utilização da meta tag viewport, responsável por permitir a criação de sites com apenas um único design e que garantiria o correto funcionamento desses sites em todos os dispositivos. Essa meta tag gerava uma emulação de pixels dentro do dispositivo para qualquer valor que se desejasse. Era possível, por exemplo, simular uma resolução de 3000x2000 pixels em um dispositivo com apenas 400x200 pixels. Com algumas alterações no código-fonte do site, essa meta tag garantia que o site funcionasse de forma relativamente previsível em todos os dispositivos. Ótimo!

Mas a evolução não parou por aí. Com o passar do tempo percebeu-se que sites com resoluções mais altas do que a resolução real do dispositivo, apesar de funcionarem bem, não apresentavam uma navegação intuitiva e ágil. Ou seja, a todo momento o usuário era forçado a utilizar o zoom para conseguir clicar em links, ler textos, visualizar imagens... O zoom acabava tornando a navegação mais demorada e frequentemente "quebrava" o design do site, mesmo que ele fizesse uso da meta tag viewport. Foi então que se começou a adotar estratégias de fazer a criação de sites fluídos, ou seja, que se adaptassem completamente ao dispositivo utilizado pelo usuário, ao invés do dispositivo ter que se adaptar ao site emulando resoluções não suportadas. Esse conceito introduziu a utilização da propriedade device-width em conjunto com a meta tag viewport que informava ao navegador para não emular nenhuma resolução de tela, e sim utilizar a própria resolução do aparelho.

Engana-se quem acredita que apenas uma linha de código resolveria o problema. O problema deixou de ficar sob responsabilidade do dispositivo e foi transferido totalmente para o programador e web designer. Agora o dispositivo não iria mais se "esforçar" para se adequar ao site, ele simplesmente exibiria o site com sua resolução nativa e caberia ao responsável pelo site garantir que o mesmo funcionasse corretamente em todos os dispositivos. E agora há ainda um outro problema, enquanto o usuário está navegando pelo site ele pode facilmente alterar a resolução de tela. Como? Girando o dispositivo! Um dispositivo em pé possui uma resolução diferente daquela apresentada quando o dispositivo está deitado. O site além de ter que lidar com os mais variados dispositivos, ainda deve estar preparado para uma alteração súbita da resolução de tela simplesmente porque o usuário decidiu girar o dispositivo.

Foi então que se começou a adotar um outro significado para os sites responsivos com a finalidade de se garantir que a navegação para os usuários fosse otimizada, apresentando uma experiência ágil e natural. A criação de sites com o novo conceito responsivo envolve profissionais bem mais preparados, com vasta experiência nos mais variados dispositivos e atualização constante já que praticamente a cada 2 ou 3 meses surgem novas formas de tornar um site mais intuitivo e manipulável. Esse novo conceito de sites responsivos é tão mais importante do que qualquer outro a tal ponto que grandes buscadores, como Google, estão privilegiando sites que sejam 100% compatíveis com todos os dispositivos na exibição dos resultados de busca.

O tráfego gerado por dispositivos móveis ultrapassa 70%, e em alguns segmentos - como o de entretenimento - pode chegar aos incríveis 90%. Os buscadores perceberam que não bastava apenas entregar um site que contivesse os melhores termos de busca relacionados ao que o usuário digitava, mas sim entregar um site que além de ser relevante fosse fácil de usar e funcionasse bem no dispositivo utilizado pelo usuário. É uma tendência a ser seguida por todos os demais grandes buscadores.

A boa notícia é que a migração de sites para esse novo conceito responsivo muitas vezes é demorada e bastante complexa, fazendo com que sites de pequeno porte consigam migrar muito mais rapidamente e se adequar ao novo conceito de usabilidade móvel. Em questão de dias pode-se obter um tráfego orgânico que nunca fora possível antes. Mas não pense que os grandes sites estão muito atrás, é certo que eles estão investindo pesado na criação de sites responsivos, mas logicamente deverá levar um tempo considerável, pois migrar todo o conteúdo antigo para uma plataforma e linguagem mais moderna não é uma tarefa fácil. Além disso os grandes sites precisam garantir que o novo site responsivo funcionará perfeitamente em todos os dispositivos, precisando conduzir milhares de testes de diversas páginas nos mais variados dispositivos. Isso leva tempo e é por isso que você deve pensar em fazer a criação de um site responsivo o quanto antes. Se seu site é pequeno e com pouco conteúdo, provavelmente numa questão de dias ou semanas já será possível contar com uma versão responsiva plenamente funcional.

Independentemente do que você fará, o importante é não ficar parado esperando a oportunidade passar. Planeje-se, crie metas e estipule prazos para que seu site responsivo possa ser viabilizado dentro do menor tempo possível. Analise o site de seus concorrentes e verifique se eles já estão migrando para a nova tendência de sites responsivos. Se sim, apresse-se. Se não, faça o possível para começar a criação do site responsivo o quanto antes, pois certamente quem começar primeiro aparecerá na frente, principalmente na página de resultados do Google!