Como planejar o arranjo de conteúdo para o design responsivo

Em um post recente, discuti como conteúdo visual refere-se à projeto de layout. No entanto, este assunto é muito detalhado, e se divide em muitos sub-tópicos, um dos quais é organização visual para layouts responsivos.

Neste post, gostaria de aprofundar o conteúdo responsivo para ver algumas práticas recomendadas para reorganizando o conteúdo para telas menores. No design UI & UX, não há uma resposta certa para cada projeto, mas existem tendências que funcionam bem, e dessas tendências você pode construir suas próprias ideias.

Reorganize as grades nas listas

Todo site usa algum tipo de grade seja visível ou não. O conteúdo em uma grade sólida geralmente se agrupa horizontalmente em monitores mais amplos, mas isso não faz sentido em dispositivos menores. O melhor remédio é decompor essas grades em telas menores e converter os itens em listas.

Exemplo 1: Conselho Municipal de Wellington

Dê uma olhada no site da Câmara Municipal de Wellington, que usa um número de seções de estilo de grade na home page.

Há um pequeno slideshow de links quadrados que reduz à medida que a janela do navegador é redimensionada. A seção de rodapé também torna-se menor, e eventualmente converte em uma lista vertical de links.

Em telefones muito pequenos com 320px de largura, você precisa projetar para o tamanho do dispositivo. No caso de um iPhone, o dispositivo é mais alto que mais largo, por isso faz sentido organizar o conteúdo dessa maneira.

Exemplo 2: Hambúrgueres de Mooyah

Dê uma olhada na página inicial do Mooyah e tente redimensionar o layout. Há uma pequena área de apresentação de slides que contém três itens em uma tela de área de trabalho, mas isso encolhe para mostrar apenas um item no celular (adicionando mais slides ocultos ao widget).

As duas caixas promocionais que anunciam o aplicativo Mooyah e o menu ficam fixas lado-a-lado até que a tela fique pequena o suficiente reorganizá-los verticalmente.

o “conecte-se conosco!” A seção também reorganiza o conteúdo para que cada postagem social fica o maior espaço possível. De um modo geral, monitores widescreen são os mais largos e as telas de smartphones são as mais altas.

Exemplo 3: mercado temático

Ao projetar um layout com uma grade, você deve considerar Estilos de layout amplos e altos antes de escrever uma única linha de código. Desta forma você estará preparado para construir pontos de interrupção que façam sentido.

Uma página com um layout de grade completo deve reduzir o tamanho das caixas antes de quebrá-los em uma nova linha. Por exemplo, o mercado temático tem um largura máxima fixa de 1240, e a grade contém quatro blocos por linha.

Como a tela fica menor esses blocos reduzir em largura, mas eventualmente demolir para deixe três caixas por linha. No menor tamanho, você recebe uma caixa por linha, e tem muito espaço para texto e imagens brilharem.

Há sempre um equilíbrio de mantendo o máximo de informação possível combinado com a necessidade de tornar o texto legível. Quanto mais você criar layouts de grade, mais fácil será encontrar esse equilíbrio de arranjo de conteúdo.

Ocultar ou remover colunas

Monitores mais largos e mais suporte ao navegador permitir que os desenvolvedores criem layouts incrivelmente complexos. Muitas vezes vejo blogs com três ou até quatro colunas que ocupam boa parte da tela.

No entanto, dispositivos menores precisam de um fluxo de conteúdo faz sentido verticalmente. Eu encontrei duas opções para manuseio de barras laterais excessivas:

1. Deixá-los abaixo do conteúdo principal
2. Escondê-los completamente

Exemplo 1: Parar Pressione

Dê uma olhada no site da Stop Press. Tem quatro colunas verticais no meu monitor de desktop.

A coluna da esquerda é um menu de navegação vertical, a coluna seguinte é a coluna de conteúdo principal com artigos recentes. Então nós temos duas colunas diferentes da barra lateral transbordando com extras “a parte, de lado” conteúdo.

À medida que a janela do navegador é redimensionada, essas colunas reduza lentamente em tamanho. O primeiro a ir é a navegação à esquerda que fica escondida atrás de um ícone do menu de hambúrguer.

O próximo ponto de interrupção oculta a coluna do meio junto com os principais botões de compartilhamento social. Então, finalmente, nas telas menores, a barra lateral direita desaparece completamente deixando apenas a coluna central principal de conteúdo.

Nenhum conteúdo da barra lateral aparece abaixo do conteúdo principal. Está completamente escondido da vista, e esta é uma escolha perfeitamente aceitável para reduzir o carregamento da página e manter a altura da barra de rolagem em um tamanho decente.

Por outro lado, muitos blogs mova a barra lateral abaixo do conteúdo principal como no Concept Art Empire, que apresenta posts relacionados na barra lateral que, eventualmente, cair abaixo do conteúdo.

Exemplo 2: Blog do Wishpond

O Blog do Wishpond também remove completamente a barra lateral da tela em viewports menores. Essa área da barra lateral geralmente contém anúncios, formulários de inscrição e links de postagem relacionados. Nenhum deste conteúdo é vital, mas pode agregar valor aos visitantes.

Eu gosto de seguir um abordagem híbrida onde eu movo a barra lateral abaixo do conteúdo, mas também escondo alguns itens na barra lateral além de um certo ponto de interrupção.

Por exemplo, se eu tiver três blocos de anúncios no layout completo, posso ocultar dois desses espaços de anúncio no celular. este torna o conteúdo da barra lateral acessível mas não encher a página com conteúdo excessivo.

Exemplo 3: Madame Gautier

Eu também gosto de como Madame Gautier usa sua “Últimas notícias” barra lateral na página inicial. Eventualmente cai abaixo do conteúdo, e ocupa uma posição de visão total na página.

Quase todos os sites terão pelo menos uma barra lateral no design. Se esta é uma barra lateral do site ou apenas algo que aparece em um modelo de página, o estilo de design lado a lado é popular porque cabe mais conteúdo na tela.

É a sua escolha como lidar com o conteúdo. Você pode baixar a barra lateral para baixo, ocultá-la completamente ou usar um híbrido dessas duas técnicas. Mas você deve fazer sua escolha com base na relevância da barra lateral, e os seus necessidade para a página.

Ajustar e espremer as margens

Sempre haverá um ponto em que conteúdo não pode ser espremido mais adiante, e uma seção precisa cair abaixo do outro.

Por ajustando margens antes de baixar o conteúdo da página, você dá aos leitores uma variedade maior de conteúdo para escolher.

Exemplo 1: um mundo

O rodapé do One World é um ótimo exemplo. Tem links de rodapé para todo o site flutuaram certo com um formulário de inscrição por e-mail à esquerda.

À medida que o layout é redimensionado, as margens e preenchimentos entre esses elementos diminuem. As colunas de link aproximar-se, e o formulário de inscrição fica um pouco menor, também.

Passado um certo ponto, faz sentido Solte os links abaixo do formulário de inscrição, e dar o rodapé muito espaço para respirar.

Sim, isso torna a página mais longa e, sim, é preciso mais esforço para rolar até lá, mas nesses pontos de interrupção menores você pode supor que os usuários estão em dispositivos orientados verticalmente.

Exemplo 2: Golden Isles

Outro exemplo que eu amo é a página inicial da Golden Isles com sua estilo de navegação exclusivo. Quando você redimensiona a janela do navegador, os links de navegação apertar juntos. Eventualmente eles partir de uma única linha em duas linhas, em seguida, em colunas no tamanho muito menor.

Outros itens na página siga o mesmo padrão. Este exemplo demonstra o poder de redimensionando margens antes de reorganizar completamente o layout.

Fluxo Vertical em Telas Menores

O conteúdo da página deve fluir naturalmente, e Alinhamento vertical faz sentido no celular. Isso significa que você precisa considerar blocos de conteúdo in-page para atualizar o estilo de conteúdo de acordo. Isso inclui parágrafos, cabeçalhos, blockquotes, listas não ordenadas e também caixas de conteúdo personalizadas.

Exemplo 1: Mensagem Única de BodyBuilding.com

Tomemos por exemplo este post BodyBuilding que usa caixas pequenas para mostrar diferentes exercícios de glúteo.

Estas caixas incluem miniaturas no lado direito para demonstrar o exercício. Em telas menores, essas miniaturas divida em uma nova linha, e eventualmente empilhar em cima uns dos outros.

Seu CSS responsivo deve levar em consideração essas pequenas minúcias para cada página do site.

Exemplo 2: Vanity Fair

Para um exemplo maior, confira a página inicial da Vanity Fair, que reorganiza completamente o controle deslizante da história em destaque. Em uma área de trabalho em tela cheia, as histórias listam manchetes com uma imagem em destaque mostrando ao lado. À medida que o navegador é redimensionado, esta seção das principais notícias torna-se um carrossel deslizante.

A interface em si muda completamente adicionando navegação de pontos, setas e imagens em destaque para cada história na lista. Sua lista de artigos em tela cheia é mais “vertical”, mas esse layout é mais complicado de operar em uma tela móvel, então alterá-lo para um carrossel deslizante é uma opção melhor.

Pensar mais sobre o fluxo do usuário em vez de seu fluxo de conteúdo. Conteúdo nem sempre precisa ser forçado a um layout vertical na tela pequena. Basta pensar em como organizar o conteúdo de uma forma que suporta uma experiência de navegação vertical.

Pensamentos Finais

O design responsivo é essencial nos dias de hoje, e todo web designer e desenvolvedor deve entender como ele funciona. Os visitantes esperam que todos os sites sejam mobile-friendly. Sempre que eu tropeço em um site não responsivo eu me encolho ao ver aquela barra de rolagem horizontal.

Siga as dicas neste post para planejamento de estratégias de design para reorganizar o conteúdo para a melhor experiência de usuário possível em todos os dispositivos.