Incompatibilidade de sites em tablets e celulares

Hoje vou falar novamente do que pra mim é o maior problema atualmente...
Os navegadores dos celulares e tablets, não tem a mesma capacidade dos navegadores de computadores, além disso eles foram desenvolvidos com outra base, o toque...
Enquanto no computador temos teclas, botões e scroller do mouse no tablet temos apenas o toque simples e o toque mais demorado que equivale ao clique direito...
Além disso alguns navegadores não executam conteúdos em flash, e travam quando o javascript tem funções repetidas continuamente, como no caso de setTimeout e setInterval, ao contrário do que acontece nos computadores que quase sempre não tem problema ao executar esses javascripts...
Meu post de hoje vai dar algumas dicas a quem pretende desenvolver sites mais amigáveis pra todas as plataformas, essa é a nova tendência ao meu ver, não creio que seja viável um site para cada plataforma, apesar disso ser o melhor pra aproveitar o ponto forte de cada uma, você pode fazer um site para todas sem perder tanto nesse sentido e economizar muito dinheiro por não fazer um site para cada plataforma...
Eu ainda não sou um grande desenvolvedor de sites para celulares e tablets, porém já tive problemas com alguns sites por incompatibilidade, então posso alertar vocês, pra vocês não cometerem o mesmo erro...

Redimensionamento

Tente criar um site sobre porcentagens, principalmente na largura, criar um site com width 100% quer dizer que ele vai ocupar 100% da tela de qualquer dispositivo...
Lembre-se de colocar no head da página também a tag:
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
Isso faz com que o celular abra a página sem aquela opção de dar zoom, junto com o width 100% fará com que seu site tenha aparência de site pra celular, já falei sobre isso em outro post do blog: http://comofazercerto.blogspot.com.br/2013/04/criar-site-para-celular.html

Menu

Cuidado ao fazer os menus, a tendência agora é o menu estar sempre no topo do site, isso facilita pra quem usa celular, pois se for na lateral ele comerá metade da tela, sobrando a outra metade pra exibir o conteúdo da página, já no menu superior a página aparece em toda a tela...
Como a tela do celular é menor do que a tela de PC, quanto mais sucinto o menu melhor...

Ferramenta de Busca

A simples opção de busca dentro do site oferecido pelo Google ajuda imensamente quem acessa pelo celular, por exemplo, se o menu é extenso demais, talvez seja melhor você deixar apenas a opção de busca, e separar todas as páginas do seu site, assim o Google conseguirá achar cada uma e a pessoa ao entrar no site ao invés de ter que ficar procurando onde apertar, vai direto na busca e digita o que quer... Isso pode ser interessante pra você, experimente...

onMouseOver, onMouseOut, onClick, etc

Isso é muito usado, mas não funcionará em aparelhos com touchscreen, evite usar essas interações feitas a partir de algo que o mouse faz, por exemplo menus que abrem sub-menus quando passa o mouse em cima...
Ao invés de colocar a ação assim: <a href="#" onMouseOver="abremenu()"> coloque assim: <a href="javascript:abremenu();void(0)"> isso fará que após o clique o menu abra... se você quiser você pode manter onMouseOver, assim no computador ao passar o mouse o menu abrirá, já no celular ele abrirá com o toque...

setInverval, setTimeOut

Evite ficar chamando funções a todo momento, faça com que essas funções sejam chamadas após alguma interação do usuário, usar um setInterval com intervalo de 100 milésimos num celular é pedir pra ele reiniciar sem entrar no seu site... Entenda que o processamento dos dispositivos móveis são menores...

Evite javascript e abuse do CSS

Evite usar javascript, pois como já foi dito o processamento de celulares pra esse tipo de código é fraco, já o CSS é executado igual no PC, creio que isso seja porque os desenvolvedores acham que o CSS é melhor que o javascript, realmente é melhor pois o navegador já entra sabendo o que vai fazer, coisa que o javascript pode mudar tudo depois do onLoad da página por exemplo...

Divs com scroll

Não coloque divs com scroll em seu site, ao deslizar o dedo sobre a tela para rolar a página, o dispositivo móvel sempre vai rolar a página toda, não só aquela área do div...

Divs com overflow:hidden
Você pode usar esse tipo de div com um background: url(link) center center, pra fazer o topo da página por exemplo, assim se o topo estiver grande demais o overflow o cortará e o center center fará ele ficar centralizado...

Imagens

Assim como a largura do site, se preocupe com a largura das imagens, se o site for um blog por exemplo, tente colocar imagens reduzidas para aumentarem depois de abertas, nessas imagens menores não esqueça de colocar o max-width:100%, isso fará com que elas não ultrapassem a largura de 100% da tela, pois no caso de celulares até uma imagem de 640x480 pode ultrapassar, podendo estragar o layout do site...

Divs com tamanho máximo

Assim como nas imagens não esqueça de colocar as divs com max-width:100%, pra elas não ultrapassarem os limites da tela, você pode colocar além do max-width o width da div, assim ela tentará implantar o width que você definiu, se esse ultrapassar os 100% então ela o diminuirá, isso é útil pra você aproveitar quem tem monitores maiores, com capacidade de exibir várias divs, sem prejudicar quem tem menores... Exemplo, uma div com 600px de largura provavelmente não caberá no celular, já no Pc você consegue colocar uma do lado da outra...

Target:_blank

Cuidado com o target blank também, pois muitas pessoas que mexem no celular e no tablet não tem conhecimento que existe isso, o que acaba levando a pessoa a abrir várias janelas no navegador do celular, não conseguir voltar, e por ter várias janelas abertas pode até travar e reiniciar o sistema, fazendo com que as chances da pessoa voltar ao seu site diminuam...

Adapte

Como dito acima você pode exibir as divs lado a lado no Pc e no tablet diminuí-las e exibi-las uma em baixo da outra, isso é, você precisa pensar num layout que esse modo de exibir as divs não tenha tanta importância para o design, que mesmo que sejam exibidas uma em baixo da outra, pareça ser o mesmo design visto pelo computador...

Compatibilidades

Evite usar plugins como o do media player, afinal o celular não terá esses plugins, podendo não executar o que você quer... Além disso alguns celulares não exibem gifs animados, fazendo com que a página fique pesada(pois acho que o gif é carregado totalmente), mas aí o gif não sendo animado, faz a pessoa ficar com raiva de ter esperado tanto pra ver tão pouco...

Teste

Assim como cada navegador de computador se comporta de uma maneira diferente ao abrir a mesma página, cada celular tem seu navegador e cada um funciona de maneira distinta, o ideal é você testar a página no maior número de aparelhos possíveis, assim você poderá identificar problemas e corrigi-los...
Busque sempre criar algo que apareça igual em todos dispositivos, mesmo que para isso você tenha que abrir mão de algumas funcionalidades, afinal não há nada pior do que você ter um galaxy tão bom quanto um iphone e só por não ser da apple você não conseguir ver a mesma coisa que a outra pessoa está vendo...

Bom gente, acho que por está bom, essas foram algumas dicas do que vocês não devem fazer e o que vocês podem fazer... Rendam-se, a maioria das pessoas no futuro irão preferir usar os celulares pra entrar na internet, quanto mais rápido seu site se adaptar a essa realidade, melhor pra você!

Se quiserem ver um site que fiz e que usei algumas dessas dicas fica o link: http://belabrasileira.com.br/agatadacopa/index.htm

Não deixem de ler o outro post, prático de como fazer um site pra celular: http://comofazercerto.blogspot.com.br/2013/04/criar-site-para-celular.html

Curte, twitta, chama a vizinha e faz os cambal, ok?rs