Site responsivo
Como desenvolver um Site exclusivo para Mobile?
A abordagem que trataremos no curso é a de fazer adaptações na mesma página para ser compatível com CSS3. Como faremos caso queiramos fazer um Site exclusivo para mobile? Do ponto de vista de código, é a abordagem mais simples: basta fazer sua página levando em conta que a tela será pequena (em geral, usa-se width de 100% para que se adapte à pequenas variações de tamanhos de telas entre smartphones diferentes). Uma dificuldade estará no servidor para detectar se o utilizador está vindo de um dispositivo móvel ou não, e redirecioná-lo para o lugar certo. Isso costuma envolver código no servidor que detecte o navegador do utilizador usando o User-Agent do navegador. É uma boa prática também incluir um link para a versão normal do Site caso o utilizador não queira a versão móvel.
Configurando o Viewport
Ao criar páginas responsivas, adicione o seguinte elemento <meta> em todas as suas páginas:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Isso definirá a janela de exibição da sua página, que fornecerá ao navegador instruções sobre como controlar as dimensões e a escala da página.
os smartphones modernos têm telas grandes e resoluções altas, justamente para
nos permitir ver sites complexos feitos para Desktop. A tela de um iPhone 4S por exemplo é 960px por
640px. Celulares Android já chegam a 1280px, o mesmo de um Desktop.
Ainda assim, a experiência desses celulares é bem diferente dos Desktops. 1280px em uma tela de 4 polegadas
é bem diferente de 1280px em um notebook de 13 polegadas. A resolução muda. Celulares costumam ter uma
resolução em dpi bem maior que Desktops.
Como arrumar nossa página?
Os smartphones sabem que considerar a tela como 1280px não ajudará o usuário a visualizar a página otimizada para telas menores. Há então o conceito de device-width que, resumidamente, representa um número
em pixels que o fabricante do aparelho considera como mais próximo da sensação que o usuário tem ao
visualizar a tela.
Imagens responsivas
Imagens responsivas são imagens que se adaptam perfeitamente a qualquer tamanho de navegador e do dispositivo. Para o efeito é necessário recorrer a propriedade width Se a propriedade largura do CSS estiver definida como 100%, a imagem será responsiva e aumentará e diminuirá a escala.
Exercícios: adaptações para mobile
1) Usando a página HTML index.html e estilo.css efectue adaptações de modo a tornar a página responsiva
Declare a tag meta com o viewport dentro da página index.html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pode escrever o CSS de adaptação em um novo arquivo, chamado mobile.css. Crie esse arquivo e
o importe no head do index.html (Após os imports já existentes). Use media queries para que ele só seja
aplicado em resoluções de no máximo 320px (celulares comuns).
<link rel="stylesheet" href="css/mobile.css" media="(max-width: 320px)">
2) Nossa página hoje tem o tamanho de 940px e é centralizada (com o uso do seletor .container).
Para deixarmos a página mais flexível nos celulares, precisamos remover esse tamanho absoluto e colocar
algum que faça mais sentido em telas menores, onde queremos ocupar quase que a tela toda (deixando
apenas uma pequena margem). Para isso, edite mobile.css:
.container {
width: 96%;
}
Já é possível redimensionar a tela para 320px e ver que o site começa a se adaptar. Mas ainda há bastante
trabalho pela frente.
3) Próximo passo: vamos ajustar os elementos do topo da página. Vamos centralizar o logotipo na página,
esconder as informações (secundárias) sobre a Sacola e ajustar o menu para ficar abaixo do logo e não
mais posicionado à direita.
header h1 {
text-align: center;
} header h1 img { max-width: 50%; }
.sacola { display: none; }
.menu-opcoes { position: static; text-align: center; }
Lembre-se que, anteriormente, nosso menu estava com position:absolute para ficar a direita do logo.
Agora, queremos deixá-lo fluir abaixo do logo; bastou restaurar o position:static.
Teste novamente com o navegador redimensionado.
4) Ajustamos a posição do menu do topo e, automaticamente, os links se
posicionaram formando duas
linhas. Mas repare como estão próximos uns dos outros. Será que o nosso usuário consegue clicar neles
usando seu celular? Vamos aumentar o espaço entre eles:
.menu-opcoes ul li {
display: inline-block;
margin: 5px;
}
5) Ajuste a seção de busca, o menu da esquerda e a imagem de destaque. Como eles são muito grandes,
em mobile, é melhor renderizarmos um em cima do outro sem quebrar em colunas.
Vamos ocupar 100% da tela com o menu e a busca. A imagem de destaque deverá ser redimensionada
para ocupar 100% da tela e não estourar o tamanho.
.busca,
.menu-departamentos,
.destaque img {
margin-right: 0;
width: 100%;
}
Teste esse passo no navegador redimensionado.
6) Falta apenas ajustarmos os painéis de destaques de produtos.
Por ora, eles estão com tamanhos absolutos ocupando metade da tela e mostrando 6 elementos, com 3 por
linha. Vamos manter o painel com 3 elementos por linha, mas vamos fazer os dois painéis encaixarem um
em cima do outro. Para isso, basta tirarmos a restrição de largura do painel para ele ocupar a tela toda.
.painel {
width: auto;
}
Com relação aos produtos nos painéis. Vamos precisar redimensioná-los para encaixar 3 em cada linha.
Uma boa maneira é colocar cada elemento com 30% do painel, totalizando 90%, e deixando espaço para
as margens.
Já a imagem interna de cada produto deverá ocupar 100% do seu quadrado (o que ajustamos).
.painel li {
width: 30%;
}
.painel img {
width: 100%;
}
7) O que acontece em resoluções maiores de 320px? Nosso design volta ao padrão de 940px e ficamos com
scroll horizontal. A maioria dos smartphones tem 320px de largura, mas nem todos, e nosso layout não
se ajusta bem a esses outros. Até mesmo aqueles com 320px de largura, ao girar o aparelho em modo
paisagem, a resolução é maior (480px num iPhone e mais de 500px em muitos Androids).
O melhor era que nosso layout adaptável fosse usado não só em 320px mas em diversas resoluções intermediárias antes dos 940px que estabelecemos para o site Desktop.
Podemos ajustar nossa media query para aplicar o CSS de adaptação a qualquer tamanho de tela menor que os 940px do Desktop (ou seja, no máximo, 939px):
<link rel="stylesheet" href="css/mobile.css" media="(max-width: 939px)">
Teste, novamente, redimensionando o navegador para várias resoluções diferentes.
Repare que, como fizemos um layout fluido, baseado em percentagens, os elementos se ajustam a diferentes resoluções sem esforço. É uma boa prática usar percentagens e, sempre que possível, evitar o uso
de valores absolutos em pixels.
8) (opcional) Se você fez os exercícios opcionais anteriores do controle de pause/play no banner, precisamos
reposicionar o controle de pause/play:
.play,
.pause {
top: auto;
right: auto;
left: 10px;
bottom: 10px;
}
0 comentários:
Enviar um comentário