Práticas recomendadas para apps da Web

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

  1. Redirecione dispositivos móveis para uma versão móvel do seu site. Há várias maneiras de fazer isso usando redirecionamentos do lado do servidor. Um método comum é "detectar" a string do user agent fornecida pelo navegador da Web. Para determinar se uma versão para dispositivos móveis do seu site precisa ser veiculada, procure a string "mobile" no user agent.
  2. Use HTML5 para dispositivos móveis. HTML5 é a linguagem de marcação mais comum para sites móveis. Esse padrão incentiva o desenvolvimento mobile-first para garantir que os sites funcionem em vários dispositivos. Ao contrário de linguagens da Web anteriores, o HTML5 usa declarações <DOCTYPE> e charset mais simples:
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Use os metadados da janela de visualização para redimensionar corretamente a página da Web. No documento <head>, forneça metadados que especifiquem como a janela de visualização do navegador deve renderizar sua página da Web. Por exemplo, os metadados da janela de visualização podem especificar a altura e a largura da janela de visualização do navegador, a escala inicial da página e a densidade da tela desejada.

    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 Android, leia Suporte a telas diferentes em apps da Web.

  4. Use um layout linear vertical. Evite a necessidade de rolar a página para a esquerda e para a direita. Rolar para cima e para baixo é mais fácil para o usuário e simplifica sua página.
  5. Defina a altura e a largura do layout como match_parent. Definir a altura e a largura do objeto WebView como match_parent garante que as visualizações do app sejam dimensionadas corretamente. Não recomendamos definir a altura como wrap_content, porque isso resulta em um dimensionamento incorreto. Da mesma forma, definir a largura do layout como wrap_content não tem suporte e faz com que o WebView use a largura do pai. Devido a esse comportamento, também é importante garantir que nenhum dos objetos de layout pai do objeto WebView tenha a altura e largura definidas como wrap_content.
  6. Evite fazer muitas solicitações de arquivos. Como os dispositivos móveis geralmente têm uma velocidade de conexão mais lenta que os computadores desktop, faça com que a página carregue o mais rápido possível. Uma maneira de acelerar o processo é evitar o carregamento de arquivos extras, como folhas de estilo e arquivos de script, na <head>. Além disso, considere realizar uma análise de dispositivos móveis com o PageSpeed Insights do Google para receber sugestões de otimização detalhadas específicas para seu app.

Outros recursos