Fábio Bastos - Desenvolvedor WordPress em BH. Desenvolvimento Front-end e Back-End

Desenvolvedor WordPress, Web Designer e Programador

Adaptando sites para smartphones e tablets


Apesar de parecer algo muito complexo, a criação de sites para mobile não é um bicho de sete cabeças. Muitos pensam que para ter um site que funcione em smartphones ou tablets é preciso ser um desenvolvedor de aplicativos para Android, iOS, Windows Phone, e por aí vai.

Na verdade, a adaptação de uma página para versão em celular pode ser feita de várias maneiras, e quanto mais o site já for elaborado pensando na sua adaptação, menos trabalho o desenvolvedor e o web designer terão.

Já pensou em adaptar seu site para mobileAdaptação de Folhas de Estilo CSS para visualização em Smartphones e Tablets

A maneira mais simples de adaptar um site para navegação em celulares e dispositivos móveis em geral é adaptando o CSS. Dessa forma, é como se o código reconhecesse o usuário que acessou o site e adaptasse o tamanho dos elementos à sua resolução de tela.

Atenção: não estou falando de abrir o site como uma miniatura, que é o que já acontece.

O que acontece nesse caso é que, por exemplo, se o usuário usa um celular smartphone e a resolução de tela é de 340 pixels de largura, automaticamente, no CSS, indicamos que alguns elementos do HTML seriam “escondidos” ou seu tamanho seria diferente para o usuário. Poderíamos colocar os menus em disposição vertical, mudar o tamanho da logomarca, entre infinitas possibilidades.

Redirecionamento do usuário de Smartphones para um subdomínio do site

Outra forma de mobile site é essa. Podemos criar uma nova marcação HTML5 e CSS3 que, na maioria dos casos, funciona muito bem em quase todos os navegadores mobile, porém não prejudicam os usuários que não tenham suporte a essas tecnologias. O redirecionamento é automático, feito com uma simples função, que depende da linguagem de programação, claro. Assim, o sistema identifica o usuário do dispositivo móvel ou celular e o envia para o subdomínio http://m.exemplo-do-site.com.br. Aqui, tudo estaria na pasta “/m” dentro do servidor.

Então, nessa pasta colocaríamos todo o site e a navegação específica para esse tipo de usuário, com layout totalmente diferente e livre do original do site. O conteúdo pode ser trazido do mesmo banco de dados, claro, com um novo front-end.

Uso de Plug-ins em CMSs

Praticamente todos os Sistemas de Gerenciamento de Conteúdo já possuem plug-ins que fazem todo o “trabalho sujo” de adaptar o site para versões mobile. Alguns inclusive já criam o subdomínio “/m” e mandam tudo pra lá. A parte negativa aqui é a limitação de layout.

Vantagens em adaptar sites para celulares e mobiles em geral

Podemos otimizar o conteúdo apresentado, principalmente mostrando somente o que o usuário proveniente de uma busca no mobile teria interesse em seu site. O trabalho de otimização de sites (SEO) para mobile é um campo ainda pouco explorado, e os buscadores já diferenciam sites em versões mobile para a busca feita em dispositivos móveis. Os melhores sites mobile estarão na frente dos concorrentes quando a maioria dos usuários usar smartphones ou tablets, e não estamos longe disso.

 

Pretendo postar tutoriais práticos da criação de sites mobile, principalmente usando o Framework JQuery Mobile, em breve.

Se você tem mais informações sobre o desenvolvimento de sites para dispositivos móveis e queira compartilhar, sinta-se à vontade para postar nos comentários.


Tags: , ,

Uma resposta para “Adaptando sites para smartphones e tablets”

  1. joel disse:

    Olá, gostei muito de suas informações sobre adaptação mobile
    e realmente observei que nos navegadores mobile aparece a letra M. no inicio do dominio do site, não sabia que era por ser um subdominio com uma pasta /m no servidor : )
    sempre acompanho seu site com suas informações sobre o mundo webdesign .
    estou aguardando seus tutoriais sobre adaptação mobile.
    pois irá me ajudar muito

    abraço

Deixe uma resposta