Jump to content
Fórum Script Brasil
  • 0

Site responsivo ou site mobile


Webdesignemfoco.Com
 Share

Question

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 mobile

Versã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:

Código Jquery site mobile

Vantagens da versão mobile:

  1. Maior liberdade no design: na medida em que você tem um site exclusivo para cada versão, você pode alterar com maior liberdade.
  2. 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.
  3. 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:

CSS responsivo

Viewport para design 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:

  1. 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:

Erro de fix mobile do webmaster tools

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.

  1. 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.
  2. 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:

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      149.6k
    • Total Posts
      646.2k
×
×
  • Create New...