Seu layout já é responsivo?

[AngelCosta]

Há um ou dois meses atrás, tomei vergonha na cara e passei a fazer algumas mudanças no layout do Netmundo - ainda não estão no ar. Sempre antes de fazer mudanças deste porte começo a fazer uma devassa em sites como o Hongkiat, Smashing Magazine, SEOMoz e similares. São as minhas referências em termos de Webdesign e SEO. A parte do SEO eu já sabia como dar jeito.

 

O meu problema foi decidir se já estava na hora de lançar uma versão para celular. Ou pior ainda, uma versão responsiva do site. Se você mora em marte ou não está por dentro da área de desenvolvimento web, responsividade é o que há, como diria meu amigo Perroud. Layout responsivo é aquele que se adapta a tela na qual está sendo mostrado.

 

Por exemplo, vá até o site http://www.smashingmagazine.com/ e brique com a janela do seu navegador, redimensionando-a. Você vai notar que o layout muda conforme o tamanho da janela. Isto é um layout responsivo.

 

Mas se você for para o http://www.uol.com.br/ usando o seu navegador e depois usar o seu celular ou tablet vai ver sites distintos. O que significa que há um layout próprio para dispositivos móveis.

 

Os dois dão trabalho, como qualquer site, mas o responsivo é uma dor de cabeça a mais porque trata com alguns conceitos como media queries e outros. Mas há algumas considerações a serem feitas antes de decidir a necessidade de um ou outro modelo.

 

 

Seu público acessa usando o quê?

Fiz um levantamento usando o google analytics para saber a porcentagem de visitantes usando tecnologia móvel para acessar meus quatro sites online. O que muito me surpreendeu foi o fato de o Netmundo e o Portal do Host ter um índice menor que 2%  - sendo que apenas o último é adaptado para dispositivos móveis graças a plugins do Wordpress e skins nativas do Invision Power Board. A surpresa veio do fato de eu esperar que pessoas da área da tecnologia fizessem mais uso da mesma para ter acesso a estes sites.

 

Para não contrariar completamente, o WebAngel, meu blog com dicas para web, apresentou um índice maior, cerca de 4%.

 

E para me deixar completamente com cara de "?", um blog sobre comida/receitas, cujo público eu achava ser leigo (há umas semanas, uma leitora mandou email perguntando se tinha de pagar para ler o blog), me apresentou 8% de usuários usando tablets e celulares.

 

É aqui que você vai estabelecer se vale a pena implementar ou não um layout que beneficie este público. Seria bom também adicionar as estimativas de resolução de tela como parâmetro na decisão final.

Vale a pena?

Minha próxima consideração foi o sistema que eu usava. Infelizmente, meu site é feito em cima do sistema de templates do WHMCS, por uma questão de conveniência. Apesar do template padrão atual ser baseado no Bootstrap, que pode ser responsivo se ativada esta função, vi que seria modificação demais para pouco benefício.

 

Fora a coleta de informações e/ou esclarecimento de dúvidas, não vi motivos para alguém fazer uma compra via celular (talvez via tablet). As janelas extras para pagamento fora do site, inviabilidade da implementação de alguns sistemas de atendimento online acabaram me desanimando e acabei deixando a ideia para lá.

 

Mas eu acredito no benefício da responsividade ou do template exclusivo para usuários móveis mesmo na área de hospedagem. As pessoas procuram informações quando é possível, seja na escola ou no trabalho. É importante que o cliente consiga visualizar estes dados não importa o meio que use.

Soluções prontas

Se você for se aventurar nesta área, sugiro usar algum framework. A maioria tem uma política "mobile-first" (celular primeiro), onde você primeiro define o layout para plataformas móveis, para somente depois chegar ao layout desktop.

 

Se você tem um blog Wordpress, existem vários plugins com esta finalidade, mais especificamente o JetPack. Na mesma linha, deve haver extensões para Joomla e outros CMS com a mesmo propósito.

 

Também existe uma boa diversidade de sites que geram layouts móveis: WireNode, MobiReady, por exemplo.

Aplicativo x Layout

Não confunda layout para celular com aplicativo para celular. O layout para celular é acessado pelo navegador do dispositivo, enquanto o aplicativo é instalado no aparelho e pode ter inúmeras funcionalidades. Para transformar o seu site em aplicativo, tente o Mippin

 

Enfim, eu pretendo eventualmente migrar o Netmundo para um layout responsivo, mas não agora pois não vi expressividade nos acessos e ainda uso o whmcs como base.

 

Alguém aí já aderiu a moda? Alguém pretende?

 

PS: Até onde vi (apenas pelo desktop), as top 10 nacionais não tem layout responsivo. Não verifiquei se tinham layout para celular ou tablet.

[Visitante]

Angélica, essa é uma das coisas que está na minha prioridade para estudo. Pois o acesso de sites pelos dispositivos móveis tem aumentado bastante.

[Visitante]

Bem, já estou usando responsividade faz um tempo. Se precisar é só falar: www.templosite.com

[Visitante]

Eu conhecia como Layout Líquido ou Fluído, e sempre uso nos meus layouts que são de um porte diferente, já alguns clientes preferem o fácil e velho Layout centralizado

[Visitante]

Já tem um bom tempo que estou usando isso em meu site, inclusive no painel do cliente.

[Visitante]

Eu não acho bacana o layout fluído. Para celulares/tablets, a página facilmente passa de 1m de altura. Haja dedo para ficar descendo. É melhor criar uma versão mobile do website.

[Visitante]

[...] Utilizados: • http://portaldohost.com.br/seu-site/seu-layout-ja-e-responsivo • http://tableless.com.br/introducao-ao-responsive-web-design • [...]

[Visitante]

[...] Utilizados: • http://portaldohost.com.br/seu-site/seu-layout-ja-e-responsivo • http://tableless.com.br/introducao-ao-responsive-web-design • [...]

[Visitante]

[...] não é tão simples de implementar, a Angélica do PortaldoHost até abordou esse assunto, leia o artigo e entenda [...]

[Visitante]

[...] não é tão simples de implementar, a Angélica do PortaldoHost até abordou esse assunto, leia o artigo e entenda [...]