criar website para mobile

[Miguel Rocha1 0]

Boas amigos do imasters,

 

Por varias vezes já procurei no google informações para criar uma versão do meu Website em mobile, mas ate agora não consegui encontrar nada que em ajudasse...

 

Que será preciso para criar um site para mobile?

 

Que resolução seria?

 

Essa resolução dava para iphone, ipad, e telemóveis?

 

Como detectaria para redirecionar para versão mobile?

 

Obrigado desde de ja amigos

[mangakah 217]

Você tem duas opções:

 

1ª Opção - Torne seu layout fluído(responsive layout), usando CSS e Javascript para fazer com que os elementos se adaptem automaticamente à telas de qualquer tamanho. Essa é, no entanto, a solução mais complexa de se implementar e manter. Mas se você gosta de desafios, eu recomendo o framework (uma pequena coleção de arquivos CSS e Javascript) Skeleton.

 

2ª Opção - Crie uma versão exclusiva para mobile, geralmente acessível através de um subdomínio, na maioria das vezes usa-se m.seusite.com ('m' de mobile).

 

--

 

As tecnologias necessárias são as mesmas para a versão convencional do site: (X)HTML, CSS, Javascript, etc.

 

--

 

Para detectar se um navegador é mobile ou não, você deve usar uma classe PHP (por exemplo) que faz a analise do cabeçalho Http-User-Agent, consulta um banco de dados e detecta qual o tipo, o nome e a versão do navegador que o usuário está usando.

 

Por exemplo, o navegador Safari para iPhone se identifica assim:

 

Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3

 

Daí dá pra dizer que se trata do Safari 5.1 rodando na plataforma iPhone OS 5.1, portanto, um navegador mobile.

 

Veja:

http://www.browserscope.org/ | https://github.com/tobie/ua-parser

http://browsers.garykeith.com/downloads.asp | https://github.com/GaretJax/phpbrowscap

 

Obs: estou presumindo que você usa PHP, por ser a linguagem de processamento de páginas mais usada.

[Miguel Rocha1 0]

boas mangakah,

 

Qual e a opçao mais usada? Principalmente pelos grandes? ( Ex: Google, Facebook, Twitter, Bing, etc )

[mangakah 217]

Responsive Layout é usado apenas pela comunidade de desenvolvimento front-end. Veja o blog css-tricks.com, por exemplo, redimensione a janela até que ela fique bem pequena e mesmo assim não aparecerá nenhuma barra de rolagem. A propósito, nesse blog há vários excelentes artigos sobre como implementar responsive layout.

 

Mas essa técnica ainda não chegou ao mainstream e os grandes usam uma versão especifica para mobile acessível através de um subdomínio, geralmente 'm'. Ex.:

https://m.youtube.com/

https://m.twitter.com/

[Miguel Rocha1 0]

Boas amigo,

 

Tive a dar uma vista de olhos no meu dreamweaver cs6, e ele tem la essa opçao do responsive layout mas nao gostei muito...

 

Vou de preferencia criar atraves do subdominio...

 

So que tenho algumas duvidas, qual sera a largura minima que devo de utilizar?

 

Eu ja fiz alguns testes com uma largura de " 320px " e exprimentei no opera mobile emulator, so que o resultado nao foi o que eu esperava, no dreamweaver, ficava como eu queria, mas no opera ficava muito pequeno...

 

O que podera ser?

[mangakah 217]

Sobre o problema com o Opera: Em primeiro lugar tenha em mente que esses emuladores não emulam 100% e testar neles não substitui um teste em um dispositivo original. Mas se você ainda não inseriu a meta-tag viewport no HEAD, é bom fazê-lo. Coloque assim:

 <meta name="viewport" content="width=320px">

 

Leia isso:

http://tableless.com.br/manipulando-metatag-viewport/

 

 

Google recomenda Responsive, o que significa que RL é melhor para SEO.

 

http://searchengineland.com/how-to-tune-up-responsive-design-websites-to-improve-mobile-seo-124370

[JotaWeb 0]

Pode parecer dificil, mas não é;

se você tem conhecimento básico do desenvolvimento web consegue fazer sem muita dor de cabeça...

 

a lógica é o seguinte você tem que identificar por qual dispositivo o seu site está sendo acessado - para isso utilize javascript, PHP(ou outra linguagem) ou o css. e tambem deve inserir a tag:

 

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

 

após a identificação você joga o estilo correspondente ao dispositivo utilizado.

ex:

 

no meu projeto atual estou utilizando a seguinte maneira:

criei um css para cada dispositivo,

 

@media screen and (min-device-width : 320px) and (max-device-width : 800px)

 

com isso quando o script identificar que trata-se de um dispositivo dentro destas medidas este estilo será carregado e os outros deixados de lado...

 

Como disse acima existem outras maneiras, mais está é uma solução!

 

Abs