CRIANDO
PÁGINAS DE INTERNET RESPONSIVAS
Segundo o
dicionário online Priberam, responsivo é aquilo que envolve
resposta. No desenvolvimento de web sites, responsividade é,
portanto, a técnica pela qual uma página de Internet dá diferentes
respostas de acordo com o dispositivo no qual ela está sendo
visualizada, ou seja, a forma como a página é exibida muda para
melhor se adaptar ao tamanho das telas dos dispositivos.
O
primeiro passo para fazer uma página responsiva é utilizar a meta
tag viewport
que é responsável pela renderização da área onde a página será
exibida, devendo ser inserida em seu head. Com viewport é
possível criar áreas de renderização de diversos tamanhos e até
mesmo impedir que o usuário de zoom na página. No entanto, o mais
comum é utilizar 100% da tela do dispositivo para visualização da
página, com possibilidade de zoom.
O
exemplo abaixo mostra uma forma bem simples de utilização da
viewport com aproveitamento de 100% da tela do dispositivo.
<head>
<meta name="viewport" content="width=device-width">
</head>
|
O
segundo passo para criação de uma página responsiva é mudar o
seu layout, ou seja, a sua
forma de exibição, adaptando-a a resolução de tela do dispositivo
que está sendo utilizado. Sendo assim, páginas que ocupam,
por exemplo, 70% da largura da tela ao serem abertas em um computador
desktop, podem utilizar 100% da largura da tela ao serem abertas por
um smartphone ou tablet. Uma das formas de se fazer isso é
utilizando JavaScript, fazendo-se uma verificação de tamanho no
início do corpo (body) da página. Exemplo:
<body>
<script>
if(screen.width<1000) document.write('<table width=100% height=100%><tr><td valign=top>');
else document.write('<table width=70% height=100%><tr><td valign=top>');
</script>
</body>
|
No exemplo dado,
uma tabela será criada para exibição do conteúdo da página,
sendo-lhe atribuída 100% da largura da tela, no caso da resolução
do dispositivo ser inferior a 1000 pixels, o que caracterizaria o uso
de um tablet, smartphone, ou tela pequena, ou apenas 70% da largura
da tela, o que caracterizaria o uso de um computador desktop com tela
maior. O mesmo poderia ter sido feito com uma div ao invés de table.
Outras verificações
com JavaScript podem ser feitas para mudar a disposição dos
elementos da página, fazendo, por exemplo, com que uma página
exibida em duas colunas em um computador desktop, passe a ser exibida
em apenas uma coluna em um smartphone ou tablet, com uma instrução
do tipo:
<script>
if(screen.width<1000) document.write('<tr>');
</script>
|
A mesma lógica
pode ser adotada para acrescentar elementos na página, ao ser aberta
por um computador desktop com tela maior, fazendo com que todo espaço
disponível seja aproveitado por inteiro.
Neste pequeno
artigo foram dadas apenas algumas sugestões de responsividade.
Aconselha-se um estudo mais aprofundado sobre a meta tag viewport e
suas propriedades, bem como outras formas de controle do layout por
meio de JavaScript ou CSS.
ATIVIDADES
1)
Para que serve a meta tag viewport?
2) O
que são páginas de Internet responsivas?
3)
De que forma JavaScript pode ser útil na criação de páginas
responsivas?