O que são sites responsivos?

Ícones de diferentes dispositivos em cima de uma foto que mostra um desktop.

Conhece isso quando o celular está carregando uma página qualquer da internet, o site carrega devagar e depois a página ainda está super estranha? Para poder ver o conteúdo do site você precisa arrastar a tela para os lados e no geral os textos estão espremidos nos cantos e as imagens estão grandes ou pequenas demais. Não dá nem para ver o conteúdo do site com clareza, porque a experiência é arruinada com o péssimo layout. Logo você se irrita e fecha a página, esperando que a próximo não seja assim.

Todos que já experienciaram isso sabem que não é nada agradável ver um site todo desconfigurado. Parece que está desconfigurado mesmo, mas muitas vezes só não existe a conversão do site na versão desktop para a versão mobile. Mas como assim?

Existem três opções com as quais dá para criar sites para uso mobile: o design responsivo, o dynamic serving e a página de mobile separada.

Neste blogpost vamos falar mais sobre design responsivo e seus prós e contras. Nos próximos posts do blog falaremos também de dynamic serving e da página mobile separada. Explicaremos em blogposts separados o que significa cada versão e no final faremos um post comparando as três tecnologias.

.

Hoje em dia não tem como pensar em desenvolver uma página na internet sem pensar na versão mobile da página, ou pelo menos, sem pensar que o site será acessado também em tablets, smartphones e mais recentemente também em Smart TVs.

Quando for pensar em desenvolver um site na internet, é importante que o site funcione no dispositivo mobile e no tablet, por exemplo, tão bem quanto no computador desktop.

 

 

Venha desenvolver uma solução inteligente com a Ringa!

 

 

A página responsiva e algumas curiosidades

Responsive design, página responsiva ou design responsivo é quando o design corresponde ao formato da tela que ele vai ocupar. O conteúdo de uma página é ajustado automaticamente para ser visualizado em certo dispositivo. E tanto faz em qual dispositivo o conteúdo é aberto, o usuário verá uma tela otimizada. Aqui também falamos um pouco sobre sites responsivos.

Como bônus o Google ainda dá uns pontinhos a mais para as páginas responsivas, pois navegando numa página que usa essa tecnologia o usuário terá uma experiência boa.

Ter uma página responsiva significa ter somente um URL e um código HTML, o conteúdo se adapta ao dispositivo no qual ele está sendo exibido. Em todos os dispositivos estarão as mesmas informações, ainda que não estejam exibidas exatamente na mesma ordem.

.

Blog da Ringa aberto em tela no pc e em celular.

Blog da Ringa no computador desktop e na versão mobile.

 

Neste site você pode inserir os URLs que você quiser e ver como os sites são exibidos em diferentes dispositivos. É interessante observar se realmente todas as informações são mantidas e como o layout do site se comporta. Caso muito conteúdo seja “engolido” e o site não for visualmente bonito, é bom desenvolver um site que se adapte melhor aos diferentes dispositivos.

.

Prós e contras do design responsivo no âmbito mobile

Prós

  • Mais fácil e barato de desenvolver;

  • Um URL para todos os dispositivos;

  • Não necessita de detecção do dispositivo e nem de redirecionamento.

 

Contras

  • Carregar páginas com vídeos muitos longos ou imagens maiores, pode aumentar um pouco o tempo de carregamento do site;

  • Fazer com que usuários baixem conteúdo desnecessário (usuários mobile baixam imagens muito grandes que são para computadores desktop);

  • As telas precisam ser planejadas com muito cuidado, para que todos os usuários nos diversos dispositivos tenham experiências boas;

  • Não dá aos usuários de mobile, por exemplo, uma experiência 100% voltada ao mobile.

 

O Google ainda recomenda a utilização de design responsivo, porque:

  • facilita compartilhamento e vinculação do conteúdo com um único URL;

  • ajuda os algoritmos do Google a atribuir de maneira precisa propriedades de indexação à página;

  • exige menos tempo de engenharia para manter diversas páginas com o mesmo conteúdo;

  • reduz a possibilidade de erros comuns que afetam os sites para dispositivos móveis;

  • não exige redirecionamento para usuários que têm uma visualização otimizada para dispositivos, reduzindo o tempo de carregamento;

  • economiza recursos quando o Googlebot rastreia seu site.

 

Desenvolver um site responsivo é muito importante, mas depende do seu problema e da sua situação atual para ver qual a melhor solução para você. Uma coisa que um site sempre deve ser é user friendly, devendo atender a algumas exigências.

Fique ligado aos posts das próximas semanas, vamos te apresentar os tipos de site dynamic serving e a página mobile separada. Após esses dois blogposts você poderá conferir os três tipos e suas características num único artigo. E se você já quer saber mais ou quer desenvolver um site para a sua empresa, entre em contato conosco por e-mail e nos envie sua dúvida.

2 Dynamic serving

3 Dedicated ou separate website

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *