Ao longo dos últimos anos, o uso da web móvel tem aumentado consideravelmente ao ponto que os desenvolvedores web e designers já não pode dar ao luxo de ignorá-lo. Nos países ricos, a mudança está sendo alimentada por conexões banda larga móvel mais rápida e mais barato serviço de dados. No entanto, um grande aumento também tem sido visto nos países em desenvolvimento onde as pessoas têm ignorado sobre a compra de PCs e ido direto para o celular.
Infelizmente, a arena móvel introduz uma camada de complexidade que pode ser difícil para os desenvolvedores acomodar. Desenvolvimento móvel é mais do que cross-browser, deve ser multi-plataforma. O grande número de dispositivos móveis torna o teste completo uma impossibilidade prática, deixando os desenvolvedores nostálgico para os dias em que só tinha para suportar navegadores antigos.
Além de apoiar plataformas diferentes, cada dispositivo pode usar qualquer número de navegadores de celular . Por exemplo, um usuário Android pode acessar o seu site usando o navegador Android nativo, ou poderia ter também instalado o Opera Mini ou o Firefox Mobile. É bom, desde que o smartphone utiliza um navegador da web progressiva (e é seguro dizer que a maioria dos navegadores são progressivos hoje), mas não precisa.


A web móvel reintroduz várias questões que foram amplamente ignorados nos últimos anos. Primeiro, mesmo com as redes 4G, a largura de banda se torna um problema grave para os consumidores móveis. Além disso, os dispositivos móveis têm um tamanho de tela reduzido significativamente, que apresenta problemas de tela imobiliário que não existiram desde os dias de monitores de projeção. Combine estas questões com problemas de compatibilidade entre plataformas, e não é difícil ver como desenvolvimento móvel é muito parecido com "pisar para trás no tempo". Então, vamos enfrentar esses problemas um de cada vez e criar um roteiro para o desenvolvimento de web móvel:

Como implementar Stylesheets móvel

O primeiro passo para a adição de suporte móvel para um site é como uma folha de estilo especial para ajustar o CSS para dispositivos móveis:

Do lado do servidor Métodos & A String UA

Uma abordagem para móveis, incluindo folhas de estilo envolve a detecção da seqüência do agente do usuário com uma linguagem server-side, como PHP. Com esta técnica, o site detecta dispositivos móveis e quer serve um estilo apropriado ou redireciona o usuário para um subdomínio móvel, por exemplo m.facebook.com . Esta abordagem do lado do servidor tem várias vantagens: garante o mais alto nível de compatibilidade e também permite que o website para servir mark-up/content especiais para usuários móveis.

Imagem grande
Embora esta técnica é perfeita para sites de nível empresarial, há preocupações práticas que tornam difícil implementar na maioria dos sites. Strings novo agente usuário saem quase diariamente, para manter o atual lista UA é quase impossível. Além disso, esta abordagem depende do dispositivo para retransmitir seu agente usuário verdadeiro. Mesmo assim, os navegadores têm falsificado sua seqüência de UA para contornar este tipo de detecção no passado. Por exemplo, a maioria das seqüências UA ainda começam com "Mozilla" para passar a Netscape cheques utilizados na década de 90, e durante vários anos Opera fingiu ser IE . Como Peter-Paul Koch escreve :

"É uma corrida armamentista. Se a detecção de dispositivos realmente pegar, navegadores vão começar a falsificar suas cordas agente de usuário para acabar no lado direito da detecta. "

Do lado do cliente Métodos e consultas de mídia

Alternativamente, a abordagem mais simples envolve a detecção do dispositivo móvel do lado do cliente. Uma das primeiras técnicas para incluir folhas de estilo móvel envolve aproveitando do tipo de estilo de mídia, por exemplo:
Aqui incluímos dois estilo, o primeiro site.css metas de desktops e laptops usando a screen tipo de mídia, enquanto o segundo mobile.css alvos dispositivos móveis usando handheld . Enquanto isso de outra forma seria uma excelente abordagem, suporte a dispositivos é outra questão. Mais velhos dispositivos móveis tendem a apoiar o handheld tipo de mídia, porém eles variam em sua aplicação: algumas desativar a screen folhas de estilo e só carga handheld , enquanto outros carga ambos.
Além disso, a maioria dos dispositivos novos tenham abolido com o handheld distinção completamente, a fim de servir os seus utilizadores páginas web cheio de recursos em vez de layouts duller móvel. Para oferecer suporte a dispositivos mais novos, nós vamos precisar usar consultas de mídia , que nos permitem alvo estilos para a largura do dispositivo (você pode ver outra adaptação prática de consultas de mídia em Ethan Marcotte do artigo Responsive Web Design ). Como os dispositivos móveis normalmente têm telas menores, que pode direcionar dispositivos portáteis através da detecção de telas que são 480px e menores:
Enquanto isso a maioria dos dispositivos mais novos alvos, muitos dispositivos antigos não suportam consultas de mídia, por isso vamos precisar de uma abordagem híbrida para conseguir a penetração maior no mercado.
Primeiro, definir duas folhas de estilo: screen.css com tudo para navegadores normal e antiscreen.css para substituir todos os estilos que você não quer em dispositivos móveis. Amarre as duas folhas de estilo em conjunto em outro estilo core.css :
Finalmente, definir um outro estilo handheld.css com styling adicional para browsers móveis e ligá-los na página:
Embora esta técnica atinge uma grande quota de mercado de dispositivos móveis, que não é de forma perfeita. Alguns dispositivos móveis, como iPad são mais de 480 pixels de largura e não vai funcionar com este método. No entanto, esses dispositivos maiores, sem dúvida não precisa de um layout condensado móvel. Avançar, provavelmente haverá mais dispositivos que não se encaixam nesse molde. Infelizmente, é muito difícil à prova de futuro detecção de móveis, uma vez que as normas ainda estão a emergir.
Além de detecção de dispositivos, a abordagem consulta de mídia também apresenta outros assuntos. Principalmente, as consultas de mídia podem apenas o conteúdo de estilo diferente e não fornecem nenhum controle sobre a entrega de conteúdo. Por exemplo, uma consulta de mídia pode ser usada para esconder o conteúdo de uma coluna lateral, mas não pode impedir que mark-up de serem descarregados por seus usuários. Dadas questões de largura de banda móvel, este HTML adicional não deve ser simplesmente ignorado.

Iniciada Método usuário

Considerando as dificuldades com a detecção UA móveis e as armadilhas de consultas de mídia, algumas empresas como a IKEA têm optado por simplesmente permitir que o usuário decida se para ver a versão mobile do seu site. Enquanto este tem a clara desvantagem de exigir uma interação mais do usuário, é sem dúvida o método mais à prova de idiota e também o mais fácil de realizar.
O site contém um link que diz "Visite o nosso site móvel", que transporta o usuário para um subdomínio móvel. Esta abordagem tem alguns inconvenientes. Claro, alguns usuários móveis podem perder o vínculo, e outros não-móveis visitantes podem clicar nele, uma vez que é visível, independentemente do que dispositivo está sendo usado. Mesmo assim, esta técnica tem a vantagem de permitir ao usuário tomar a decisão móvel. Alguns usuários preferem um layout de condensado que é otimizada para o seu dispositivo, ao passo que outros usuários podem preferir acessar o site inteiro, sem as restrições de um layout limitada móvel.

Qual a mudar com Folhas de Estilo Móveis

Agora que já implementadas folhas de estilo móveis, é hora de descer para o porcas e parafusos de estilos que nós realmente deseja alterar.

Aumentar e Alter tela imobiliário

O principal objetivo do estilo móvel é alterar o layout de uma tela menor. Em primeiro lugar, isso significa redução de multi-coluna layouts de colunas individuais. A maioria das telas móveis são vertical, de modo espaço horizontal se torna ainda mais "caro" e móveis layouts raramente podem pagar mais de uma coluna de conteúdo. Em seguida, reduzir a desordem em toda a página, definindo display: none; em qualquer elemento menos importante. Por fim, salve pixels adicionais, reduzindo margens e preenchimento para criar uma apertada layout.

Reduzir a largura de banda

Outra meta do estilo móvel é o de reduzir largura de banda para redes móveis mais lento. Certifique-se primeiro para remover ou substituir qualquer imagens de fundo grande, especialmente se você usar uma imagem de fundo para todo o site. Além disso set display: none em imagens o conteúdo desnecessário.
Se seu site usa imagens para os botões ou navegação, considere substituindo-os com texto simples / CSS homólogos. Finalmente, se você gostaria de forçar o navegador a usar o texto alternativo para qualquer uma das suas imagens, use esse trecho (e usar JavaScript para adicionar o as-text classe para img e certifique-se que alt -atributos são adequadamente definidos em sua marcação ):

Outras mudanças

Além de abordar o tamanho da tela e as preocupações de largura de banda, há algumas mudanças adicionais que devem ser feitas em qualquer estilo móvel. Primeiro, você pode melhorar a legibilidade, aumentando o tamanho da fonte de qualquer texto pequeno ou médio porte. Em seguida, clicando em geral é menos precisa em dispositivos móveis, para certificar-se aumentar as áreas clicáveis ​​de qualquer botões importantes ou links definindo display: block e adicionando estofo para os elementos clicáveis.
Além disso, elementos flutuantes podem causar problemas para layouts móvel, de modo considerar a remoção de qualquer carros alegóricos que não são absolutamente necessárias. Lembre-se que os imóveis horizontais é especialmente caro no celular, então você deve sempre optar pela adição de rolagem vertical em vez de horizontal.
Finalmente, mouseover estados não funcionam com a maioria dos dispositivos móveis, para certificar-se ter apropriado de definições :active -estados. Também, às vezes pode ser útil para aplicar as definições do já definido :hover estados do :active estados. Este pseudo-classe é exibido quando o usuário clica em um item, e, portanto, vai funcionar em dispositivos móveis. No entanto, isto só melhora a experiência do usuário e não deve ser invocado para elementos mais importantes, como drop-down de navegação. Nestes casos o melhor é mostrar as ligações em todos os momentos em dispositivos móveis.

Além Stylesheets

Além de móveis de estilo, podemos adicionar uma série de características especiais móvel através de mark-up.

Clicáveis ​​números de telefone

Primeiro, a maioria dos dispositivos portáteis incluem um telefone, então vamos fazer os nossos números de telefone clicável:
Agora os usuários móveis podem clicar neste número a chamar-lhe, no entanto, existem algumas coisas a nota. Primeiro, o número da ligação efectiva começa com um 1, que é importante, pois a web é internacional (1 é o código de país dos EUA).
Em segundo lugar, este link é clicável ou não o usuário tenha um dispositivo móvel. Uma vez que não estamos usando o método do lado do servidor descrito acima, a nossa melhor opção é simplesmente esconder o fato de que o número é clicável via CSS. Portanto, use o phone-link class para desativar o styling link no seu estilo de tela, e depois incluí-lo novamente para celular.

Tipos especiais de Entrada

Quando se trata de navegação móvel, outra preocupação é a dificuldade de digitar em comparação com um teclado de tamanho padrão. Mas nós podemos torná-lo mais fácil para os nossos utilizadores, tirando partido de algumas especiais tipos de entrada HTML5 :
Estes tipos de entrada permitem que dispositivos como o iPhone para exibir um teclado contextual que se relaciona com o tipo de entrada. No exemplo acima type="tel" desencadeia um ideal teclado numérico para digitar números de telefone, e type="email" desencadeia um teclado com @ e . botões.
Tipos de entrada HTML5 também fornecer no navegador-validação e menus especiais de entrada que são úteis tanto em navegação móvel e não móvel. Além disso, como não favorável navegadores naturalmente degradar de ver estes tipos de entrada especial como <input type="text" /> , não há perda na utilização de tipos de entrada HTML5 em toda a sua sites hoje.
Veja uma lista completa de tipos de entrada HTML5 . Você pode encontrar algumas informações sobre o suporte do navegador atual de atributos de entrada HTML5 no pós Atributos HTML5 Entrada e suporte do navegador por Estelle Weyl.

Viewport Dimensões e Orientação

Quando dispositivos móveis modernos tornar uma página web, que escala o conteúdo da página para caber dentro de sua janela, ou área visível. Embora as dimensões padrão viewport funcionam bem para a maioria dos layouts, às vezes é útil para alterar a viewport . Isso pode ser feito usando um <meta> tag que foi introduzido pela Apple e já foi pego pelos fabricantes outro dispositivo. No documento <head> incluir este trecho:
Neste exemplo, nós criamos o visor para 320 , o que significa que 320 pixels da página será visível em toda a largura do dispositivo.
A meta tag viewport também pode ser usado para desabilitar a capacidade de redimensionar a página:
No entanto, semelhante ao desativar as barras de rolagem, esta técnica assume o controle de distância do usuário e deve ser utilizado apenas por uma boa razão.
Além disso, é possível adicionar alguns estilos com base na orientação do dispositivo. Isto significa que estilos diferentes podem ser aplicadas dependendo se o usuário está segurando seu telefone verticalmente ou horizontalmente.
Para detectar a orientação do dispositivo, podemos usar uma consulta de mídia similar ao dispositivo de detecção do lado do cliente que discutimos anteriormente. Dentro do seu estilo, incluem:
Aqui portrait.css estilos será adicionado para dispositivos vertical ea landscape.css será adicionado para horizontal.
No entanto consultas orientação meios de comunicação têm sido aprovado por todos os dispositivos , por isso este é melhor realizado com o max-width consulta de mídia . Basta aplicar diferentes max-width consultas para as larguras de orientação diferente que você deseja alcançar. Esta é uma abordagem muito mais robusto, já que, presumivelmente, a razão para atingir diferentes orientações é de estilo para diferentes larguras.

Preocupações especiais para o iPhone / iPad

Com uma quota de mercado de 28% e as estimativas de até 50% de navegação móvel passando iPhone, faz sentido que os desenvolvedores fazem acomodações especiais para o gigante móvel.

Sem Flash

Independentemente da ética, da Apple, a realidade é que iPhones não jogar o Flash a menos que sejam desbloqueados . Felizmente, existem alternativas para o Flash, e os problemas do iPhone com essa tecnologia são muitas vezes fácil de se locomover. O principal uso do Flash em sites modernos é o Flash vídeo, que pode ser facilmente contornado utilizando vídeo HTML5. Entretanto, desde que navegadores mais antigos não suportam HTML5, certifique-se de incluir uma cópia de segurança do Flash para navegadores não-apoio (é por isso que todo o debate sobre o Flash versus HTML5 é um pouco inútil, porque você pode realmente oferecer tanto para seus usuários e os dispositivo do usuário vai pegar o que pode tornar automaticamente).
Além de vídeo, geralmente é melhor usar JavaScript para acomodar qualquer funcionalidade simples. Bibliotecas JavaScript como jQuery torná-lo fácil de construir aplicativos ricos e interativos sem Flash. Independentemente do seu desejo de apoiar iPhone, estes aplicativos JavaScript normalmente têm uma série de vantagens adicionais sobre as alternativas Flash.
Finalmente, algumas aplicações são simplesmente demasiado difícil de recriar com HTML5 e Javascript. Para esses, os usuários do iPhone terão que ser deixadas de fora, porém não se esqueça de incluir apropriada conteúdo alternativo .

Uma paródia do Adobe é "We Love Apple" de campanha, onde o coração é substituído pelo ícone do plugin quebrado.

Outras deficiências

Além de Flash, existem algumas ressalvas adicionais para apoiar iPhones e iPads.
Primeiro, o iPhone não suporta <input type="file" /> , uma vez que não têm uma estrutura interna de arquivos acessível. Enquanto a maioria dos dispositivos móveis conectar a um computador como um disco rígido externo, a Apple tomou medidas para garantir que a estrutura de arquivos do iPhone permanece ofuscado.
IPhone, próximo cache somente os arquivos que são 25 kb ou menos, de modo a tentar manter todos os arquivos reutilizado sob esta restrição. Este pode ser um pouco contra-intuitivo, já que muitas vezes significa sair sprites imagem grande e JavaScripts concatenados em pedaços menores. No entanto o cuidado de atender a estes arquivos somente para iPhone, ou ele vai causar solicitações HTTP extra em todos os outros browsers.
Finalmente, quando se trata de @font-face incorporação de fontes, iPhone Mobile Safari não suporta totalmente-lo e suporta o formato de arquivo SVG vez. No entanto, fontes SVG só são suportados pelo Chrome, Opera e iPhone, por isso vamos precisar de uma abordagem híbrida para atingir todos os navegadores. Além do SVG, vamos precisar de um otf. Ou. Ttf para Firefox e Safari, bem como um EOT para o IE (IE tem efectivamente suportados @font-face desde IE4).
Depois de obter os arquivos necessários, amarrá-los todos juntos com o CSS apropriado:

Especial iPhone / iPad Enhancements

Apesar de várias deficiências do iPhone, o dispositivo oferece ao usuário uma experiência maravilhosamente rica que os desenvolvedores podem aproveitar de maneira não é possível com mais dispositivos móveis.
Primeiro, há uma variedade de bibliotecas JavaScript que pode ser usado para acessar algumas das funcionalidades mais avançadas disponíveis no iPhone. Dê uma olhada Sencha Touch , jQTouch e iui . Estes três bibliotecas permitem uma melhor interface com o iPhone, e também trabalham em dispositivos similares, tais como Android. Além disso, manter um olho sobre a tão esperada móvel jQuery que acaba de ser lançado em alfa.
Em seguida, a App Store não é a única maneira de obter um ícone em iPhones de seus usuários: você pode simplesmente tê-los bookmark sua página. Infelizmente o padrão marcador ícone é uma imagem da tela condensada da página, que não costuma olhar muito bom, então vamos criar um especial ícone iPhone . Também verificar a Tabela de Referência Ícone por Jon Hicks para mais detalhes.
Comece por guardar um 57 x 57 pixels PNG em algum lugar em seu site, em seguida, adicione esse trecho dentro do seu <head> tag:
Não se preocupe com cantos arredondados ou um efeito brilhante, o iPhone irá adicionar esses por padrão.

Conclusão

Como a mudança de todo o mundo para móvel continua, suporte a dispositivos portáteis serão cada vez mais importante. Esperemos que este artigo lhe deixou com desejo e conjunto de ferramentas necessárias para fazer o suporte móvel uma realidade em seus sites.
Embora móvel ocupa uma parte significativa de navegação na web global, a tecnologia ainda está muito em sua infância. Assim como os padrões emergiram para a navegação área de trabalho, novos padrões estão emergindo para unificar os navegadores móveis. Isto significa que as técnicas descritas neste artigo são apenas temporários, e é sua a responsabilidade de ficar em cima dessa tecnologia em constante mudança.
Na verdade, a única coisa em desenvolvimento web que permanece constante é a necessidade eterna de continuar a aprender!