Pesquisar na Comunidade

O crescente aumento dos dispositivos móveis como tablet e smartphones revolucionou a forma com que os webdesigners programam os sites. Atualmente, ao criar um site deve-se pensar em pelo menos três resoluções diferentes, uma voltada ao smartphone, outra ao tablet e uma terceira para os notebooks e desktops. Nesse contexto, durante o desenvolvimento de um website vem sempre a dúvida na cabeça, como desenvolvo um website para dispositivos móveis? O que fazer? Fazer um site responsivo ou um site mobile? Antes de entrarmos na discussão, cabe conceituarmos dois termos muito falados quando o assunto é websites para dispositivos móveis. Diferença entre site responsivo e mobileVersão mobile:Consiste em criar um site único para notebooks e desktops e outro site exclusivo para celulares. Em suma, podemos dizer que serão criados dois websites, ou seja, teremos duas páginas distintas para cada link do site. Por exemplo teremos www.umsitea.com.br para desktop e mobile.umsitea.com.br para mobile. Em termos de programação, a diferença é que implementaremos uma biblioteca do JQuery conhecida como SiteMobile. Veja no código abaixo um exemplo: Vantagens da versão mobile: Maior liberdade no design: na medida em que você tem um site exclusivo para cada versão, você pode alterar com maior liberdade.Menor possibilidade de erros: desenvolvendo um site exclusivo, você investe todo o conhecimento naquela versão, assim as possibilidades de erro são menores e mesmo que elas ocorram, não vão atrapalhar a versão desktop.Requer menos conhecimento em programação: para desenvolver um site mobile, o programador não necessita ter um conhecimento muito aprimorado em HTML e CSS. O mesmo site que ele já faz para desktop ele fará bem parecido, porém com tamanho de fonte e ícones em tamanhos diferenciados.Versão responsiva: A versão de um site responsivo consiste numa série de ferramentas de programação no sentido de estilizar seu website para as diversas resoluções. A versão responsiva exige do programador um conhecimento profundo sobre HTML e CSS. A utilização de media queries é fundamental. Alguns exemplos do que aplica-se no site responsivo: Reparem nos detalhes, primeiro o uso de @media queries, ou seja, a mesma class container recebe atributos diferentes para resoluções diferentes. Segundo, a maior parte das divs recebe float: left e position: relative, esqueça position: absolute para sites responsivos, e as medidas são setadas em porcentagens. Além disso o html recebe no cabeçalho a meta name=viewport que tem a função de apoiar a abertura do site em todos os dispositivos conforme estipulado pelo CSS. Vantagens da versão responsiva: Melhor indexação pelos mecanismos de busca: os websites com a versão responsiva são melhor indexados pelos motores de busca como (Google, Yahoo e Bing). Eu comprovo isso com o alerta exibido pela ferramenta WebmasterTools do Google em relação a primeira versão do nosso site www.webdesignemfoco.com que possua uma versão mobile, ao contrário do que é hoje em que o site é responsivo. Reparem no alerta: Logo fica claro que os mecanismos de busca não gostam da idéia de se redirecionar um site para outro como ocorre nas versões mobile. Menor trabalho na confecção: fica claro que desenvolver um website é bem mais fácil que dois, então a versão responsiva é menos trabalhosa.Fácil manutenção: enquanto no site mobile é necessário alterar um texto duas vezes, por exemplo, afinal são dois websites, na versão responsiva tudo que alterar no site já será alterado automaticamente em todas as versões.Qual dos dois é melhor?Veja abaixo um comparativo feito pelos programadores da Webdesign em Foco. Mobile Responsivo Indexação no Google 7 10 Manutenção 5 10 Facilidade na solução de erros 9 8 Trabalho para confecção do website 5 9 TOTAL 26 37 Conclusão Apesar do site responsivo exigir do programador um conhecimento mais apurado no tocante a HTML e CSS, ele é o modelo ideal na atualidade. Vídeo-aula Confira também nossa vídeo-aula explicativa sobre esse tema: