Um design visualizado em uma tela pequena não deve parecer uma versão reduzida de um layout de tela grande. Da mesma forma, um design visualizado em uma tela grande não deve parecer uma versão ampliada de um layout de tela pequena. Em vez disso, o design precisa ser flexível o suficiente para se adaptar a todos os tamanhos de tela. Um design responsivo bem-sucedido aproveita ao máximo cada formato.
Isso significa que alguns elementos da interface podem precisar parecer bem diferentes, dependendo do contexto em que são visualizados. Talvez seja necessário aplicar CSS muito diferente à mesma base de código HTML para aproveitar ao máximo diferentes tamanhos de tela. Isso pode ser um desafio de design.
Confira alguns desafios comuns que você pode enfrentar.
Navegação
Exibir uma lista de links de navegação é bastante simples em uma tela grande. Há muito espaço para acomodar esses links.
Em uma tela pequena, o espaço é valioso. Ao criar para essa situação, é tentador ocultar a navegação atrás de um botão. O problema com essa solução é que os usuários precisam realizar duas etapas para chegar a qualquer lugar: abrir o menu e escolher uma opção. Até que o menu seja aberto, o usuário fica se perguntando "para onde posso ir?".
Tente encontrar uma estratégia que evite ocultar a navegação. Se você tiver um número relativamente pequeno de itens, poderá estilizar a navegação para que ela fique boa em telas pequenas.
Esse padrão não será escalonado se a navegação tiver muitos links. A navegação vai parecer confusa se os links forem quebrados em duas ou três linhas em uma tela pequena.
Uma possível solução é manter os links em uma linha, mas truncar a lista na borda da tela. Os usuários podem deslizar horizontalmente para revelar os links que não estão imediatamente visíveis. Esse é o padrão de estouro.
A vantagem dessa técnica é que ela é escalonada para qualquer largura de dispositivo e qualquer número de links. A desvantagem é que os usuários podem perder links que não estão inicialmente visíveis. Se você usar essa técnica para a navegação principal, verifique se os primeiros links são os mais importantes e indique visualmente que há mais itens na lista. O exemplo anterior usa um gradiente para esse indicador.
Como último recurso, você pode ocultar a navegação por padrão e fornecer um mecanismo de alternância para que os usuários mostrem e ocultem o conteúdo. Isso é chamado de divulgação progressiva.
Verifique se o botão que alterna a exibição da navegação está rotulado. Não dependa de um ícone para ser compreendido.
Um ícone não rotulado é uma navegação "misteriosa": os usuários não saberão o que há nele até que o abram. Forneça um rótulo de texto para informar aos usuários o que o botão vai revelar.
Carrosséis
O que é verdade para a navegação também é verdade para outros conteúdos: tente não ocultar nada. Um carrossel é um método comum de ocultar conteúdo. Ele pode parecer muito organizado, mas há uma boa chance de que os usuários nunca descubram o conteúdo oculto. Os carrosséis são melhores para resolver problemas organizacionais, como qual conteúdo deve aparecer na página inicial, do que para atender aos usuários.
No entanto, quando o espaço é valioso, os carrosséis podem evitar que uma página fique muito longa e confusa. Você pode usar uma abordagem híbrida: mostrar conteúdo em um carrossel para telas pequenas, mas exibir o mesmo conteúdo em uma grade para telas maiores.
Para telas estreitas, mostre os itens em uma linha usando o flexbox. A linha de itens vai se estender além da borda da tela. Use overflow-x: auto para permitir o deslize horizontal.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
As scroll-snap propriedades garantem que os itens possam ser deslizados de maneira suave. Graças a scroll-snap-type: inline mandatory, os itens se encaixam no lugar.
Quando a tela for grande o suficiente (mais larga que 50em nesse caso), mude para a grade e mostre os itens em linhas e colunas, sem ocultar nada.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
É fundamental que um item na visualização do carrossel não ocupe toda a largura. Se isso acontecesse, não haveria indicação de que mais conteúdo está disponível além da borda da janela de visualização.
Os carrosséis são outro exemplo do padrão de estouro em ação. Se você tiver muitos itens que as pessoas podem navegar, poderá continuar usando o padrão de estouro mesmo em telas grandes, incluindo televisões. Esse scroller de mídia usa vários carrosséis para gerenciar uma quantidade significativa de opções.
Novamente, as propriedades scroll-snap garantem que a interação seja suave. Além disso, observe que as imagens no carrossel têm loading="lazy" aplicado a elas. Nesse caso, as imagens não estão abaixo da dobra, mas além da borda. No entanto, o mesmo princípio se aplica: se o usuário nunca deslizar até esse item, a imagem não será baixada, economizando largura de banda.
Com a adição de JavaScript, é possível adicionar controles interativos a um carrossel. Você pode até fazer com que ele passe automaticamente pelos itens. Mas pense bem antes de fazer isso. A reprodução automática pode funcionar se o carrossel for o único conteúdo na página, mas um carrossel de reprodução automática é incrivelmente irritante se alguém estiver tentando interagir com outro conteúdo (como ler texto, por exemplo). Saiba mais sobre as práticas recomendadas de carrossel.
Tabela de dados
O elemento table é perfeito para estruturar dados tabulares: linhas e colunas de informações relacionadas. No entanto, se a tabela ficar muito grande, ela poderá quebrar o layout de tela pequena.
Você pode aplicar o padrão de estouro a tabelas. Neste exemplo, a tabela é encapsulada em uma div com uma classe de table-container.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Diretrizes
O padrão de estouro é um bom compromisso para telas pequenas, mas verifique se o conteúdo fora da tela pode ser acessado. Considere colocar uma sombra ou um gradiente na borda em que o conteúdo é truncado.
A divulgação progressiva é uma maneira útil de economizar espaço, mas tenha cuidado ao usá-la para conteúdo muito importante. Ela é mais adequada para ações secundárias. Verifique se o elemento da interface que aciona a divulgação está claramente rotulado. Não dependa apenas da iconografia.
Crie primeiro para telas menores. É mais fácil adaptar designs de telas pequenas para telas maiores do que o contrário. Se você criar primeiro para uma tela grande, há o risco de que o design de tela pequena pareça uma reflexão tardia.
Para mais padrões de layout e elementos da interface, acesse a seção Padrões do web.dev.
Ao adaptar elementos da interface a diferentes tamanhos de tela, as consultas de mídia são muito úteis para descobrir as dimensões do dispositivo. No entanto, os recursos de mídia como min-width e min-height são apenas o começo. Em seguida, você vai descobrir vários outros recursos de mídia.