Jquery Mobile

[ohlele 0]

Olá pessoal, estou desenvolvendo um site que vai usar Design Responsivo funcionando em dispositivos moveis e desktop.

 

Estou usando Jquery Mobile.

 

Estou com dúvidas:

 

1) Jquery mobile funciona bem em dispositivos mobile e desktop juntos, ou seja, posso usar Jquery Mobile direto para os dois, alterando o layout pelo Design Responsive?

 

2) Quanto ao problema de o usuário não estar com o javascript habilitado, o Jquery Mobile não vai funcionar. Como soluciono isso?

Eu tentei <noscript> nos css e funcionou beleza, mas ai os scripts não funcionam.

Como o pessoal resolve isso?

 

Valeu,

 

Abraços.

 

[YFilus 14]

Olá, tudo bem?

 

Olha, nunca vi jQuery Mobile ser usado em sites desktop. Ele é indicado mesmo para criar sites semelhantes a apps nativos (mas nem são tão semelhantes assim).

 

Pode usar? Pode. Só se você quiser que seu site fique parecendo um app mobile, e não se importar pra isso (estilo https://mobilebanking.chase.com/). Mas não recomendo isso.

 

Para fazer um site responsivo eu indicaria CSS puro, sem algum framework. Mas se você não tem ainda segurança para isso, o Bootstrap seria de uma grande ajuda no seu projeto http://getbootstrap.com/

 

Qualquer problema, só avisar!

[ohlele 0]

Legal,

Vou parar de usar o jquery mobile então, gostei dele pelas formatações dos forms, mas beleza.

 

Consegui bons resultados com css puro para o responsivo usando @media.

 

Mais algumas dúvidas.

1) Posso usar o jquery (normal sem ser mobile), pois gosto de trabalhar com o jquery. Não é pesado para mobile?

 

2) Eu testei para carregamento progressivo de imagens o picturefill-master, ele é bom? O que acha?

 

Obrigado

[YFilus 14]

Maravilha!

 

Se você gostou dos formatos dos forms do jQuery Mobile, é só dar uma olhada no código css dele, 'roubar' alguns estilos, e usar no seu site.

 

Pode usar o jQuery sim, apesar de eu também achar ele um pouco pesado para mobile. Porém não vejo uma melhor alternativa de fazer isso.

 

Já tentei em um projeto carregar uma alternativa light do jQuery, o Zepto (http://zeptojs.com/), no mobile, e o jQuery no desktop, mas acabou não dando muito certo. Precisei criar um código diferente para cada plataforma, aí não ajudou muito. Usando o jQuery vai facilitar o trabalho de manutenção do seu código.

 

O que você pode fazer para melhorar a performance do seu site, é colocar todos os scripts no fim da página, e ao invés de carregar o jQuery localmente, faça isso de um CDN, como o do Google.

 

Então lá no fim do código do seu site você pode fazer algo mais ou menos assim:

 

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="/js/meus-scripts.js"></script>

  </body>
</html>

Espero ter ajudado!

Esqueci de falar do picturefill-master. Nunca usei ele mas pela documentação parece ser um ótimo script! O grande vilão dos sites responsivos são as imagens responsivas. Usando ele da forma certa vai ajudar muito o seu site, parabéns.

[ohlele 0]

Legal vou usar dessa forma.

 

Outra questão, tenho lido sobre responsive e sobre a questão de não esconder o conteudo e sim mostrar ou não.

 

Como faço para mostrar um conteudo em uma tela e em outra resolução mostrar outro conteudo.

Ex:

Tela desktop: Menu com textos etc.

Depois em uma tela mobile mostrar só um icone que vai abrir um outro menu quando clica.

 

Ou seja, tem algum segredo para isso?

 

Já vi algo como ajax, mas o problema neste caso é que com o ajax aí o menu não vai ser indexado.

 

Como resolvo isso.

 

 

Obnrigado

[YFilus 14]

Você pode fazer isso pelo próprio css:

 

.show-mobile, .show-desktop { display: none; }

@media screen and (max-width: 768px) {
   .show-mobile { display: block; }
}

@media screen and (min-width: 769px) {
   .show-desktop { display: block; }
}

Só adicionar a classe "show-mobile" ou "show-desktop", no elemento que você deseja que seja específico para mobile ou desktop.

Você só vai precisar alterar os breakpoints de acordo com o seu layout.

 

Qualquer coisa grita!

[ohlele 0]

Beleza,

 

Não estou conseguindo esconder alguns outros conteudos.

 

Ex:

 

1) Esconder uma galeria de imagens. Ela aparece em desktop e não no mobile.

2) Esconder algumas imagens e botões e até textos.

 

Como faço isso, tem algum recurso especial para isso?

Neste caso não precisamos nos preocupar com SEO.

 

Obrigado

[YFilus 14]

Você pode usar a lógica inversa.

Por exemplo, se você quer esconder um elemento no mobile, adicione a classe "show-desktop" e vice-versa.

No caso da galeria, talvez o js sobreescreva o diplay:none no mobile. Nesse caso, adicione uma div por volta da sua galeria.

 

<div class="show-desktop">
    <div class="minha-galeria"></div>
</div>

 

Qualquer coisa grita!

[ohlele 0]

Mas se eu usar o display none, a imagem e js, não serão carregados mesmo assim?

 

Obrigado

[YFilus 14]

Pior que sim.

O ideal era que essa galeria funcionasse também na versão mobile do site.

 

Você pode utilizar algum método para verificar se o acesso é mobile, ou não, e executar um trecho de código específico para cada situação.

 

Aqui vai algumas alternativas para fazer isso, que tenho nos meus favoritos:

https://github.com/serbanghita/Mobile-Detect/

http://detectmobilebrowsers.com/

http://www.apachemobilefilter.org/