Práticas recomendadas para apps da Web

O desenvolvimento de páginas da web e aplicativos para dispositivos móveis apresenta diferentes desafios em comparação até o desenvolvimento de uma página da Web para navegadores da Web para desktop. As práticas a seguir podem ajudar você a fornecer o mais eficaz aplicativo da web para Android e outros dispositivos móveis.

  1. Redirecione dispositivos móveis para uma versão dedicada do seu site. Existem várias maneiras de fazer isso usando redirecionamentos do lado do servidor. Um método comum é "detectar" as String do user agent fornecida pelo navegador da Web. Para determinar para veicular uma versão para celular do seu site, procure a opção no user agent.
  2. Use HTML5 para dispositivos móveis. HTML5 é a linguagem de marcação mais comum usada em sites para dispositivos móveis. Este padrão incentiva o desenvolvimento mobile-first para ajudar a garantir que os sites funcionem em vários dispositivos. Ao contrário das linguagens da Web anteriores, o HTML5 usa <DOCTYPE> e Declarações charset: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Use os metadados da janela de visualização para redimensionar corretamente sua página da Web. No seu documento <head>, fornecem metadados que especificam como você quer que a janela de visualização do navegador para renderizar sua página da Web. Por exemplo, os metadados da janela de visualização podem especificar a altura e a largura dos da janela de visualização do navegador, da escala inicial da página e da densidade da tela de destino.

    O exemplo a seguir mostra como definir metadados da janela de visualização:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Para mais informações sobre como usar metadados da janela de visualização em dispositivos com tecnologia Android, consulte Suporte a telas diferentes em apps da Web.

  4. Use um layout linear vertical. Evite que o usuário tenha que rolar para a esquerda e para a direita enquanto navegar pela página. Rolar para cima e para baixo é mais fácil para o usuário e torna sua página mais simples.
  5. Defina a altura e a largura do layout como match_parent. Configurar seu a altura e a largura do objeto WebView como O match_parent garante que as visualizações do app sejam dimensionadas corretamente. Não recomendamos a definição da altura para wrap_content porque resulta em dimensionamento incorreto. Da mesma forma, definir o A largura do layout como wrap_content não é compatível e faz com que WebView use a largura do elemento pai. Devido a esse comportamento, também é importante garantir que nenhum dos objetos de layout pai do seu objeto WebView têm a altura e a largura definidas como wrap_content.
  6. Evite várias solicitações de arquivos. Como os dispositivos móveis geralmente têm uma velocidade de conexão mais lento do que os computadores desktop, faça a página carregar o mais rápido possível. Uma maneira de acelerar esse processo é evite carregar arquivos extras, como folhas de estilo e arquivos de script, no arquivo <head>. Além disso, considere realizando análises em dispositivos móveis PageSpeed Insights do Google para sugestões detalhadas de otimização específicas para seu app.

Outros recursos