Há algum tempo atrás o acesso a internet acontecia através de PCs ou notebooks. Com o passar do tempo, novos dispositivos foram surgindo e as pessoas deixaram de acessar a internet apenas por PCs ou laptops. Hoje muito se comenta sobre a evolução dos tablets e smartphones e com eles vieram também os diferentes tamanhos e resoluções de telas.
E agora? Como fazer o desenvolvimento de um único site para dispositivos tão diferentes, com tamanhos e resoluções de tela tão variados? Uma solução bem prática é utilizar sites responsivos, ou seja, sites que respondem de acordo com o tamanho de tela que estão sendo acessados.
Como começou essa ideia de site responsivo?
Tudo começou com um artigo do blog A List Apart assinado por Ethan Marcotte, no comecinho de 2010. Onde Ethan fala que nos últimos tempos esteve reunido com diversas pessoas e empresas, que solicitavam sites para iPhone. No entanto, se pensássemos em site para iPhone, depois de um tempo teríamos que pensar em um site para iPad, N90 e assim por diante. Seria praticamente impossível acompanhar toda a evolução dos tablets e smartphones e desenvolver um site específico para cada um deles.
Portanto a sugestão é desenvolver sites que responderão de acordo com a tela do usuário, baseando-se em tamanhos padrões e não em modelos específicos. Onde os elementos poderão se auto organizar de acordo com o tamanho de tela.
Por exemplo, se abrirmos o site em um PC com um monitor de 19 polegadas, o site será mostrado de uma forma, mas se abrirmos o site em um iPhone por exemplo, os elementos deverão se organizar para que o usuário consiga ver o conteúdo de forma clara. Além disso, os botões de conversão deverão ser facilmente clicáveis.
Exemplos de sites responsivos
Para que possamos entender um pouco melhor essa ideia, vamos utilizar o site da FAMAK como base.
Quando abrimos o site em uma tela maior, todo o conteúdo é mostrado, e as informações ficam centralizadas.
Quando abrimos o site em um tablet, a informação fica comprimida, sem dificultar a leitura.
Já quando abrimos o site em um smartphone verificamos que o menu é todo reajustado e o campo para receber as novidades também. Além disso, as últimas novidades são listadas uma embaixo da outra, e não lado a lado, como nas imagens anteriores. Ou seja, o site automaticamente se encaixa no dispositivo do usuário, mudando a aparência e a disposição com base no tamanho da tela em que o site é exibido.
Vantagens dos sites responsivos
Além dos sites responsivos se adaptarem aos diferentes tipos de telas, eles também possuem outras vantagens.
Não é necessário desenvolver um novo site na versão mobile
Como os sites responsivos se adequam aos diferentes tamanhos de tela, não é necessário que o site seja todo duplicado e adequado para os dispositivos mobile, pois um único site atenderá as duas demandas;
Ponto de vista de SEO
Evita conteúdo duplicado, ou seja você não precisará ter uma cópia do site para dispositivos mobile, o que evitará punições dos mecanismos de busca.
Conclusão
A ideia de sites responsivos ainda é nova no Brasil e oferece certo desafio para designers e desenvolvedores web. No entanto com o crescimento de venda dos tablets e smartphone, essa ideia não poderá ser descartada e em breve será a solução para diversos problemas como: forma de exibição do conteúdo, organização dos ícones, entre outros que já estão aparecendo quando acessamos os diversos sites em tablets e smartphone.
Assine nossa newsletter e receba grátis as últimas novidades sobre o WordPress no seu e-mail.
Parabéns pelo artigo. Bem esclarecedor e me ajudou muito.
Ótimo artigo