Design responsivo
Identificação de dispositivo
Layout adaptativo de acordo com o tamanho da tela do dispositivo do usuário
- Baseado no tamanho da tela
- Utilizado no front-end (JavaScript, CSS)
- Utilizado para montar a interface
- Baseado no user-agent do navegador
- Utilizado no back-end (servidor)
- Utilizado para executar determinada lógica
Boas práticas
- Utilizar o mínimo de HTML possível
- Manter uma estrutura de HTML simples
- Evitar utilizar position absolute e float
- Usar técnicas simples para elementos como menus
Tamanhos relativos
Utilização de tamanhos relativos ao container e não fixos, permitindo que o conteúdo preencha a tela e use o espaço necessário.
.banner {
with: 100%; // usar o máximo da largura do container
max-width: 960px; // limitar a largura máxima
margin: auto; // centralizar
// não limitar a altura (height) do elemento,
// permitindo expandir conforme necessário
}Unidades de medida CSS
São poucos os casos em que se deve utilizar medidas fixas com pixels (px), como ícones e botões.
Deve se dar preferências à medidas com porcentagem (%), mas além desta existem outras unidades de medidas importantes que também são relativas como rem, vh, vw, vmin, vmax, ex, ch.
Algumas informações sobre estas unidades de medida:
http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/
Media Queries
@media screen and (max-width: 960px) {
.hide-mob {
display: none; // ficará escondido em telas menores que 961px
}
}
@media screen and (min-width: 961px) {
.hide-desk {
display: none; // ficará escondido em telas maiores que 960px
}
}.columns {
width: 50%; // metade da largura da tela por padrão
}
@media screen and (max-width: 600px) {
.columns {
width: 100%; // usa toda largura da tela em telas com menos de 600px
}
}Cuidados
Evitar a utilização de esconder/exibir conteúdos de acordo com o tamanho de tela, pois o conteúdo continuará existindo na página, tornando a página maior e mais lenta para carregar.
Utilizar esta prática apenas para trechos curtos e pouco significativos.
Principais BreakPoints de telas
Grid - Bootstrap
Ver mais em: https://getbootstrap.com/docs/3.3/css/
O site possui algumas funcionalidades do Booststrap 3, como o grid, pronto para ser utilizado
Imagens responsivas
Evitar utilizar imagens no background caso for um banner.
Porém, caso usadas, ajustar o background-size e o tamanho do container em conjunto com as media queries.
Imagens responsivas
Utilizar a tag <picture> do HTML5.
A imagem padrão será carregada, caso o tamanho da tela não satisfaça nenhuma media query ou caso o navegador não suporte o elemento <picture>.
<picture>
<source srcset="banner-large.png" media="(min-width: 600px)">
<img src="banner-default.png" alt="Livraria Cultura">
</picture>Artigos sobre design responsivo
Endeca Content Collections
Em casos em que existirem grandes mudanças estruturais da página ou de uma sessão, o aconselhado é utilizar os Content Collections do Endeca. Exemplo nas páginas de categorias:
Endeca Content Collections
Endeca Content Collections
Obrigado!
Design Responsivo
By Henrique Rotava
