Melhores práticas para criar sites para todas as resoluções de tela

Escrito por brandy alexander | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Melhores práticas para criar sites para todas as resoluções de tela
Use CSS para adaptar sua página a diferentes tamanhos de tela (Hemera Technologies/AbleStock.com/Getty Images)

Ao criar sites, lembre-se que, além de possuir conteúdo útil, as páginas devem ser acessíveis e convenientes para o seu público. Por exemplo, se você criar designs muito largos, muitos usuários deverão usar barras de rolagem para visualizar os conteúdos, mas, se você utilizar designs muito pequenos, os visitantes acabarão possuindo muito espaço vazio ao redor da página. Usando folhas de estilo em cascata (CSS), você poderá aplicar algumas boas práticas durante a fase de design do seu site.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto HTML
  • Web host (Servidor de hospedagem web)

Lista completaMinimizar

Instruções

    Usar um layout líquido

  1. 1

    Abra o editor de texto HTML e crie uma nova página.

  2. 2

    Defina um estilo "body" (Corpo) e digite um atributo "width" (Largura) para controlar o comportamento horizontal do seu site. Por exemplo:

    body { width: }

  3. 3

    Digite "100%" após os dois pontos para permitir que a sua página se ajuste a diferentes resoluções de tela. Por exemplo:

    body { width: 100%; }

  4. 4

    Salve o seu documento com extensão CSS e coloque-a no seu web host na mesma pasta que contém os outros arquivos do seu site. Certifique-se de lembrar dessa localização para conectá-la corretamente às páginas do seu site.

  5. 5

    Associe o arquivo CSS externo a todas as páginas que você criar para o seu site indicando a localização do mesmo na seção "<head></head>" da parte superior do código. Exemplo:

    <head> <link href="http://www.domain.com/exemplo.css" rel="stylesheet" type="text/css" media="screen"> </head>

    Usar um layout de largura fixa

  1. 1

    Abra o editor de texto HTML e crie uma nova página.

  2. 2

    Defina um estilo "body" (Corpo) e digite um atributo "width" (Largura) para controlar o comportamento horizontal do seu site. Por exemplo:

    body { width: }

  3. 3

    Digite "760px" após os dois pontos para criar uma largura apropriada para a menor resolução de tela comum, que é de "800px". Você não usará o tamanho completo pois os 40 pixels extra ajudarão a evitar que os usuários vejam barras de rolagem na janela do navegador. Exemplo:

    body { width: 760px; }

  4. 4

    Salve o seu documento com extensão CSS e coloque-a no seu web host na mesma pasta que contém os outros arquivos do seu site. Certifique-se de lembrar essa localização para conectá-la corretamente às páginas do seu site.

  5. 5

    Associe o arquivo CSS externo a todas as páginas que você criar para o seu site indicando a localização do mesmo na seção "<head></head>" da parte superior do código. Exemplo:

    <head> <link href="http://www.domain.com/exemplo.css" rel="stylesheet" type="text/css" media="screen"> </head>

Dicas & Advertências

  • Se você precisar fazer alterações à largura do seu site, edite o arquivo CSS e coloque-o de volta no web host para que todas as páginas que o utilizem sejam atualizadas automaticamente.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível