Como posso criar um site para celulares

https://stackoverflow.com/questions/624262

05-07-2019
|

Pergunta

Como posso iniciar o desenvolvimento de um site que pode ser browse a partir de telefones móveis? Por exemplo, se você procurar local Gmail a partir de um iPhone o site parece diferente do local normal. Você tem que projetar dois locais diferentes para fazer isso? Como posso saber se o site é acessado por um navegador móvel?

Solução

Você não tem que criar dois locais diferentes, mas você provavelmente vai querer se é importante para permitir que os usuários móveis acessam seu site.

Existem algumas maneiras de lidar com este problema, cada um com vantagens e desvantagens. Estou assumindo que seu site tem suas informações em um banco de dados, e publica os dados usando um conjunto de modelos? (Como um Ruby on Rails ou o site Django; um site PHP, um blog, etc.). Se você tem mão-coded um monte de páginas HTML estáticas, isso vai ser muito mais trabalho intensivo para você

1: Same HTML, diferentes folhas de estilo para a tela e MOBILE

A ideia: Você entregar a mesma estrutura HTML a todas as solicitações. Você cria uma folha de estilo para a tela e um para MOBILE.

Bom: Para você, o programador. É mais fácil para você manter 2 folhas de estilo do que é para manter a 2 locais do molde totalmente separadas.

Bad: Para seus usuários. Um site que é fácil de usar em um dispositivo móvel normalmente é ineficiente para um navegador normal; e sites otimizados para um desktop / laptop, muitas vezes falham miseravelmente em um dispositivo móvel. Obviamente, isso depende de como você codificar suas páginas, mas na maioria dos casos, empurrando seu site normal a um navegador móvel vai ser ruim para seus usuários. (Veja http://www.useit.com/alertbox/mobile-usability.html para obter um resumo de pesquisa de usabilidade recente de Jakob Nielsen em sites móveis.)

2: Manter locais separados

(Gmail mantém ainda mais do que 2 sistemas Eles basicamente têm diferentes aplicações container / modelos que processam os mesmos dados: a versão completa do navegador AJAX; a versão do browser HTML simples; uma versão móvel básica; um aplicativo Blackberry nativo; e uma aplicação nativa do iPhone.)

Este é o padrão emergente para sites que realmente se preocupam com tendo ambos uma presença móvel e desktop. É mais trabalho para você, mas, em geral, é muito melhor para os usuários.

No lado positivo, você provavelmente pode criar um despojado local HTML puro que funciona para móvel e que funciona como um fallback para o usuário web rara que não tem javascript, ou que tem grandes problemas de acessibilidade que os impedem de usar o site "cheio".

Além disso, dependendo da sua base de usuários: os EUA, as pessoas geralmente têm acesso a um desktop / laptop, e usar seus dispositivos móveis para acesso auxiliar. Por exemplo, eu reservar meus bilhetes de avião e de aluguer de automóveis, utilizando o meu computador desktop, mas eu quero olhar o meu código de reserva no meu celular. Em muitos casos, você pode sair com limitando a funcionalidade que você oferece no site móvel, e exigem o computador inteiro para realizar os casos de uso incomuns.

O procedimento básico:

Desenho e Construção UIs para celular e tela.
Inicie os sites em duas URLs diferentes; a convenção emergente é www.yoursite.com para a versão desktop, e m.yoursite.com para a versão móvel. (Isto permite aos usuários navegar diretamente para m.yoursite.com se eles sabem da convenção.)
Em www.yoursite.com, farejar o agente de usuário e teste para ver se o navegador do usuário é móvel. Se assim for, direcionar o usuário para m.yoursite.com.
1. Existem sniffers escritos em várias linguagens de servidor (PHP, Perl, qualquer que seja) que provavelmente você pode usar. Verifique as licenças. Aqui está um exemplo de um sniffer escrito em php .
2. artigo da Wikipedia sobre agente de usuário sniffing : "sites especificamente direcionados para telefones celulares, como da NTT DoCoMo I-Mode ou da Vodafone Vodafone Live! portais, muitas vezes dependem fortemente de agente de usuário sniffing, desde navegadores móveis, muitas vezes diferem muito entre si. muitos desenvolvimentos em navegação móvel têm sido feitos nos últimos anos, enquanto muitos telefones mais antigos que não possuir estes novos tecnologiagias ainda são muito usados. Portanto, webportals móveis, muitas vezes, gerar o código de marcação completamente diferente dependendo do telefone celular usado para navegar eles. Estas diferenças podem ser pequenas (por exemplo, o redimensionamento de algumas imagens para caber telas menores), ou bastante extensa (por exemplo processamento da página no WML vez de XHTML). "
Em m.yoursite.com, fornecer um link de volta para www.yoursite.com. Os usuários que clicam neste link não deve ser redirecionado para o site móvel, e como você conseguir isso depende de sua implementação.

Você pode querer seguir Quirksmode por sua emergente artigos sobre testes móvel.

3: Modelos de saída diferentes blocos de dados, dependendo do agente do utilizador, e a manter as folhas de estilo separadas

Como (2), isso requer que você cheirar o agente do usuário. Ao contrário de (2), você ainda está usando toda a mesma lógica de página e não tem que manter dois locais separados. Isso pode ser bom se você está apenas lidando com um blog ou site que é principalmente sobre a leitura de dados.

Em seu código de modelo, você pode dizer coisas como

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

Isso permite que você principalmente manter um conjunto de arquivos de modelo. Você também pode otimizar as páginas que você está enviando para seus usuários móveis, para que eles não obter uma página inchado grande quando eles só queria ler o seu post ou qualquer outra coisa.

Outras dicas

A maioria dos dispositivos móveis nos dias de hoje apoiar "folhas de estilo móveis" que são simplesmente folhas de estilo alternativas para mostrar as coisas mais simples. Você pode adicionar uma folha de estilo móvel para o seu site de uma forma normal e incluir o atributo media="handheld":

<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />

Em seguida, os estilos se aplica a celulares.

O único problema com este método é se o seu HTML é volumoso, pode demorar um pouco para a página carregar, pois a maioria navegadores móveis são mais lentos (exceto Opera Mini). É por isso que os maiores sites como o Flickr e usar digg locais separados.

Notas adicionais:

volumoso HTML não afeta Opera Mini tanto porque ele usa um proxy que faz o processamento externamente, em seguida, envia uma "imagem" especial para o dispositivo.
Use simples, HTML limpo, em seguida, você pode enviar a mesma para os navegadores normais e dispositivos móveis
Você terá que verificar as combinações de folhas de estilo com atributos media. IIRC adicionar o código acima fará com que navegadores ignorar o primeiro estilo. Se você adicionar media="all" ao primeiro, ambos serão utilizados (e, portanto, você pode substituir os estilos originais, em vez de começar de novo).

Para verificar como uma página web olha em um uso do navegador móvel Opera Mini Emulator

Confira o WURFL projeto. Sua intenção é desenvolvedores ajudar a direcionar vários navegadores de telefone, e começou caminho de volta antes que houvesse Mobile Safari, de volta nos dias de HDML, WAP e XHTML-MP. É up-to-date no entanto, o armazenamento de capacidades de dispositivos modernos, como iPhone. Tem de dados sobre mais de 400 dispositivos, e tem bibliotecas em Java, PHP, Perl, Ruby, Python, NET, C ++. Dependendo de como grande você deseja direcionar seu aplicativo móvel É algo para olhar. Aqui está uma lista de sites que usam WURFL.

Outro projeto relacionado escrito por Luca Passani (o co-fundador e mantenedor do WURFL) é Switcher . Você pode usar isso para redirecionar automaticamente para a versão móvel do seu site.

Mantenha-o simples, pense opera mini e você vai obtê-lo direito. (IPhone tem mais fora de um navegador normal, ...)

foco no conteúdo
Evitar plugins
Siga as normas da web
Separar o conteúdo do layout / design, uso css tanto quanto posible.
Use texto e imagens.

Adicione o resto dos sinos e assobios, se for preciso, mas certifique-se o site: s conteúdo está sempre disponível, mesmo quando os sinos e assobios estão desligados. Se você pode navegar na página com um navegador simples, como o lince e navegador normal como firefox, então você está no caminho certo.

Para mais informações não hesite em visitar o qualquer campanha navegador

Edit: No caso, não é óbvio que você trabalhar com css diferente para diferentes tipos de navegadores, mas sempre usar o mesmo conteúdo. Visite o css Zen Garden para uma boa demonstração.

Update: Adicionando um link para tipos de mídia CSS, e como dito por outros, é a opção portátil que é interessante.

http://www.w3.org/TR/CSS21/media.html

Você tem que projetar dois locais diferentes para fazer isso?

Sim

Como posso saber se o site é acessado por um navegador móvel?

A sua linguagem de programação tem provavelmente alguma forma de olhar através de informações do cliente. PHP, por exemplo, tem um $_SERVER variável superglobal que tem todos os tipos de informações, tanto do servidor de servir, e que o cliente visita. Neste caso, você estaria interessado no valor de $_SERVER['HTTP_USER_AGENT'], o que daria o seguinte resultado, eu deveria visitar uma página:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

Isto diz-lhe que eu estou executando o Mac OS X 10.5.6, usando o Safari 4.0. Existem palavras-chave conhecidas para vários navegadores móveis. Uma versão do browser do iPhone, por exemplo, tem o seguinte agente de usuário:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

o "iPhone" já dá-lo afastado, mas é ainda confirmado pelas palavras-chave "Mobile" e "Safari"

A maioria dos sites tem um sub-domínio ligeiramente diferente para sites móveis (mais uso de "m"). por exemplo. flickr usos m.flickr.com

(há uma recomendação para usar a .mobi TLD mas eu nunca visto que utilizado)

Faça o design super simples, não use muitos gráficos, onde você precisa para mantê-los tão pequenos quanto possível. Este pode ser útil para o design.

Eu provavelmente construir um conjunto diferente de páginas para usuários móveis, fazendo uso do mesmo negócio objetos etc., como você está usando para o site principal.

Se as diferenças entre a concepção dos dois locais não é grande que você pode ser capaz de obter uma forma com apenas servindo arquivos CSS separados?

Seu site deve limiited para o telefone celular que pode suportar sobre os requisitos máximos. você não pode sequer entreter toda a telefone móvel.

Seu site deve ter conjunto diferente de estilo CSS e HTTP agente deve verificar o tipo de cliente de acordo com a seleção pedido CSS deve ter lugar.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow