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 expandida 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 todos os formatos.
Isso significa que alguns elementos da interface podem precisar ser bem diferentes dependendo do contexto em que são visualizados. Pode ser necessário aplicar CSS muito diferentes à mesma base de código HTML para aproveitar ao máximo os diferentes tamanhos de tela. Isso pode ser um grande desafio de design.
Aqui estão alguns desafios comuns que você pode enfrentar.
Navegação
Mostrar uma lista de links de navegação é bem simples em uma tela grande. Há muito espaço para acomodar esses links.
Em uma tela pequena, o espaço é muito valioso. Ao projetar para essa situação, é tentador ocultar a navegação atrás de um botão. O problema dessa solução é que os usuários precisam seguir 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 "aonde posso ir?"
Tente encontrar uma estratégia que evite ocultar sua navegação. Se você tem um número relativamente pequeno de itens, pode estilizar a navegação para que ela tenha uma boa aparência em telas pequenas.
Esse padrão não será dimensionado se a navegação tiver muitos links. A navegação fica desorganizada se os links são divididos em duas ou três linhas em uma tela pequena.
Uma solução possível é 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 ficam imediatamente visíveis. Esse é o padrão de estouro.
A vantagem dessa técnica é que ela é dimensionada 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 visíveis inicialmente. Se você usa essa técnica para sua navegação principal, certifique-se de que os primeiros links sejam 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 optar por ocultar a navegação por padrão e fornecer um mecanismo de ativação/desativação 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 sem rótulo é a navegação de "carne misteriosa", em que os usuários não saberão o que está lá até que mordem o conteúdo. Fornecer um rótulo de texto para informar aos usuários o que o botão revelará.
Carrosséis
O que vale para a navegação também se aplica a outros conteúdos: tente não ocultar nada de qualquer maneira. Um carrossel é um método comum para ocultar conteúdo. Pode parecer muito legal, mas é provável 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 apresentar na página inicial) do que para atender aos usuários.
No entanto, quando o espaço é limitado, carrosséis podem evitar que uma página fique muito longa e desorganizada. É possível adotar uma abordagem híbrida: mostrar conteúdo em um carrossel para telas pequenas, mas mostrar o mesmo conteúdo em uma grade para telas maiores.
Em telas estreitas, mostre itens em uma linha usando flexbox. A linha de itens se estenderá além da borda da tela. Use overflow-x: auto para permitir o deslizamento 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 propriedades scroll-snap 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 neste caso), alterne para a grade e exiba 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));
}
}
É importante ressaltar que um item na visualização de carrossel não ocupa toda a largura. Se estiver, não haverá indicação de que há mais conteúdo disponível além da borda da janela de visualização.
Os carrosséis são outro exemplo do padrão flutuante em ação. Se você tiver muitos itens nos quais as pessoas possam navegar, continue usando o padrão flutuante mesmo em telas grandes, incluindo televisões. Este controle de rolagem 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 tranquila. 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, estão além da borda, mas o mesmo princípio se aplica: se o usuário nunca deslizar até o item, a imagem não será transferida por download, economizando largura de banda.
Com o JavaScript, é possível adicionar controles interativos a um carrossel. Você pode até fazer com que ele passe por itens automaticamente. Mas pense muito antes de fazer isso. A reprodução automática pode funcionar se o carrossel for o único conteúdo da 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). Leia mais práticas recomendadas para o 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, o layout da tela pequena poderá ser corrompido.
É possível aplicar o padrão de sobrefluxo a tabelas. Neste exemplo, a tabela é agrupada em um div com uma classe 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 sobrecarga é um bom ajuste para telas pequenas, mas certifique-se de que esteja claro que o conteúdo fora da tela pode ser acessado. Considere colocar uma sombra ou um gradiente sobre a borda onde o conteúdo fica truncado.
A divulgação progressiva é uma maneira útil de economizar espaço, mas tenha cuidado ao usá-la para conteúdos muito importantes. É mais adequado para ações secundárias. Verifique se o elemento da interface que aciona a divulgação está claramente rotulado. Não confie apenas na iconografia.
Projete para telas menores primeiro. É mais fácil adaptar designs de tela pequena para telas maiores do que o contrário. Se você projeta para uma tela grande primeiro, pode parecer que o design para telas pequenas pode passar despercebido.
Para mais padrões de elementos de interface e layout, confira a seção Padrões do web.dev.
Quando você adapta elementos de interface para diferentes tamanhos de tela, as consultas de mídia são muito úteis para descobrir as dimensões do dispositivo. Mas recursos de mídia como min-width e min-height são só o começo. A seguir, você descobrirá uma série de outros recursos de mídia.