Sites Responsivos: conheça um pouco mais sobre essa tendência

Hoje em dia os sites são acessados por diversos dispositivos como PCs, notebooks, tablets, smartphones, entre outros. Mas como fazer para que os sites se adaptem aos diversos tamanhos e resoluções?

Marketing Digital

Atualizado em 10/07/2012

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.

Padrões de resolução de acordo com cada dispositivo

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.

Site responsivo sendo visualizado em um computador
Quer receber nossas novidades por e-mail?

Assine nossa newsletter e receba grátis as últimas novidades sobre o WordPress no seu e-mail.

Site Responsivo sendo visualizado em um computador

Quando abrimos o site em um tablet, a informação fica comprimida, sem dificultar a leitura.

Site Responsivo sendo visualizado em um Tablet

Site Responsivo sendo visualizado em um Tablet

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.

Site Responsivo sendo visualizado em um Smartphone

Site Responsivo sendo visualizado em um Smartphone

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.

 

Que tal receber nosso conteúdo por email?

Quer receber nossas novidades por e-mail?

Assine nossa newsletter e receba grátis as últimas novidades sobre o WordPress no seu e-mail.

2 comentários

Deixe uma resposta